[T-DASH] CSSカスタマイズしたフォームをテスト自動化する

Outline

WEBページのチェックボックスなどのフォームのデザインを良くするために、CSSを使う方法がある。
下図の例は、input tagが存在するのだが、opacity: 0　にすることで実際に見えないようにする。
代わりにチェックボックスのon時のデザイン☑を良くする例である。

チェックボックスのカスタマイズ参考サイトはこちら。

このようなinputに対してテスト自動化をしようとすると失敗します。
チェックボックスにチェックを入れるをしても、「要素がNot visible」となります

developer toolでこのXPathを検索すると、要素はちゃんと存在します。
ただ、テスト自動化からは見えていないのです。

今回、T-DASHでやっていますが、Selenium + robot framework等でも標準的な実装では同じ事象が起きます。

技術的な情報

ActionChainsを使います。これはマウス、キーボード操作を低レイヤーで操作するもので、見えない要素に対して強制的に処理することができます。

action_chain=True

T-DASHの手順

カスタム動作

以下設定内容を opacity.yaml のファイル名で保存する

ACT-CAT-CUSTOM-bd0e3e0a-5320-413a-bebd-2db14f9cce77:
  action_category_name: opacity
  icon: ''
  color: '#d6170c'
  custom_data:
    file_name: opacity
    pip_list: []
    library_list: []
  actions:
    ACT-CUSTOM-bcaa8d4a-6f15-4cfc-b3aa-9449ddb2a416:
      action_name: 見えない要素を強制的にクリック
      action_type: operation
      action_format: 見えない要素「画面名」「要素名」を強制的にクリック
      action_note: ''
      action_args:
      - screen
      - element
      action_def:
      - - Click Element
        - ${location}
        - action_chain=True
    ACT-CUSTOM-3cd40441-2c08-4c4d-beaa-e6223a9b22f1:
      action_name: 見えていないチェックボックスがチェックされているかを検証する
      action_type: operation
      action_format: 見えていないチェックボックス「画面名」「要素名」がチェックされているかを検証する
      action_note: ''
      action_args:
      - screen
      - element
      action_def:
      - - Checkbox Should Be Selected
        - ${location}

次に、作成されたopacity.yamlをT-DASHの動作定義 -> カスタム動作 -> カスタム動作をインポート にてインポートする

今回、見えない要素をクリックするカスタム動作と、チェックボックスがチェックされているかを検証するカスタム動作を用意した。

スクリプト

カスタム動作を呼び出し、対象の画面要素を選択すればよい