「JSステップ」とは、Autifyの「テストシナリオ」内でお客様ご自身で任意のJavaScriptを記述する機能です。
この機能を使うことで、Autifyの標準機能でできない様々なことができるようになります。
「JSステップ」を効果的にご利用いただくには、JavaScriptやDOM構造についての知識が必要になってしまいますが、よくお問い合わせのある使い方についてはそういった知識があまりない場合でもご活用いただけるように スニペット（雛形）の提供を行っています。
かなりパワフルな機能のため、以下具体的に解説いたします。
基本的な使い方についてのあと、具体的なユースケースを紹介しておりますので是非ご参照ください！
※当ドキュメントはJavaScriptやDOMについての解説を行うものではありません。
基本的な使い方
「テストシナリオ」に「JSステップ」を追加する
- 「シナリオ詳細画面」を開きます
- 「JSステップ」を追加したいステップとステップの間にマウスカーソルを移動します
- 「＋」をクリックして表示されたメニューの中から「JSステップを挿入」を選択します
- JavaScriptのコードを記入します
- 「保存」します
利用上の注意
- ハードタブは使えません。スペースをご利用ください。
- IE環境で実行の予定がある場合は、コメント記法は
/* comment */をご利用ください。// commentのコメント記法だとIEで失敗します。
（IE以外の環境では問題ありません） -
JSステップに記載いただいたJavaScriptのコードは、Polyfillやトランスパイル処理が加えられることなく実行されます。この背景に関連し、ES6以降の文法に対しては警告が表示されますが、テスト対象とするブラウザが対応している文法であればご利用いただくことが可能です。
-
テンプレートリテラルはご利用になりません。文字列内に変数の値を入れる場合には、+ を使用して文字列を結合してください。
-
非同期処理の完了を待ったり結果を取得したりすることはできません。応答を取得してから次に進む必要がある場合には、同期的な処理をご利用ください。
「JSステップ」で取得や生成した値を他のステップで使う
「JSステップ」ではページに表示されている要素の情報を取得したり値を生成したりすることができますが、それらの情報をreturnすることで、以降のステップで使用することができます。
後続のステップで使用することができるのは 文字列と数値 です。
- 「JSステップ」で値を
returnします
- 他のステップ（「JSステップ」よりあとのステップ）の「入力値」で「他のステップから取得」を選ぶ
文字列を使用する各種操作ステップおよび検証ステップ（アサーションステップ）のほとんどで有効です。
以下は主要なステップです。
- 操作ステップ
- 入力ステップ
- URL遷移ステップ
- 検証ステップ
- ページのタイトルに対するアサーション
- ページのURLに対するアサーション
- ページに含まれるすべてのテキスト
「引数機能」を使う
「JSステップ」内で「データ」や他の「JSステップ」でreturnした値を使用したい場合、引数として与えることができます。引数で指定された値は、function内では文字列として扱われます。
- シナリオ詳細画面で、引数を追加したい「JSステップ」のサムネイルをクリックし、ステップ詳細を開きます
- functionの横の「＋」をクリックします
- 引数名を入力して「追加」をクリックします
- 引数を追加するとステップ詳細部分右側に「引数の値」というペインが表示されます
- 「値を指定」では、文字列を直接入力して使用することができます
「データ」では、そのシナリオに設定されている「データ」のカラムを使用することができます
「他のステップから取得」では、先行する「JSステップ」でreturnされた値を使用することができます
以下は「データ」を選択した場合です
- 一度追加した変数を削除したりリネームしたい場合は対象の変数をクリックします
↓
具体的なユースケース
実行の度に重複しない文字列を生成する
例えばユーザー登録などのフローのテストの際、一度登録したメールアドレスやユーザーIDでは重複エラーが発生してしまうため、毎回異なる値を生成したい、ということがあります。
そういうときには「JSステップ」内で乱数を生成したりタイムスタンプを取得して、その値をreturnしておき登録フォームに入力操作を行うところでその値を使用するとよいでしょう。
右クリック、ダブルクリック、マウスオーバーなどのマウス操作を行う
右クリックとダブルクリック
Autifyでは、通常のクリック（左クリック）は何も意識すること無くレコーディング中に行うと、クリックステップとして記録されますが、右クリックやダブルクリックについてはまだ標準機能で対応できていません。
もし右クリックやダブルクリックがテストをする上で必要な場合は「JSステップ」を使ってください。
マウスオーバー
レコーディング中にマウスオーバーを行いたい要素に右クリックを行い「ホバーステップを追加する」という項目を選択することでレコーディングを行うことができ、マウスオーバーして表示されるメニューに対してクリックを行うようなテストは「JSステップ」を使うことなく可能です。
ただし、マウスオーバー中しか表示されないツールチップの内容に対してテキスト検証を行いたいような場合は、ツールチップが表示されている状態で固定することができず検証ステップを追加することが難しいため「JSステップ」が必要になってしまいます。
Cookieを設定、削除する
表示言語の切り替えや、A/Bテストの切り替えにCookieを使用することがあるかもしれません。
「JSステップ」を利用すると、Cookieを設定したり削除できます。
Cookieに値を設定したい場合は以下のように記述します。
document.cookie = 'cookie_name=cookie_parameter';
document.cookie = 'lang=ja'; /* よくある言語設定 */
設定されているCookieを削除したい場合は以下のように記述します。
document.cookie = 'cookie_name=; max-age=0';
APIを実行する
以下のスニペットを利用して、同期的にAPIを呼び出すことができます。
JSステップを利用してアサーションを行う
Autifyの標準機能で対象要素の特定がうまく行かない場合や、検証コマンドがない場合、「JSステップ」を使って検証することが可能です。JSステップ内でthrow new Error('error message')をすると、Autify側で「失敗」としてキャッチでき、error messageがエラー内容としてテスト結果画面に表示されます。
以下の項で紹介するのは、今後Autifyの標準機能で対応する予定ですが現在は「JSステップ」を使用する必要がある、問い合わせが多い事例です。
Autify 標準の検証コマンド（アサーションコマンド）はこちらをご参照ください。
要素がないことを確認する
要素がないことを確認したい場合、いくつか方法があります。
- 確認したい対象が文字列の場合、標準の検証コマンドで可能です。こちらをご参照ください。
- 確認したい対象が文字列を持たない場合、「JSステップ」を使用してください。
- 「要素がページ内に存在しないこと」を確認したい場合
-
var selector = "<TODO: REPLACE SELECTOR>"; //置き換えてください
var element = document.querySelector(selector);
if (element) {
throw new Error('Error: 存在してはいけない要素が存在します (' + selector + ').');
}
-
- 「要素がページ内に表示されていないこと」（不可視状態で要素が存在すること）を確認したい場合
- コンテンツ準備中です To be announced...
- 「要素がページ内に存在しないこと」を確認したい場合
N番目の要素に対して各種操作や検証を行う
リストやタイルで表示している要素に対し、テストケースによって、主に以下の2つのケースがあると思います。
- 特定の文字列の要素を常に対象としたい場合
- 「一番最初」「左から3番目」など特定の位置の要素を対象としたい場合
前者については標準機能によるクリックや検証コマンドの追加で対応できることがほとんどですが、後者については「JSステップ」を使用する必要があります。
参考
リストのN番目をクリックしたい場合どうしたらいいですか？