ウェブページの要素をクリックする - selenium - python

ウェブページを開いてリンクや画像などの要素をクリックする。
htmlを見て要素のタグや属性を確認し、それをコード内で指定してクリック。

要素を指定する方法はいくつかあるが、今回はXPathを使用する。
XPathについてはこちら ⇒

・ウェブページの要素を確認し、XPathをコピー

YAHOOのページから「天気・災害」の要素を見てみる。
https://www.yahoo.co.jp/を開いて「天気・災害」を 右クリックから「検証」 をクリック。


右にページのhtmlが表示され「天気・災害」の要素へ飛ぶ。
（一回で飛ばない場合はもう一度右クリックから「検証」をクリック）


右の要素の上で 右クリックから
「Copy ⇒ Copy XPath」 または
「Copy ⇒ Copy full XPath」
でXPathをコピーする。

・XPathから要素を取得してクリック

コピーしたXPathで要素を取得しクリックする。
まずはブラウザ立ち上げページを開く。
参考 ⇒

from selenium import webdriver

brows = webdriver.Chrome()

brows.get( 'https://www.yahoo.co.jp/' )
brows.maximize_window()    #ウィンドウを最大化

※ウィンドウ内にクリックする場所が表示されていないとエラーになる場合があるため
　 .maximize_window() でウィンドウ最大化しておくと良い。

.find_element_by_xpath() にXPathを指定して要素を取得し
.click() でクリック。

from selenium import webdriver

brows = webdriver.Chrome()

brows.get( 'https://www.yahoo.co.jp/' )
brows.maximize_window()

xpath = '/html/body/div/main/div[1]/nav/div/div/ul/li[11]/div/a/p/span[1]'

element = brows.find_element_by_xpath( xpath )

element.click()

・要素の取り方について

「要素を指定する」ことは 「htmlの中の一つのタグを指定する」 ということ。
指定の仕方が悪いを狙った要素とは別のところを取得してしまうので注意が必要。

上記のようにXPathのフルパスでの指定はシンプルで分かりやすいが、
ウェブページのちょっとした改修でズレてしまう可能性がある。
そこで、変更がなさそうな部分を探して要素を取得するのが良い。

「天気・災害」のhtml要素を参考に、該当する部分のhtmlを抜き出してみる。
この中のタグのどれかを指定できれば良い。

<li>
    <div class="_3Ip8DQAJYKfPeByyVN-utZ">
        <a class="yMWCYupQNdgppL-NV6sMi _3sAlKGsIBCxTUbNi86oSjt" href="https://weather.yahoo.co.jp/weather/" aria-label="天気・災害へ遷移する" data-ylk="rsec:tool;slk:weather_13;pos:11;svcid:13" data-rapid_p="11">
            <p class="_2bBRLhI5ZpVYu0tuHZEFrn">
                <span class="pz0On1w4yAviBGMdKItoQ">
                    <span class="fQMqQTGJTbIMxjQwZA2zk _3tGRl6x9iIWRiFTkKl3kcR">
                        天気・災害
                    </span>
                </span>
                <span class="_1Al3K70np2V_Ev1eGkfsBm">
                    <span class="_2Uq6Pw5lfFfxr_OD36xHp6 _3JuM5k4sY_MJiSvJYtVLd_ _2j0mllBwS2oo0NtbzSjHoK" style="width:20px;height:20px">
                    </span>
                </span>
            </p>
        </a>
    </div>
</li>

seleniumにはXPathで要素を取得する以外に
.find_element_by_tag_name() （タグの名前）
.find_element_by_class_name()　（classの値）
.find_element_by_id()　（idの値）
.find_element_by_name()　（nameの値）
などがあるが、今回は４つとも適さない。

タグの名前は同じものが複数あるので使えないし
id、nameの属性は設定されていない。
classは値がランダムのようで、ページを開くたびに変更される。

ここで注目するのは <span>タグの「天気・災害」 というテキストと、
<a>タグの「aria-label="天気・災害へ遷移する"」 という属性。
この２つはこの要素独自の設定だろう。

これらをXPathで書くと
//span[text()="天気・災害"]
//a[@aria-label="天気・災害へ遷移する"]
となるので、 .find_element_by_xpath() で要素を取得する。

xpath = '//span[text()="天気・災害"]'
element = brows.find_element_by_xpath( xpath )

#または

xpath = '//a[@aria-label="天気・災害へ遷移する"]'
element = brows.find_element_by_xpath( xpath )

XPathはタグ名、属性、テキストなど指定できるので、
書き方を覚えてしまえば .find_element_by_xpath() だけで事足りる。