クリックに失敗する箇所がJavaScriptで乗り越えられた
ラジオボタンです。
オンにしたいです。
連動するフォームを表示したいです。
クリックに失敗します。
苦戦しました。
質問直前に何とかクリアできちゃいました。
同じ症状でお困りのかたの参考になれば幸いです。
お急ぎでしたら、★だけの飛ばし読みでどうぞ。
ひとまずクリックできただけです。
回り道してるのが心残りです。
納得してますが、満足できてません。
ストレートなクリック実現に向けて、更なるチェックポイントがあれば教えてください。
目的の挙動に繋がるなら、クリック以外のアイデアでも構いません。
安定確実が最優先なのはもちろん、スピード感も重視したいです。
エラーメッセージ
element click intercepted. element <要素のタグ> is not clickable at point (X座標, Y座標)
先人の轍
https://winactor.com/questions/question/ブラウザ操作でクリックができない場合がある/
環境
- WinActor721、740
- Chrome9x系、10x系
- リビジョン番号まで完全に一致するchromedriver.exeはなく、前後のものを使用中
意外と知らないバージョン表記・数字の豆知識 - @IT
https://atmarkit.itmedia.co.jp/ait/articles/1003/26/news106.html
- ※ ブラウザ関連ライブラリはひと通り使えている
目的の画面(終了タグ等は省略)
<button>ログアウト ← クリックに成功する
<input type="text" id="number"> ← 値の設定に成功する
<div class="a">
<div class="b">
<div role="radiogroup" class="c"> ← 20程度のラジオボタンを内包
<labei role="radio" tabindex="-1" class="d"> ← ラベルの範囲がラジオボタン1つ分
<span>
<span class="e">
<input type="radio" tabindex="-1" class="f" value="1">
<span class="g">ラベル
- 実際はtableでレイアウトされている
- ラジオボタンのクリックに応じたフォームが下部に表示される
- ラジオボタン2つめのvalueは2
Tabキーでのカーソル移動順
- ログアウト → number → サイト情報を表示 → どこか → 再度ログアウトとループする
- ラジオボタンはtabindexが-1で、Tabでカーソルが乗らない
- オンにしたラジオボタンにはカーソルが乗る
試したこと
- クリック
- //label[1]/span/input[@value="1"]
- //label[contains(.,"ラベル")]
→ どちらも一意にヒットするものの、冒頭のエラー
- 自動記録
- アカウント入力、ログインクリック、number入力、ログアウト
→ 記録も実行も成功する - ラジオボタンクリック
→ パーツ生成されず
※ 要素が重なってると言われる系が、パーツが生成されない原因の1つなのかも
- アカウント入力、ログインクリック、number入力、ログアウト
- エミュレーション
- 座標クリック
→ ラジオボタンのオンに成功する - キー操作
→ うまく辿り着けず
- 座標クリック
- 画像マッチング
- → 当然成功する
調べたこと
- JavaScriptフレームワークっぽいのが使われている模様
- vue
- vuex
- element-ui
- axios
- lodash
- Vueのサンプルでテスト
フォーム入力バインディング — Vue.js
https://jp.vuejs.org/v2/guide/forms.html
-
- ラジオのOneをデベロッパーツールのElementで検索
//input[@id="one"]
→ 一意にヒットする - Consoleで実行
document.getElementById("one").click();
→ Oneをオンにできた
- ラジオのOneをデベロッパーツールのElementで検索
- 目的の画面でテスト★
- Consoleで実行
document.getElementsByClassName("f")[0]
→ 該当タグの応答あり - Consoleで実行
document.getElementsByClassName("f")[0].click()
→ クリックに成功
※ 当初はこれがうまくいかず、お手上げと感じ、質問する予定だった
- Consoleで実行
- JavaScriptで制御できるなら、、と以前に習得したアドレスバーアプローチで突破★
https://winactor.com/questions/circle/シナリオ共有サークル/documents/?search=JavaScript
-
- javascript:document.getElementsByClassName("f")[0].click()
→ クリックに成功、対応したフォームが下部に表示された
- javascript:document.getElementsByClassName("f")[0].click()
同じ症状を深堀るための状況確認メモ
- ディスプレイの拡大、縮小:100%
- Chromeのズーム:100%
- コントロールの位置:いずれもウィンドウの上半分以内
- コントロール同士の重なり:UI上ではないように見える
- タブ表示でない(タイトルバーのfaviconクリックで「タブで表示」メニューがある)
- JavaScriptでウィンドウサイズ指定とかステータスバーオフで開かれたウィンドウ
- WinActorから開いた「自動テスト ソフトウェア~」の状態では、通常のタブモードで開かれる
- 今回のラジオボタンの挙動とは無関係っぽい
- デベロッパーツールでのElementタブからframeを検索してもヒットなし
- #shadow-rootはなく、Shadow DOMではないと思われる
真相っぽい事実(さらに投稿直前に気づいた、、)
- 右クリック → ページのソースを表示は、<body>内がほぼJavaScriptで生成されてる模様!
Google社のChromeブラウザを利用しています。 WinActorではChromeブラウザをどのように操作することができますか。 また、IEとChromeブラウザではWinActor利用時にどのような違いがあるのか教えてください。- WinActor公式FAQサイト|NTT-AT
https://www.matchcontact.net/winactor_jp/faq.asp?faqno=JPN00068記録対象外のWebページ
動的にHTML要素が生成されるWebページ
-
- これが自動記録でパーツが生成されなかった原因の1つっぽい
- ログアウトとかnumberは自動記録で動いたので、完全には説明しきれない
- 目的の要素を右クリック→ 検証で要素を確認できたし、デベロッパーツールのElementタブで要素がフツーにひと通り掴めたので、ページのソースを表示は試してなかった
- 要素の重なりとは別に原因がありそうな予感
(追記)
Katalon Recorderでは記録と実行に成功します。
WinActorから使いやすい方法を編み出し、Ver.7.4導入時に選択肢に入れたいと思います。
SeleniumBasicでも試して、WinActorでエラーになる原因の特定も進めたいと思います。