selenium チェックボックスにチェックを入れたい

Question

下記のようなDOMで、seleniumを利用してチェックボックスにチェックを入れたいのですが、数日苦戦しております。。。。
ちなみに、チェックボックスはページ内に複数存在します。

<div data-test="table-cell-head" class="sc-esOvli jSiiLx">
<div data-test="table-cell-head-wrapper" class="sc-cmthru wJaeN">
<span class="sc-hMFtBS kOMXNb">
<div class="ens-checkbox-item sc-hXRMBi caCMDr">
<input type="checkbox" id="53506082-7e7e-4426-97f3-9d436b979ef8" class="ens-checkbox " value="" checked="">
<label for="53506082-7e7e-4426-97f3-9d436b979ef8" class="sc-iQNlJl gwTIRy">
</label>
</div>
</span>
<span class="sc-cLQEGU ehQqsW">testscore：4000件</span>
</div>
</div>

下記でトライしましたが、チェックを入れることはできませんでした。

#importしてるlibrary
from selenium import webdriver

#実行コード
#<label for="53506082-7e7e-4426-97f3-9d436b979ef8" class="sc-iQNlJl gwTIRy">のxpathでトライ
elem = driver.find_element_by_xpath('//*[@id="root"]/div[5]/div[2]/div/div[2]/div[2]/div[1]/div[1]/div[1]/div/div/div/span[1]/div/label')
elem.click()

#<input type="checkbox" id="53506082-7e7e-4426-97f3-9d436b979ef8" class="ens-checkbox " value="" checked="">のxpathでトライ
elem = driver.find_element_by_xpath('//*[@id="53506082-7e7e-4426-97f3-9d436b979ef8"]')
elem.click()


for i in driver.find_elements_by_xpath("//*[@type='checkbox']"):
     i.get_attribute("value")

初心者のため、質問方法等に不備もあるかと存じますが、解決方法についてご教示いただけましたら幸甚です。
何卒よろしくお願い申し上げます。

Answer 1

そのチェックボックスを右クリックして「検証」をクリックしてください。
開発者ツールが立ち上がると思います。

上の方にElements, Console, Network...とあるかと思いますが、Consoleをクリックして、そこに以下のように打ち込んでください。

document.getElementsByTagName('input')[i].click()

このiを0, 1, 2 ...と上げていって、目的のチェックボックスにチェックが入るiが何であるのかを確認してください。

iが判明したら

driver.find_elements_by_tag_name('input')[i].click()

または、

driver.execute_script('document.getElementsByTagName(\'input\')[i].click()')

と打ってあげてください。

Comments

[john_doe_]

今まで試したことがない検証なので、是非試してみたいと思います。
大変ご丁寧にご教示いただきまして誠にありがとうございます。

[john_doe_]

consoleに下記を入力したら「iが定義されていない」とメッセージが出ました。
document.getElementsByTagName('input')[i].click()

VM2093:1 Uncaught ReferenceError: i is not defined
at <anonymous>:1:40

iを0,1,2,3,4と代入してみましたが、「undefined」とメッセージが出ます。
このまま代入を続ければよろしかったでしょうか？

document.getElementsByTagName('input')[1].click()
undefined

たびたび恐縮ではございますが、何卒よろしくお願い申し上げます。

[shirai]

0,1,2,3,4でOKです。元のブラウザの画面を見ながらやってみてください。
inputタグはチェックボックスやラジオボタンなど様々な使い方がありますが、
iをカウントアップするたびにどこかしらが作動するはずです。

[shirai]

ついでにもうひとつ、この類のid属性は実行するたびに値がランダムに変わることが多く信用できません。
他に頼りに出来そうな要素もないので、DOMの仕様変更には弱そうですが、iをカウントアップするのが最適だと思います。

[john_doe_]

チェックが入るまでiに代入させていけば良かったでしょうか？
１５まで代入しましたが、まだチェックが入りません。
document.getElementsByTagName('input')[i].click()

知識不足で申し訳ございません。。。

[shirai]

document.getElementsByTagName('input')と打つと何個要素があると表示されますか？

[john_doe_]

HTMLCollection(102)と表示されましたので102個のようです。。。。。
根気強くやるしかありませんかね？？

[john_doe_]

他の質問でご回答されていたようにActionChainsというものを利用した方が良いのでしょうか？

[shirai]

