2

ラジオボタンです。
オンにしたいです。
連動するフォームを表示したいです。
クリックに失敗します。
苦戦しました。
質問直前に何とかクリアできちゃいました。
同じ症状でお困りのかたの参考になれば幸いです。
お急ぎでしたら、★だけの飛ばし読みでどうぞ。

　

ひとまずクリックできただけです。
回り道してるのが心残りです。
納得してますが、満足できてません。
ストレートなクリック実現に向けて、更なるチェックポイントがあれば教えてください。
目的の挙動に繋がるなら、クリック以外のアイデアでも構いません。
安定確実が最優先なのはもちろん、スピード感も重視したいです。

　

エラーメッセージ

element click intercepted. element <要素のタグ> is not clickable at point (X座標, Y座標)

　

先人の轍

https://winactor.com/questions/question/ブラウザ操作でクリックができない場合がある/

https://winactor.com/questions/?q=ブラウザ操作のエラー対応方法_「クリック」

　

環境

  • 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つなのかも
  • エミュレーション
    • 座標クリック
      → ラジオボタンのオンに成功する
    • キー操作
      → うまく辿り着けず
  • 画像マッチング
    • → 当然成功する

　

調べたこと

  • 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をオンにできた
  • 目的の画面でテスト★
    • Consoleで実行
      document.getElementsByClassName("f")[0]
      → 該当タグの応答あり
    • Consoleで実行
      document.getElementsByClassName("f")[0].click()
      → クリックに成功
      ※ 当初はこれがうまくいかず、お手上げと感じ、質問する予定だった
  • JavaScriptで制御できるなら、、と以前に習得したアドレスバーアプローチで突破★

https://winactor.com/questions/circle/シナリオ共有サークル/documents/?search=JavaScript

    • 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では記録と実行に成功します。

https://www.google.com/search?q=Katalon+Recorder

WinActorから使いやすい方法を編み出し、Ver.7.4導入時に選択肢に入れたいと思います。

SeleniumBasicでも試して、WinActorでエラーになる原因の特定も進めたいと思います。

anothersolution 新しいコメントを投稿
回答とコメントは、会員登録(無料)で閲覧できるようになります。
新規登録