JSステップ
  • 23 Oct 2024
  • 1 分で読めます
  • 投稿者
  • ダーク
    ライト

JSステップ

  • ダーク
    ライト

記事の要約

Autifyはノーコードで使えることが強みですが、コードを記述できないわけではありません!
Autifyの標準機能でも幅広いテストに対応できますが、より高度なテストを行いたい場合、JavaScriptを活用すると作成・実行できるテストの幅が広がります。

JSステップとは?

JSステップとは、Autifyの「シナリオ」内でお客様ご自身で任意のJavaScriptを記述する機能です。この機能を使うことで、Autifyの標準機能でサポートしていない操作も実行できるようになります。

かなりパワフルな機能のため、以下具体的に解説いたします。
基本的な使い方についてのあと、具体的なユースケースを紹介しておりますので是非ご参照ください!

当ドキュメントはJavaScriptやDOMについての解説を行うものではありません。

ページがリロードされるとJSステップが失敗します

この失敗は、ページのリロードによって現在の実行コンテキストが破棄され、JSステップの実行コンテキストが失われるために発生します。

JSステップをシナリオに追加する方法

  1. JSステップを追加したいシナリオ詳細画面を開きます。

  2. JSステップを追加したいステップの間にカーソルを移動させます。
    Screen Shot 2022-07-21 at 18.15.00.png

  3. ボタンをクリックし、ステップを挿入 をホバーします。表示されるメニューから JSステップを選んでください。
    Screen Shot 2022-07-21 at 18.15.23.png

  4. テキストエディタにJavaScriptのコードを入力します。コードは関数で囲ってありますから、シンタックスを入れる必要はありません。
    Screen Shot 2022-06-13 at 5.56.28 PM.png

  5. 任意でステップに名前を付けたり、メモを記入したりできます。ステップの説明などにお役立てください。
    Screen Shot 2022-06-13 at 6.07.15 PM.png

  6. 保存をクリックします。

「JSステップ」で取得・生成した値を他のステップで使う

「JSステップ」で取得・生成した値は、returnをすることで後続のステップで使用することができます。実際にreturnした値は、テスト結果上で確認することができます。

return-value-ja

JSステップ内でreturnしていない場合は、この値はnullになります。
not-return-ja

後続のステップで使用することができるのは 文字列と数値 です。

操作ステップやアサーションステップで使用する

  1. シナリオ詳細画面でreturnされた値を使用するステップをクリックします
  2. 入力値のドロップダウンから、「他のステップから取得」を選び、どのJSステップがreturnした値を使用するか選びます
    js-step-text-to-asign.png

JSステップの引数として使用する

JSステップがreturnした値は、他のJSステップの引数として使用することができます。詳しくはこの後のJSステップで引数を使うで説明します。

JSステップで引数を使う

  1. 引数を追加したいJSステップをクリックします

  2. functionの括弧内のアイコンをクリックします
    js-step-adding-arguments.png

  3. 引数名を入力し、追加をクリックします
    js-step-arg-name.png

  4. 引数の値で、使用したい値の種類を選択します

    • 値を指定 では、文字列を直接入力できます
    • テストメールアドレスでは、作成済みのテストメールアドレスを選択できます
    • データでは、シナリオに設定されているデータのカラムを選択できます
    • 他のステップから取得では、先行するJSステップでreturnされた値や動的な値を使用できます
    • 変数では、インポート変数に設定されているキーを選択できます

ja-js-argument-value.png

引数に設定した値は文字列型になります

引数の値にUI上で数値を設定しても、コード内では文字列型になります。文字列型に変更されることで計算処理等が意図通りにならないことがあります。数値型で処理する必要がある場合は、コード内でNumber()等を使って数値型に変換してから処理を開始するようにしましょう。

  1. 一度追加した引数を削除したり名前を変更したりしたい場合は対象の引数をクリックします。
    rename-arg.png

JavaScriptスニペット

JSステップを効果的にご利用いただくには、JavaScriptやDOM構造についての知識が必要になりますが、よくお問い合わせのある使い方についてはそういった知識があまりない場合でもご活用いただけるように JavaScriptスニペット(雛形)の提供を行っています。ぜひご活用ください。

JavaScriptスニペットの使い方

  1. シナリオにJSステップを追加します

  2. JavaScriptスニペットから使用したいスニペットを選択します
    Screen Shot 2022-06-21 at 5.39.07 PM.png

  3. JSスニペットにカーソルを合わせ、スニペット右上の「コピー」アイコンをクリックします
    Screen Shot 2022-06-21 at 5.40.44 PM.png

  4. スニペットをJSステップに貼り付け、必要に応じてコードを変更してください
    Screen Shot 2022-06-21 at 5.44.10 PM.png

JSステップのユースケース

JSステップは以下のようなケースで役立ちます。

  • APIの実行
  • Cookieの設定・削除
  • カスタムアサーション

この記事は役に立ちましたか?

Changing your password will log you out immediately. Use the new password to log back in.
First name must have atleast 2 characters. Numbers and special characters are not allowed.
Last name must have atleast 1 characters. Numbers and special characters are not allowed.
Enter a valid email
Enter a valid password
Your profile has been successfully updated.