--- title: "Autify 要素に対するJSステップガイド | Autify Guide" slug: "js-steps-for-elements" description: "Autifyで要素に対するJavaScriptステップを使う方法を学びましょう。シームレスな自動化テストを開始しましょう！" tags: ["JSステップ"] updated: 2024-04-09T01:38:29Z published: 2024-04-09T01:38:29Z canonical: "help.autify.com/js-steps-for-elements" --- > ## Documentation Index > Fetch the complete documentation index at: https://help.autify.com/llms.txt > Use this file to discover all available pages before exploring further. # 要素に対するJSステップ JSステップでは、以下のような手順でなんらかの操作を実現する場面がよくあります。 1. 要素を選択する 2. 選択された要素に対する操作を行う 従来は、常に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](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/Screen%20Shot%202022-08-17%20at%206.29.18.png?sv=2026-02-06&spr=https&st=2026-10-29T00%3A23%3A34Z&se=2026-10-29T01%3A23%3A34Z&sr=c&sp=r&sig=2UYyKZg5VFwKXndfh1bKvgb8R3U9o%2BWzFUCdgLKBtZs%3D) 5. Autify Recorderで `保存` をクリックします。 すると新しいJSステップが作成され、引数に `element` が指定されます。これがレコーディング中に選択された要素で、この `element` に対して行いたい操作を通常のJavaScriptで実装することができます。 次の例では、選択された要素に対してダブルクリックをしています。要素を選択するためのコードが不要になっていることにお気づきでしょうか？ ![Screen Shot 2022-08-17 at 6.37.08.png](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/Screen%20Shot%202022-08-17%20at%206.37.08.png?sv=2026-02-06&spr=https&st=2026-10-29T00%3A23%3A34Z&se=2026-10-29T01%3A23%3A34Z&sr=c&sp=r&sig=2UYyKZg5VFwKXndfh1bKvgb8R3U9o%2BWzFUCdgLKBtZs%3D) 要素に対するJSステップの利点の1つは、**サイト構造が多少変化しても、AIが要素探索を行うため、対象の要素を見つけることができる**点です。これは従来、指定したCSSセレクタやXPathと完全に一致する要素がなくなった場合に、常にJSステップを更新する必要があったのとは対照的です。これにより、JSステップのメンテナンスコストを大幅に削減することができます！ 注意 - モバイルサイズ(375x812)でレコーディングしている際に、要素に対するJSステップを追加するには、対象の要素を一度クリックすることでフォーカスをし、そのあとで要素に対するJSステップを追加する必要があります。この時不要なクリックステップがレコーディングされますので、このステップは削除してください。 - ローカルリプレイ後すぐに、対象の要素をクリックせずに要素に対するJSステップを追加し保存した場合、シナリオにステップが追加されません。 - 別の要素をクリックした後に、対象の要素をクリックせずに要素に対するJSステップを追加すると、別の要素に対するJSステップが追加されます。 - 常にN番目の要素を指定したいなど、AIの探索に頼らずに特定の条件のもとで要素を選択したい場合には、要素に対するJSステップは不向きです。引き続き、CSSセレクターやXPathで要素を指定するとよいでしょう。