要素に対するJSステップ

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

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

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

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

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

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

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

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