JSステップご利用のポイント

Autifyはノーコードで利用できるところが強みですが、Autifyの機能で検証が難しい場合には、JSステップをご利用いただくことで検証可能な場合がございます。
こちらのページでは、JSステップの具体的な利用例や活用Tipsなどについてご案内いたします。

はじめに

JSステップはいつ利用すべきか？

JSステップは、Autifyレコーダーでうまくレコーディングが出来ない操作や複雑な検証を実現するために利用可能です。
例えば、以下のような場面では、JSステップが有効な解決策となります。

• 特定の要素（文字列以外）がないことを検証する
• 要素のstyleを検証する
• シナリオの中で外部のAPIを実行する

ただし、慣れるまでは、これは出来るのか？出来ないのかという切り分けが難しい面もございます。
検証したい内容について、機能で実現可能か、それともJSステップが適しているのか？というような疑問が生じた際には、ぜひサポートにご相談ください。

JSステップの利用方法

JSステップをシナリオへ追加する方法や、JSステップの機能に関しては、下記のページでご案内しておりますのでご確認ください。
JSステップ

前提知識

このページでご紹介する方法をお試しいただくには、Chromeのデベロッパーツールなどを利用してCSSセレクターを取得可能なことが前提となります。
CSSセレクターの取得について分からない場合には、まずはじめに以下ドキュメントをご確認いただけますと幸いです。
CSSセレクターを取得する
CSSセレクターを使いこなす

JSステップの利用例

JSステップの利用例として、Autifyの提供するJavascriptスニペットを利用した検証を紹介します。
※このあとの具体例では、作成済みのシナリオがあることを前提としています。作成中のシナリオがない場合にはお手数ですが新規のレコーディングを実施してからお試しください。

1.要素をクリックする

何らかの理由で要素のクリックが出来ない場合には、JSステップを利用してクリックすることが可能です。
例として、、Autifyサイトトップページにある「デモを申し込む」ボタンをクリックする操作をJSステップにて実現してみます。

1.CSSセレクターを取得する
まず該当の要素のセレクターを取得します。
※こちらの手順ではChromeのデベロッパーツールを用いて取得しました。

今回は、

#requestdemo > div > div.web-application-form.mx-auto > form > div > div:nth-child(4) > div > div > button

というセレクターが取得できました。

2.JSステップを追加する
目的の場所にJSステップを追加してください。

3.「要素をクリックする」のスニペットのコードをJSステップに記載する。
要素をクリックするのスニペットのコードをコピーし、2で作成したJSステップに貼り付けてください。

4.JSスニペットの内容を編集する
今回利用したスニペットでは、<TODO: REPLACE SELECTOR>という記載があるため、この部分を以下のように書き換えます。

"#requestdemo > div > div.web-application-form.mx-auto > form > div > div:nth-child(4) > div > div > button"

シナリオを保存し、ローカルリプレイやシナリオ実行をしていただくと、以下のように、JSステップにて記載したアクションが実施されていることが確認可能です。
※今回は、必須項目の入力エラーが発生していることから、意図通り、「デモを申し込む」ボタンのクリックが実施されていることが確認可能できます。

2：要素の情報を他のステップで利用する

2-1：要素の情報を入力値として他のステップで利用する

要素の情報を取得して、他のステップで入力値として利用することが可能です。
表示されているデータの一意な番号（申請番号など）を利用してデータの検索を行うような場面で有効です。
例として、「WEBアプリテスト自動化は目の前です」の要素のテキストをJSステップにて取得し、「お名前（姓）」の項目への入力値として利用してみます。

1.情報を取得したい要素のCSSセレクターを取得する
※例1と同様に、Chromeのデベロッパーツールを用いて取得しました。

今回は、

#requestdemo > div > h3

というセレクターが取得できました。

2.JSステップを追加する
要素のテキストを取得するためのJSステップを追加します。

3.「要素のテキストを取得する」のスニペットのコードをJSステップに記載する。
要素のテキストを取得するのスニペットのコードをコピーし、2で作成したJSステップに貼り付けてください。

