0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Last updated at Posted at 2024-05-28

Outline

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

image.png

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

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

image.png

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

image.png

今回、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の動作定義 -> カスタム動作 -> カスタム動作をインポート にてインポートする

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

image.png

image.png

スクリプト

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

image.png

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?