ActionChainsはDOMによっては動かないことが多いので、最後の手段として使うようにするだけにしたほうがいいと思います。
document.getElementsByTagName('input')で出てくる102個の▶︎をクリックして縦に出して、一つ一つマウスオーバーするだけでも
ブラウザの元の画面の該当箇所がライトアップされるので、それだけでも判別できると思います。

[john_doe_]

ありがとうございます！！
そのようにして簡易的に確認ができるのですね。大変勉強になります。
たびたびご教示いただきまして誠にありがとうございます。

[john_doe_]

下記が当該チェックボックスのようなのですが、見るべき箇所はあっておりますでしょうか？
0: input#8a13b235-90e0-4ae0-9d89-70bff3d490bb.ens-checkbox.

document.getElementsByTagName('input')[0].click()、を実行してもundefinedとなり、
特にサイト上にも変化が見られなかったです。

少ない情報の中で大変恐縮ではございますが、よろしくお願い致します。

[shirai]

多分違うと思います。
経験則だけでものを言いますが、この類のサイトは大抵の場合
1つ目2つ目あたりを内部システム的な何かのために使っていて、
実際には画面に表示されていない部分です。

undefinedとなるのは問題ないのですが、やはりこの情報の中だけだと
これ以上効率よく検索するのは難しいでしょう。
10分くらいかかると思いますがブラウザの目的のチェックボックスの画面と
開発者ツールの画面をモニタの左右にでも分けて一つ一つカウントアップさせながら
iを探してみてください。

Answer 2

javascriptを実行します。

script = 'document.querySelector("チェックボックスのCSSセレクタ").checked = true;'
driver.execute_script(script)

これでできる…はずです。
CSSセレクタは、id指定なら "#チェックボックスのid" です。詳しくは調べてください。idはユニークなのでidがわかるならこれで十分だと思われます。

input要素にchecked属性が付いているとチェックが付きます。

追記
ちなみに、Chromeの開発者ツールでは、一番左のElemensで要素を選択（上のカーソルアイコンを押すとページ上から直接選ぶこととできる）して、コピー→CSSセレクタをコピーでCSSセレクタを取得できます。xpathも同様に取得できますがjavascriptでは使えません。ページ構成が少しでも変わると使えなくなる可能性があるので注意です。

~~
elem.set_attribute('checked', True)
でできると思います。~~
そんなメソッド無かったです。

Comments

[john_doe_]

ご教示いただきありがとうございます。上記の2種類のxpathでトライしてみましたが、下記エラーが発生しました。

AttributeError: 'WebElement' object has no attribute 'set_attribute'

[kairi003]

すみません、set_attributeってなかったですね。修正します

[john_doe_]

ご親切に大変ありがとうございます。恐縮ではございますが、修正案をお待ち致しております。

[john_doe_]

ご親切にありがとうございます。
また、たびたびのご相談となり恐縮ではございますが、
（）内にidを記載して試してみましたが、下記のエラーが発生してしまいました。

IDの場合：
script = 'document.querySelector('53506082-7e7e-4426-97f3-9d436b979ef8').checked = true;'

File "<ipython-input-34-c6579c224ae1>", line 1
script = 'document.querySelector('53506082-7e7e-4426-97f3-9d436b979ef8').checked = true;'
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 ^
SyntaxError: invalid syntax

CSSセレクタの場合：
script = 'document.querySelector('\35 3506082-7e7e-4426-97f3-9d436b979ef8').checked = true;'

File "<ipython-input-35-c1c90fc80535>", line 1
script = 'document.querySelector('\35 3506082-7e7e-4426-97f3-9d436b979ef8').checked = true;'
^
SyntaxError: unexpected character after line continuation character

またimportすべきlibraryはselenium webdriver以外にありましたでしょうか？
from selenium.webdriver.common.keys import Keys、というのも使う必要あるのかなと感じておりました。

[kairi003]

CSSセレクタではid指定はidの前に#をつけます。

Answer 3

reactで作られたアプリのようなものがチェックボックスに実装されているため、
処理がとても複雑でしたが下記で解决しました。

driver.execute_script('document.getElementsByClassName(\'freevh\')[1].style.opacity=1;')
driver.execute_script('document.getElementsByClassName(\'freevh\')[1].style.transform=\"translateY(-59px)\";')
driver.execute_script('var e=document.getElementsByClassName(\'sc-hXRMBi\');for(i=0;i<e.length;i++){e[i].firstElementChild.checked=true};')