4.JSスニペットの内容を編集する
今回利用したスニペットでは、<TODO: REPLACE SELECTOR>という記載があるため、この部分を以下のように書き換えます。

"#requestdemo > div > h3"

5.入力を行いたい要素へ値を入力するステップをレコーディングする。
※入力値は後ほど変更するので、任意の値で構いません。

6.5で追加したステップの編集画面を開き、入力値をJSステップにて取得したものに指定する。
入力値を他のステップから取得とし、「要素のテキストを取得する」のスニペットを追加したJSステップを指定します。

シナリオを保存し、ローカルリプレイやシナリオ実行をしていただくと、以下のように、JSステップにて記載したアクションが実施されていることが確認可能です。

2-2：要素の情報を期待値として他のステップで利用する

要素の情報を取得して、他のステップで期待値として利用することが可能です。
表示されているデータの一意な番号（会員番号など）を取得して、他のステップの画面上（ログイン後の画面など）で存在確認するような場面で有効です。
例として、「2-1：要素の情報を入力値として他のステップで利用する」のシナリオに、追加で入力した値が期待通り入力されているかを検証するステップを追加してみます。

1.目的の要素の値を検証するアサーションを追加する。
2-1のシナリオに、「お名前（姓）」の値を検証するアサーションを追加します。

2.1で追加したステップの編集画面を開き、期待値をJSステップにて取得したものに指定する
期待値を他のステップから取得とし、「要素のテキストを取得する」のスニペットを追加したJSステップを指定します。

シナリオを保存し、シナリオ実行をしていただくと、以下のように、JSステップにて記載したアクションが実施されていることが確認可能です。

3.JSステップでAPIをリクエストする

JSステップを用いるとAPIへリクエストを送ることも可能です。
シナリオの中でAPIから何らかの情報を取得したい、APIを起動したい、というような場合に有効です。
例として、GETリクエストを送ると、「Hello Autify!」を返すAPIを実行するJSステップを追加してみます。

1.JSステップを追加する
目的の場所にJSステップを追加してください。

2.「同期的に GET / POST リクエストを送る」のスニペットのコードをJSステップに記載する。
今回はGETリクエストを利用するため、「同期的に GET / POST リクエストを送る」の、指定した URL に対して GET リクエストを送るのスニペットをご利用ください。

3.URLを変更する
スニペットの以下の部分をAPIに合わせて書き換えてください。

var url = "API URL";

シナリオを保存し、ローカルリプレイやシナリオ実行をしていただくと、以下のように、GETリクエストにて取得された結果がブラウザログに出力されます。

※提供しておりますJSスニペットはレスポンスがJSONであることを想定しています。APIのレスポンスの形式によっては修正が必要になりますのでご注意ください。

もっとJSステップを使いこなす

JSステップのデバッグを行う

JSステップをご利用の際のデバッグ方法としては、「実際にシナリオを実行する」、「ローカルリプレイで動作を確認する」という方法のほかに、Chromeのデベロッパーツールを使うことでもデバッグの確認が可能です。
作成したJSステップの内容を簡単に試すことができますので、お試しください。

例えば「1.要素をクリックする」のJSスニペットをChromeのデベロッパーツールで動作確認する場合は、以下の手順となります。

1.テスト対象のページを開く
まず、JSステップを実行する対象のページを開きます。
※この手順は、手動でもローカルリプレイを利用してもどちらでも構いません。

2.Chromeのデベロッパーツールを起動する。
※以下の例では、Chrome の右上にある「︙」メニューから起動しています。

3.Consoleタブを開く
デベロッパーツールの「Console」タブを開きます。

4.ConsoleタブにてJSステップのソースコードを実行する
ConsoleタブにてJSスニペットのソースコードを実行してください。

5.要素のクリックを確認する
必須項目の入力エラーが発生していることから、意図通り、「デモを申し込む」ボタンのクリックが実施されていることが確認可能です。

JSステップのご利用に関して、ご質問がある場合には、お気軽にサポートまでお問い合わせください。