要素に対するJSステップ
  • 17 Aug 2022
  • 1 分で読めます
  • 投稿者
  • ダーク
    ライト

要素に対するJSステップ

  • ダーク
    ライト

JSステップでは、以下のような手順でなんらかの操作を実現する場面がよくあります。

  • 要素を選択する
  • 選択された要素に対する操作を行う

従来は、常にJSステップ内で querySelector() などを使用して要素を選択する必要がありましたが、もう一つの方法、画面から要素を選択してJSステップの引数として渡す方法が取れるようになりました。
この方法を用いると、もはやCSSセレクターやXPathを書かずともJSステップで取り扱う要素を選択できるようになります!

使い方は以下の通りです。

  1. Autify Recorderでレコーディングを開始します。
  2. 対象要素を含むページに移動します。
  3. 対象の要素を右クリック(Macの場合はCtl + Click)します。
  4. コンテキストメニューから「JSステップを追加する」をクリックします。
    Screen Shot 2022-08-17 at 6.29.18.png
  5. Autify Recorderで 保存 をクリックします。

すると新しいJSステップが作成され、引数に element が指定されます。これがレコーディング中に選択された要素で、この element に対して行いたい操作を通常のJavaScriptで実装することができます。

次の例では、選択された要素に対してダブルクリックをしています。要素を選択するためのコードが不要になっていることにお気づきでしょうか?

Screen Shot 2022-08-17 at 6.37.08.png

要素に対するJSステップの利点の1つは、サイト構造が多少変化しても、AIが要素探索を行うため、対象の要素を見つけることができる点です。これは従来、指定したCSSセレクタやXPathと完全に一致する要素がなくなった場合に、常にJSステップを更新する必要があったのとは対照的です。これにより、JSステップのメンテナンスコストを大幅に削減することができます!

注意

常にN番目の要素を指定したいなど、AIの探索に頼らずに特定の条件のもとで要素を選択したい場合には、要素に対するJSステップは不向きです。引き続き、CSSセレクターやXPathで要素を指定するとよいでしょう。


Changing your password will log you out immediately. Use the new password to log back in.
First name must have atleast 2 characters. Numbers and special characters are not allowed.
Last name must have atleast 1 characters. Numbers and special characters are not allowed.
Enter a valid email
Enter a valid password
Your profile has been successfully updated.