クリックしないと出てこないHTML要素の取得方法

Question

前提・実現したいこと

chrome driverとseleniumを使用して、tradingviewというサイトにログインをしようとしています。言語はPythonで書いています。

ステップとしては、
1,tradingviewのトップページをchromeで起動
2,右上のメニューボタンをクリック
3,メニューからサインインボタンをクリック
4,メールアドレスおよびパスワードを入力してログイン
がありますが、3番のサインインボタンをクリックすることができません。

URL : https://jp.tradingview.com/

発生している問題・エラーメッセージ

当該のサインインボタンのフルパスが「/html/body/div[6]/div[2]/span/div[1]/div/div/div/div[1]」であるため、
driver.find_element_by_xpath("/html/body/div[6]/div[2]/span/div[1]/div/div/div/div[1]").click()
でクリックしようとしていますが、

selenium.common.exceptions.NoSuchElementException: Message: no such element: Unable to locate element: 

と要素が見つからないというメッセージが出て失敗します。

該当のソースコード

driver.find_element_by_xpath("/html/body/div[6]/div[2]/span/div[1]/div/div/div/div[1]").click()

試したこと

メニューボタンをクリックしてから次の処理までが早いと同様のエラーが出現するということだったので、time.sleep(10)等をいれて試してみましたが結果は変わらずでした。

補足情報

chromeの検証ツールにてクリックしようとしている要素のフルパスを検索してみましたが、トップページのみしか表示していない時は検索に引っかかりません。
しかし、メニューボタンをクリックし「サインイン」ボタンが出現した状態でフルパスを検索するとヒットすることから、このあたりが関係しているのではないかと思っています。
しかし、seleniumでメニューボタンをクリックしサインインボタンを出現させるとこまでは問題なく動作しているので、なぜ要素が見つからないのかが全く検討がつかない状態です。

Answer 1

ウィンドウサイズ等でソースや画面上の表示が変わるレスポンシブなデザインのページの為
例えば操作するdriverのウィンドウサイズも予め指定してあげて
そのウィンドウサイズに適したXpathを指定してあげると良いでしょう。

from selenium import webdriver
from webdriver_manager.chrome import ChromeDriverManager

driver = webdriver.Chrome(ChromeDriverManager().install())
driver.maximize_window()	# 今回の場合だとwindow最大化
driver.get('https://jp.tradingview.com/')
driver.find_element_by_class_name('tv-header__user-menu-button').click()
time.sleep(1)	# 要素が表示されるのを待つ

# windowが最大時の場合のxpathを用意
path = '//*[@id="overlap-manager-root"]/div/span/div[1]/div/div/div[1]'
driver.find_element_by_xpath(path).click()

Comments

[leon783817200]

ご回答ありがとうございます。
ウィンドウサイズの違いによっても要素の取得可否が変わるのですね・・・
教えていただいたコードでサインインボタンを押すことができました。
ありがとうございます。

しかし、chromeの検証ツールでxpathを取得すると「//*[@id="overlap-manager-root"]/div[2]/span/div[1]/div/div/div[1]」と、一番はじめのdivに[2]がつきます。
そして、このパスだとクリックができないのですが、今回はなぜdivの[2]を除かれたのかについても教えていただけませんでしょうか。

[nto]

> ウィンドウサイズの違いによっても要素の取得可否が変わるのですね・・・
レスポンシブデザインとは、Webサイトのデザインを「閲覧ユーザーが使用するデバイスの画面サイズに応じて表示を最適化するデザイン」を指します。
掲題のサイトではウィンドウサイズによってソースが変動するものとなっているので
ウィンドウを最大化せずとも、任意のサイズの状態で操作するならばそのサイズの時のソースからxpathを参照する必要があります。

> しかし、chromeの検証ツールでxpathを取得すると～今回はなぜdivの[2]を除かれたのかについても教えていただけませんでしょうか。
これも、上記で説明をしている様にウィンドウサイズによってソースが変動するからです。
試しにウィンドウサイズを出来る限り小さくしてブラウズしてみてください。
[チャート トレード マーケット スクリーナー コミュニティ 詳細]
とこれらのヘッダーや、[無料お試しを開始]というバッジは表示されていないと思います。
そこから徐々にウィンドウサイズを横に広げていくとヘッダーやバッジが表示されるかと思います。

これらはそれぞれのサイズによってソースの中身が異なります。
私が回答で提示したコードの場合、ウィンドウサイズを最大化した状態に使用出来るxpathとなっているので質問者様が確認されたxpathと私の掲示したxpathとが異なる理由となります。

Answer 2

Pythonは利用環境にないので、構文が似ているVBAでやりました。

本当にサインインまで行くだけならこれでいけました。
サインインボタンがXpathだと確かに取得できなかったので、そこに使われているアイコンのclassから取得してむりやり行っています。
その後E-mailはXpathで行けます。

確証は有りませんが、iscrollというjsを使っているのでそこの関係な気がします。ちょっと美しくない感じですが、これでいかがでしょうか？

Dim driver As New Selenium.WebDriver

driver.Start "chrome"
driver.Get "https://jp.tradingview.com/"

With driver.FindElementByXPath("/html/body/div[2]/div[3]/div[2]/div[3]/button[1]")
           .Click
End With


With driver.FindElementByClass("icon-2IihgTnv")
           .Click
End With


With driver.FindElementByXPath("//*[@id=""overlap-manager-root""]/div/div[2]/div/div/div/div/div/div/div[1]/div[4]/div")

.Click
End With

Comments

[leon783817200]

ご回答ありがとうございます！xpathでいけない場合にはそのような対応が可能なのですね。勉強になります。