--- title: "Autify JSステップ活用ポイントガイド | Autify Guide" slug: "tips-for-using-the-js-step" description: "AutifyでJavaScriptステップを使う際のポイントを学びましょう。シームレスな自動化テストを開始しましょう!" updated: 2023-02-17T00:07:29Z published: 2023-02-17T00:07:29Z canonical: "help.autify.com/tips-for-using-the-js-step" --- > ## 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ステップご利用のポイント Autifyはノーコードで利用できるところが強みですが、Autifyの機能で検証が難しい場合には、JSステップをご利用いただくことで検証可能な場合がございます。 こちらのページでは、JSステップの具体的な利用例や活用Tipsなどについてご案内いたします。 ## はじめに ### JSステップはいつ利用すべきか? JSステップは、Autifyレコーダーで[うまくレコーディングが出来ない操作](/v1/docs/ja/important-points#%E3%82%88%E3%81%8F%E3%81%8A%E5%95%8F%E3%81%84%E5%90%88%E3%82%8F%E3%81%9B%E3%82%92%E3%81%84%E3%81%9F%E3%81%A0%E3%81%8F%E6%93%8D%E4%BD%9C%E3%81%AE%E5%AF%BE%E5%BF%9C%E7%8A%B6%E6%B3%81)や複雑な検証を実現するために利用可能です。 例えば、以下のような場面では、JSステップが有効な解決策となります。 - [特定の要素(文字列以外)がないことを検証する](/v1/docs/ja/is-it-possible-to-test-the-absence-of-a-specific-element) - 要素のstyleを検証する - シナリオの中で外部のAPIを実行する ただし、慣れるまでは、これは出来るのか?出来ないのかという切り分けが難しい面もございます。 検証したい内容について、機能で実現可能か、それともJSステップが適しているのか?というような疑問が生じた際には、ぜひサポートにご相談ください。 ### JSステップの利用方法 JSステップをシナリオへ追加する方法や、JSステップの機能に関しては、下記のページでご案内しておりますのでご確認ください。 [JSステップ](https://help.autify.com/docs/ja/javascript-steps) ### 前提知識 このページでご紹介する方法をお試しいただくには、Chromeのデベロッパーツールなどを利用してCSSセレクターを取得可能なことが前提となります。 CSSセレクターの取得について分からない場合には、まずはじめに以下ドキュメントをご確認いただけますと幸いです。 [CSSセレクターを取得する](/v1/docs/ja/how-to-get-css-selectors) [CSSセレクターを使いこなす](/v1/docs/ja/how-to-use-css-selectors-effec) ## JSステップの利用例 JSステップの利用例として、Autifyの提供するJavascriptスニペットを利用した検証を紹介します。 ※このあとの具体例では、作成済みのシナリオがあることを前提としています。作成中のシナリオがない場合にはお手数ですが新規のレコーディングを実施してからお試しください。 ### 1.要素をクリックする 何らかの理由で要素のクリックが出来ない場合には、JSステップを利用してクリックすることが可能です。 例として、、[Autifyサイトトップページ](https://autify.com/ja)にある「デモを申し込む」ボタンをクリックする操作をJSステップにて実現してみます。 ![Ja_例1.png](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/Ja_%E4%BE%8B1.png?sv=2026-02-06&spr=https&st=2026-10-29T01%3A04%3A50Z&se=2026-10-29T02%3A04%3A50Z&sr=c&sp=r&sig=gPyM5cVKKyoGcRdwnCxsfkIUMT5vky%2FrCEiOtXZWPyw%3D) **1.CSSセレクターを取得する** まず該当の要素のセレクターを取得します。 ※こちらの手順ではChromeのデベロッパーツールを用いて取得しました。 ![Ja_デモを申し込む.png](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/Ja_%E3%83%86%E3%82%99%E3%83%A2%E3%82%92%E7%94%B3%E3%81%97%E8%BE%BC%E3%82%80.png?sv=2026-02-06&spr=https&st=2026-10-29T01%3A04%3A50Z&se=2026-10-29T02%3A04%3A50Z&sr=c&sp=r&sig=gPyM5cVKKyoGcRdwnCxsfkIUMT5vky%2FrCEiOtXZWPyw%3D) 今回は、 ``` #requestdemo > div > div.web-application-form.mx-auto > form > div > div:nth-child(4) > div > div > button ``` というセレクターが取得できました。 **2.JSステップを追加する** 目的の場所にJSステップを追加してください。 ![Ja_JSスニペット追加.png](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/Ja_JS%E3%82%B9%E3%83%8B%E3%83%98%E3%82%9A%E3%83%83%E3%83%88%E8%BF%BD%E5%8A%A0.png?sv=2026-02-06&spr=https&st=2026-10-29T01%3A04%3A50Z&se=2026-10-29T02%3A04%3A50Z&sr=c&sp=r&sig=gPyM5cVKKyoGcRdwnCxsfkIUMT5vky%2FrCEiOtXZWPyw%3D) **3.「要素をクリックする」のスニペットのコードをJSステップに記載する。** [要素をクリックする](https://javascript-snippets.autify.com/ja/snippets/mouse/click/)のスニペットのコードをコピーし、2で作成したJSステップに貼り付けてください。 ![Ja_JSスニペットコピペ.png](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/Ja_JS%E3%82%B9%E3%83%8B%E3%83%98%E3%82%9A%E3%83%83%E3%83%88%E3%82%B3%E3%83%92%E3%82%9A%E3%83%98%E3%82%9A.png?sv=2026-02-06&spr=https&st=2026-10-29T01%3A04%3A50Z&se=2026-10-29T02%3A04%3A50Z&sr=c&sp=r&sig=gPyM5cVKKyoGcRdwnCxsfkIUMT5vky%2FrCEiOtXZWPyw%3D) **4.JSスニペットの内容を編集する** 今回利用したスニペットでは、という記載があるため、この部分を以下のように書き換えます。 ``` "#requestdemo > div > div.web-application-form.mx-auto > form > div > div:nth-child(4) > div > div > button" ``` シナリオを保存し、ローカルリプレイやシナリオ実行をしていただくと、以下のように、JSステップにて記載したアクションが実施されていることが確認可能です。 ※今回は、必須項目の入力エラーが発生していることから、意図通り、「デモを申し込む」ボタンのクリックが実施されていることが確認可能できます。 ![Ja_例1実行結果.png](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/Ja_%E4%BE%8B1%E5%AE%9F%E8%A1%8C%E7%B5%90%E6%9E%9C.png?sv=2026-02-06&spr=https&st=2026-10-29T01%3A04%3A50Z&se=2026-10-29T02%3A04%3A50Z&sr=c&sp=r&sig=gPyM5cVKKyoGcRdwnCxsfkIUMT5vky%2FrCEiOtXZWPyw%3D) ### 2:要素の情報を他のステップで利用する #### 2-1:要素の情報を入力値として他のステップで利用する 要素の情報を取得して、他のステップで入力値として利用することが可能です。 表示されているデータの一意な番号(申請番号など)を利用してデータの検索を行うような場面で有効です。 例として、「WEBアプリテスト自動化は目の前です」の要素のテキストをJSステップにて取得し、「お名前(姓)」の項目への入力値として利用してみます。 ![Ja_例2.png](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/Ja_%E4%BE%8B2.png?sv=2026-02-06&spr=https&st=2026-10-29T01%3A04%3A50Z&se=2026-10-29T02%3A04%3A50Z&sr=c&sp=r&sig=gPyM5cVKKyoGcRdwnCxsfkIUMT5vky%2FrCEiOtXZWPyw%3D) **1.情報を取得したい要素のCSSセレクターを取得する** ※例1と同様に、Chromeのデベロッパーツールを用いて取得しました。 ![Ja_WEBアプリテスト目の前セレクタ.png](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/Ja_WEB%E3%82%A2%E3%83%95%E3%82%9A%E3%83%AA%E3%83%86%E3%82%B9%E3%83%88%E7%9B%AE%E3%81%AE%E5%89%8D%E3%82%BB%E3%83%AC%E3%82%AF%E3%82%BF.png?sv=2026-02-06&spr=https&st=2026-10-29T01%3A04%3A50Z&se=2026-10-29T02%3A04%3A50Z&sr=c&sp=r&sig=gPyM5cVKKyoGcRdwnCxsfkIUMT5vky%2FrCEiOtXZWPyw%3D) 今回は、 ``` #requestdemo > div > h3 ``` というセレクターが取得できました。 **2.JSステップを追加する** 要素のテキストを取得するためのJSステップを追加します。 ![Ja_例2JSステップ追加.png](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/Ja_%E4%BE%8B2JS%E3%82%B9%E3%83%86%E3%83%83%E3%83%95%E3%82%9A%E8%BF%BD%E5%8A%A0%282%29.png?sv=2026-02-06&spr=https&st=2026-10-29T01%3A04%3A50Z&se=2026-10-29T02%3A04%3A50Z&sr=c&sp=r&sig=gPyM5cVKKyoGcRdwnCxsfkIUMT5vky%2FrCEiOtXZWPyw%3D) **3.「要素のテキストを取得する」のスニペットのコードをJSステップに記載する。** [要素のテキストを取得する](https://javascript-snippets.autify.com/ja/snippets/values/get_text_content/)のスニペットのコードをコピーし、2で作成したJSステップに貼り付けてください。 ![Ja_例2JSスニペットコピペ.png](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/Ja_%E4%BE%8B2JS%E3%82%B9%E3%83%8B%E3%83%98%E3%82%9A%E3%83%83%E3%83%88%E3%82%B3%E3%83%92%E3%82%9A%E3%83%98%E3%82%9A%282%29.png?sv=2026-02-06&spr=https&st=2026-10-29T01%3A04%3A50Z&se=2026-10-29T02%3A04%3A50Z&sr=c&sp=r&sig=gPyM5cVKKyoGcRdwnCxsfkIUMT5vky%2FrCEiOtXZWPyw%3D) **4.JSスニペットの内容を編集する** 今回利用したスニペットでは、という記載があるため、この部分を以下のように書き換えます。 ``` "#requestdemo > div > h3" ``` **5.入力を行いたい要素へ値を入力するステップをレコーディングする。** ※入力値は後ほど変更するので、任意の値で構いません。 ![Ja_例2レコーディング.png](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/Ja_%E4%BE%8B2%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%86%E3%82%99%E3%82%A3%E3%83%B3%E3%82%AF%E3%82%99.png?sv=2026-02-06&spr=https&st=2026-10-29T01%3A04%3A50Z&se=2026-10-29T02%3A04%3A50Z&sr=c&sp=r&sig=gPyM5cVKKyoGcRdwnCxsfkIUMT5vky%2FrCEiOtXZWPyw%3D) **6.5で追加したステップの編集画面を開き、入力値をJSステップにて取得したものに指定する。** 入力値を他のステップから取得とし、「要素のテキストを取得する」のスニペットを追加したJSステップを指定します。 ![Ja_例2入力値指定.png](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/Ja_%E4%BE%8B2%E5%85%A5%E5%8A%9B%E5%80%A4%E6%8C%87%E5%AE%9A.png?sv=2026-02-06&spr=https&st=2026-10-29T01%3A04%3A50Z&se=2026-10-29T02%3A04%3A50Z&sr=c&sp=r&sig=gPyM5cVKKyoGcRdwnCxsfkIUMT5vky%2FrCEiOtXZWPyw%3D) シナリオを保存し、ローカルリプレイやシナリオ実行をしていただくと、以下のように、JSステップにて記載したアクションが実施されていることが確認可能です。 ![Ja_例2実行結果.png](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/Ja_%E4%BE%8B2%E5%AE%9F%E8%A1%8C%E7%B5%90%E6%9E%9C.png?sv=2026-02-06&spr=https&st=2026-10-29T01%3A04%3A50Z&se=2026-10-29T02%3A04%3A50Z&sr=c&sp=r&sig=gPyM5cVKKyoGcRdwnCxsfkIUMT5vky%2FrCEiOtXZWPyw%3D) #### 2-2:要素の情報を期待値として他のステップで利用する 要素の情報を取得して、他のステップで期待値として利用することが可能です。 表示されているデータの一意な番号(会員番号など)を取得して、他のステップの画面上(ログイン後の画面など)で存在確認するような場面で有効です。 例として、「2-1:要素の情報を入力値として他のステップで利用する」のシナリオに、追加で入力した値が期待通り入力されているかを検証するステップを追加してみます。 **1.目的の要素の値を検証するアサーションを追加する。** 2-1のシナリオに、「お名前(姓)」の値を検証するアサーションを追加します。 ![Ja_例2アサーション追加.png](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/Ja_%E4%BE%8B2%E3%82%A2%E3%82%B5%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E8%BF%BD%E5%8A%A0.png?sv=2026-02-06&spr=https&st=2026-10-29T01%3A04%3A50Z&se=2026-10-29T02%3A04%3A50Z&sr=c&sp=r&sig=gPyM5cVKKyoGcRdwnCxsfkIUMT5vky%2FrCEiOtXZWPyw%3D) ![Ja_例2アサーション追加2.png](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/Ja_%E4%BE%8B2%E3%82%A2%E3%82%B5%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E8%BF%BD%E5%8A%A02.png?sv=2026-02-06&spr=https&st=2026-10-29T01%3A04%3A50Z&se=2026-10-29T02%3A04%3A50Z&sr=c&sp=r&sig=gPyM5cVKKyoGcRdwnCxsfkIUMT5vky%2FrCEiOtXZWPyw%3D) **2.1で追加したステップの編集画面を開き、期待値をJSステップにて取得したものに指定する** 期待値を他のステップから取得とし、「要素のテキストを取得する」のスニペットを追加したJSステップを指定します。 ![Ja_例2期待値指定.png](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/Ja_%E4%BE%8B2%E6%9C%9F%E5%BE%85%E5%80%A4%E6%8C%87%E5%AE%9A.png?sv=2026-02-06&spr=https&st=2026-10-29T01%3A04%3A50Z&se=2026-10-29T02%3A04%3A50Z&sr=c&sp=r&sig=gPyM5cVKKyoGcRdwnCxsfkIUMT5vky%2FrCEiOtXZWPyw%3D) シナリオを保存し、シナリオ実行をしていただくと、以下のように、JSステップにて記載したアクションが実施されていることが確認可能です。 ![Ja_例2実行結果2.png](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/Ja_%E4%BE%8B2%E5%AE%9F%E8%A1%8C%E7%B5%90%E6%9E%9C2.png?sv=2026-02-06&spr=https&st=2026-10-29T01%3A04%3A50Z&se=2026-10-29T02%3A04%3A50Z&sr=c&sp=r&sig=gPyM5cVKKyoGcRdwnCxsfkIUMT5vky%2FrCEiOtXZWPyw%3D) 注意事項 ※[ローカルリプレイではアサーションの実行はしませんので](https://help.autify.com/docs/ja/what-can-i-do-with-record-here#%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A0%85)、アサーションの検証はシナリオ実行にて行ってください。 ### 3.JSステップでAPIをリクエストする JSステップを用いるとAPIへリクエストを送ることも可能です。 シナリオの中でAPIから何らかの情報を取得したい、APIを起動したい、というような場合に有効です。 例として、GETリクエストを送ると、「Hello Autify!」を返すAPIを実行するJSステップを追加してみます。 **1.JSステップを追加する** 目的の場所にJSステップを追加してください。 ![Ja_JSスニペット追加.png](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/Ja_JS%E3%82%B9%E3%83%8B%E3%83%98%E3%82%9A%E3%83%83%E3%83%88%E8%BF%BD%E5%8A%A0.png?sv=2026-02-06&spr=https&st=2026-10-29T01%3A04%3A50Z&se=2026-10-29T02%3A04%3A50Z&sr=c&sp=r&sig=gPyM5cVKKyoGcRdwnCxsfkIUMT5vky%2FrCEiOtXZWPyw%3D) **2.「同期的に GET / POST リクエストを送る」のスニペットのコードをJSステップに記載する。** 今回はGETリクエストを利用するため、[「同期的に GET / POST リクエストを送る」](https://javascript-snippets.autify.com/ja/snippets/others/xhr_get_post/)の、指定した URL に対して GET リクエストを送るのスニペットをご利用ください。 ![Ja_同期的に GETPOST リクエストを送る.png](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/Ja_%E5%90%8C%E6%9C%9F%E7%9A%84%E3%81%AB%20GETPOST%20%E3%83%AA%E3%82%AF%E3%82%A8%E3%82%B9%E3%83%88%E3%82%92%E9%80%81%E3%82%8B.png?sv=2026-02-06&spr=https&st=2026-10-29T01%3A04%3A50Z&se=2026-10-29T02%3A04%3A50Z&sr=c&sp=r&sig=gPyM5cVKKyoGcRdwnCxsfkIUMT5vky%2FrCEiOtXZWPyw%3D) **3.URLを変更する** スニペットの以下の部分をAPIに合わせて書き換えてください。 ``` var url = "API URL"; ``` シナリオを保存し、ローカルリプレイやシナリオ実行をしていただくと、以下のように、GETリクエストにて取得された結果がブラウザログに出力されます。 ![Ja_例3実行結果.png](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/Ja_%E4%BE%8B3%E5%AE%9F%E8%A1%8C%E7%B5%90%E6%9E%9C.png?sv=2026-02-06&spr=https&st=2026-10-29T01%3A04%3A50Z&se=2026-10-29T02%3A04%3A50Z&sr=c&sp=r&sig=gPyM5cVKKyoGcRdwnCxsfkIUMT5vky%2FrCEiOtXZWPyw%3D) ※提供しておりますJSスニペットはレスポンスがJSONであることを想定しています。APIのレスポンスの形式によっては修正が必要になりますのでご注意ください。 ## もっとJSステップを使いこなす ### JSステップのデバッグを行う JSステップをご利用の際のデバッグ方法としては、「実際にシナリオを実行する」、「ローカルリプレイで動作を確認する」という方法のほかに、Chromeのデベロッパーツールを使うことでもデバッグの確認が可能です。 作成したJSステップの内容を簡単に試すことができますので、お試しください。 例えば「1.要素をクリックする」のJSスニペットをChromeのデベロッパーツールで動作確認する場合は、以下の手順となります。 **1.テスト対象のページを開く** まず、JSステップを実行する対象のページを開きます。 ※この手順は、手動でもローカルリプレイを利用してもどちらでも構いません。 ![Ja_debug0.png](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/Ja_debug0.png?sv=2026-02-06&spr=https&st=2026-10-29T01%3A04%3A50Z&se=2026-10-29T02%3A04%3A50Z&sr=c&sp=r&sig=gPyM5cVKKyoGcRdwnCxsfkIUMT5vky%2FrCEiOtXZWPyw%3D) **2.Chromeのデベロッパーツールを起動する。** ※以下の例では、Chrome の右上にある「︙」メニューから起動しています。 ![Chrome の右上にある「︙」メニューから起動.png](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/Chrome%20%E3%81%AE%E5%8F%B3%E4%B8%8A%E3%81%AB%E3%81%82%E3%82%8B%E3%80%8C%EF%B8%99%E3%80%8D%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%81%8B%E3%82%89%E8%B5%B7%E5%8B%95%281%29.png?sv=2026-02-06&spr=https&st=2026-10-29T01%3A04%3A50Z&se=2026-10-29T02%3A04%3A50Z&sr=c&sp=r&sig=gPyM5cVKKyoGcRdwnCxsfkIUMT5vky%2FrCEiOtXZWPyw%3D) **3.Consoleタブを開く** デベロッパーツールの「Console」タブを開きます。 ![デベロッパーツールの「Console」タブを開きます.png](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/%E3%83%86%E3%82%99%E3%83%98%E3%82%99%E3%83%AD%E3%83%83%E3%83%8F%E3%82%9A%E3%83%BC%E3%83%84%E3%83%BC%E3%83%AB%E3%81%AE%E3%80%8CConsole%E3%80%8D%E3%82%BF%E3%83%95%E3%82%99%E3%82%92%E9%96%8B%E3%81%8D%E3%81%BE%E3%81%99%281%29.png?sv=2026-02-06&spr=https&st=2026-10-29T01%3A04%3A50Z&se=2026-10-29T02%3A04%3A50Z&sr=c&sp=r&sig=gPyM5cVKKyoGcRdwnCxsfkIUMT5vky%2FrCEiOtXZWPyw%3D) **4.ConsoleタブにてJSステップのソースコードを実行する** ConsoleタブにてJSスニペットのソースコードを実行してください。 ![Ja_JSステップテスト.png](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/Ja_JS%E3%82%B9%E3%83%86%E3%83%83%E3%83%95%E3%82%9A%E3%83%86%E3%82%B9%E3%83%88.png?sv=2026-02-06&spr=https&st=2026-10-29T01%3A04%3A50Z&se=2026-10-29T02%3A04%3A50Z&sr=c&sp=r&sig=gPyM5cVKKyoGcRdwnCxsfkIUMT5vky%2FrCEiOtXZWPyw%3D) **5.要素のクリックを確認する** 必須項目の入力エラーが発生していることから、意図通り、「デモを申し込む」ボタンのクリックが実施されていることが確認可能です。 ![Ja_JSステップテスト結果確認.png](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/Ja_JS%E3%82%B9%E3%83%86%E3%83%83%E3%83%95%E3%82%9A%E3%83%86%E3%82%B9%E3%83%88%E7%B5%90%E6%9E%9C%E7%A2%BA%E8%AA%8D.png?sv=2026-02-06&spr=https&st=2026-10-29T01%3A04%3A50Z&se=2026-10-29T02%3A04%3A50Z&sr=c&sp=r&sig=gPyM5cVKKyoGcRdwnCxsfkIUMT5vky%2FrCEiOtXZWPyw%3D) JSステップのご利用に関して、ご質問がある場合には、お気軽にサポートまでお問い合わせください。