kakakakakku blog

Weekly Tech Blog: Keep on Learning!

Autify で「JS ステップ」と throw new Error() を組み合わせてアサーションを実装する

Autify のレコーディング時にシナリオに追加する「検証ステップ」は,基本的に「〜を確認する」という「正常確認」のテストになる.例えば「URL を確認する」「対象のテキストを確認する」など.しかし,実際には「特定の条件を満たさなかったらテストをエラーにする」というテストを実装したくなる場面もある.今回は Autify の「JS ステップ機能」throw new Error() を組み合わせた機能を試す.

ブログの「最終更新日」を確認して「n日」経過していたらエラーにする

「JS ステップ機能」throw new Error() を組み合わせるために,今回は題材として「ブログの最終更新日を確認するシナリオ」を作る.指定した「n日」を経過していたらエラーにするため,言い換えると「Autify を使ってアサーションを実装する」ことになる.

1.「シナリオ」を作る

シナリオ「kakakakakku blog 最終更新日 確認」を作る.基本的な操作は今までと重複するため割愛する.

2. レコーディングをする

今までと同じようにレコーディングをする.しかし今回は特にレコーディングするステップはなく,kakakakakku blog にアクセスした後に「JS ステップ機能」を使う.

  1. 「kakakakakku blog」にアクセスする
    • ✅ 最終更新日を検証する : 「n日」経過しているか?

3. JavaScript を実装する

サンプルとして,以下のような JavaScript を実装する.最終更新日を CSS Selectors から取得し,現在時刻と比較して「1日」経過していたらエラーを返す.このときに JavaScript の throw new Error() ステートメントを使うことにより,Autify 側にエラーを通知できる.昨日の記事で試した return ステートメントもそうだけど,JavaScript の基本的なステートメントと連携する Autify の仕組みはスゴイ!

var updated = new Date(document.querySelector('.entry:first-child time').attributes.datetime.value);
var now = new Date();
if ((now - updated) > (1000 * 60 * 60 * 24)) {
    throw new Error('ブログを1日以上更新していません!');
}

最終的に以下のような画面になる.

f:id:kakku22:20200507102833p:plain

4.「シナリオ」を実行する

ブログを更新した直後と1日経過後にシナリオを実行する.

⭕️ 正常終了する

f:id:kakku22:20200507102853p:plain

❌ エラーになる

f:id:kakku22:20200508095846p:plain

Autify FAQs

まとめ

Autify「JS ステップ機能」throw new Error() を組み合わせて「特定の条件を満たさなかったらテストをエラーにする」というシナリオを試した.returnthrow new Error() など,JavaScript の基本的なステートメントと連携する Autify の仕組みはスゴイ!

Autify 紹介記事

Autify で「JS ステップ」と return を組み合わせて計算結果を入力値に使う

昨日の記事では Autifiy「データ機能」を試した.テストデータのパターンを増やす場合に便利に使える.

kakakakakku.hatenablog.com

さらに E2E テストを検討していくと,「データ機能」のようにパターンを決めるのではなく「シナリオ実行時に動的に入力値を決めたい」という場面もある.例えば「現在時刻(シナリオ実行時刻)に依存したテスト」「乱数を使ったテスト」「リストからランダムに1個選んで使うテスト」など.今回は Autify の「JS ステップ機能」を使って「シナリオ実行時に計算結果を入力値に使う機能」を試す.

「JS ステップ機能」と return を組み合わせる

Autify の「JS ステップ機能」を使うと,任意の要素をクリックするなど「JavaScript コードを自由に実装できる」ことは既に試した.

kakakakakku.hatenablog.com

さらに Autify には「JavaScript で return をした計算結果を次のステップの入力値として使える」という機能がある.個人的には Autify で未サポートな挙動を実現する場合など,シナリオを細かく実装するために幅広く使える機能だと思う.

1.「シナリオ」を作る

シナリオ「kakakakakku blog 検索シナリオ(ランダム)」を作る.基本的な操作は今までと重複するため割愛する.

2. レコーディングをする

今までと同じようにレコーディングをする.今回はシンプルに以下のステップとする.

  1. 「kakakakakku blog」にアクセスする
  2. キーワード「github」で記事を検索する

f:id:kakku22:20200506152543p:plain

3. JavaScript を実装する

検索ステップの前で「JS ステップを挿入」を選ぶ.今回は以下の JavaScript コードを実装する.意味としては「プログラミング言語配列(5種類)からランダムに1個選ぶ」で,ポイントは「2行目で計算結果を return している点」となる.

var languages = ['Python', 'Go', 'Ruby', 'PHP', 'Java'];
return languages[Math.floor(Math.random() * languages.length)];

最終的に以下のような画面になる.

f:id:kakku22:20200506232041p:plain

return を実装したことにより,検索ステップの「入力値」として「他のステップから取得」を選べるようになる.計算結果(プログラミング言語名)を入力値に使えるという意味になる.最終的に以下のようなシナリオになる.

  1. 「kakakakakku blog」にアクセスする
  2. キーワード ${プログラミング言語名} で記事を検索する
    • ${プログラミング言語名}「候補リスト (Python, Go, Ruby, PHP, Java)」からランダムに選択する

f:id:kakku22:20200506153826p:plain

4.「シナリオ」を実行する

シナリオを繰り返し実行すると以下のような結果が得られる.

Java が選ばれた(Autify スクリーンショット)

f:id:kakku22:20200506155346p:plain

Ruby が選ばれた(Autify スクリーンショット)

f:id:kakku22:20200506155400p:plain

PHP が選ばれた(Autify スクリーンショット)

f:id:kakku22:20200506155538p:plain

Autify FAQs

Autify GitHub : autify-javascript-snippets

以下のリポジトリに「JS ステップ機能」に使える JavaScript サンプルが公開されている.例えば generate-random-value.js を読むと「時刻」「乱数」return する実装になっている.見てみると良いかと!

github.com

まとめ

今回は Autify を使って「シナリオ実行時に計算結果を入力値に使う機能」を試した.JavaScript で return をした計算結果を次のステップの入力値として使えるという仕組みは幅広く使えるため,Autify を使うなら覚えておくべき機能だと思う!

Autify 紹介記事

Autify でテストデータのパターンを増やすなら「データ機能」を使う

今までレコーディングをしてきた Autify のシナリオは,ある意味「固定的な」ステップだった.例えば「キーワード GitHub で記事を検索」Envoy カテゴリをクリック」など.実際に E2E テストを検討する場合,テストデータのパターンを増やしたくなる.例えば「会員登録フォーム」は複数のパターンをテストしたいと思う.今回は Autify の「データ機能」を使ってテストデータのパターンを増やす.

「データ機能」を使ったシナリオを作る

1.「シナリオ」を作る

シナリオ「kakakakakku blog 検索シナリオ」を作る.基本的な操作は今までと重複するため割愛する.まず「シナリオ作成画面」「データ」タブを開くとファイルをアップロードできる.今回は以下のような CSV を用意した.1 レコード = 1 パターン となる.

  • keyword : 検索キーワード
  • url : 期待値 (URL)
  • text : 期待値(テキスト)
keyword,url,text
GitHub,https://kakakakakku.hatenablog.com/search?q=GitHub,GitHub の検索結果:
nginx,https://kakakakakku.hatenablog.com/search?q=nginx,nginx の検索結果:
Redash,https://kakakakakku.hatenablog.com/search?q=Redash,Redash の検索結果:

「CSV アップロード (UTF-8)」をクリックしてアップロードすると,以下のような画面になる.忘れずに「保存」ボタンをクリックしておく.

f:id:kakku22:20200504094322p:plain

2. レコーディングをする

データを使う前にシナリオを作る必要がある.今までと同じように1度レコーディングをする.今回は以下のステップとする.

  1. 「kakakakakku blog」にアクセスする
  2. キーワード「GitHub」で記事を検索する
    • ✅ URL を検証する : https://kakakakakku.hatenablog.com/archive/category/GitHub
    • ✅ テキストを検証する : GitHub の検索結果:

f:id:kakku22:20200504205255p:plain

3. 「データ」を使う

レコーディングをしたシナリオを「データ」を使って以下のように修正する.CSV としてアップロードしたデータ3種類 ${keyword}${url}${text} を使うように修正している.

  1. 「kakakakakku blog」にアクセスする
  2. キーワード ${keyword} で記事を検索する
    • ✅ URL を検証する : ${url}
    • ✅ テキストを検証する : ${text}

まず,検索ステップを修正し「入力値」として「データ : keywordを選ぶ.

f:id:kakku22:20200504205720p:plain

同じように検証ステップも修正すると,最終的に以下のような画面になる.${keyword}${url}${text} をうまく使えている.

f:id:kakku22:20200504205943p:plain

4. 「シナリオ」を実行する

「Chrome で今すぐ実行」をクリックして「シナリオ」を実行すると,CSV の通りに「計3パターン」テストが実行される.

f:id:kakku22:20200504210100p:plain

スクリーンショットを見ると Redash の検索結果: など,CSV としてアップロードしたパターンを使って実行できている.

f:id:kakku22:20200504210138p:plain

Autify FAQs

まとめ

Autify でテストデータのパターンを増やすなら「データ機能」を使う.CSV をアップロードできるし,アップロード結果を Autify のシナリオ画面で確認できるのも便利だと思う.Autify 紹介記事も連載4回目になり,より実践的な E2E テストを実装できるようになってきた!

Autify 紹介記事

Autify で記事一覧から「1記事目」を厳密にクリックする

先週 Autify を使って kakakakakku blog の画面遷移をするシナリオをレコーディングしたときに「最新記事(1記事目)」をクリックするステップを作った(はずだった).しかし Autify のシナリオを数日間実行し続けたところ,実は「最新記事(1記事目)」をクリックできていなかったことに気付いた.今回は記事一覧から「最新記事(1記事目)」を厳密にクリックできるようにする.

kakakakakku.hatenablog.com

「要確認」とは?

先週作ったシナリオ「kakakakakku blog 画面遷移 + 検証」を実行したところ,以下のように「要確認」という警告が出た.テスト自体は成功している.この「要確認」というのが Autify の特徴的な機能と言える.Autify では「レコーディング時と完全一致しない場合に AI を使って探索をする」仕組みになっているため,今回は AI を使って探索し,結果をフィードバックするために「要確認」と表示してくれている.

f:id:kakku22:20200504094604p:plain

スクリーンショットを確認すると,2記事目に下がった「diff2html-cli 記事」をクリックしている.ようするに「最新記事(1記事目)」ではなく「完全一致する要素」を探索してクリックしてくれていると考えられる.

f:id:kakku22:20200504094650p:plain

記事一覧から「1記事目」を厳密にクリックする

今回は Autify の「JS ステップ機能」を使って「1記事目」を厳密にクリックできるようにする.

1.「シナリオ」を複製する

まず,シナリオ「kakakakakku blog 画面遷移 + 検証」を複製して「kakakakakku blog 画面遷移(JavaScript 利用)+ 検証」を作る.基本的な操作は今までと重複するため割愛する.

2.「シナリオ」を修正する

「1記事目」をクリックするため「JS ステップを挿入」を選ぶ.

f:id:kakku22:20200504094709p:plain

「JS ステップ」には JavaScript コードを自由に実装できる.今回は kakakakakku blog「1記事目」を意味する CSS Selectors を使ってクリックするように実装する.やはり E2E テストの実現には CSS SelectorsXPath など,機械的に要素を特定する仕組みが必要なんだと再認識させられる.例えば,レコーディング後に「もしかして "1記事目" をクリックしましたか?」という確認が出てくる未来があっても良さそう.

document.querySelector('.entry:first-child .entry-title-link').click();

最終的に JavaScript を入力したシナリオ画面は以下のようになる.

f:id:kakku22:20200504094726p:plain

3.「シナリオ」を実行する

修正したシナリオを実行すると,JavaScript を使って正しく「最新記事(1記事目)」をクリックできるようになった(右側 : 今回の結果).

5/3 に記事を公開した後に実行したシナリオ結果

f:id:kakku22:20200504103648p:plain

5/4 に記事を公開した後に実行したシナリオ結果

f:id:kakku22:20200504103706p:plain

Autify FAQs

まとめ

Autify の「JS ステップ機能」を使って kakakakakku blog の記事一覧から「1記事目」を厳密にクリックできるようにした.さらに Autify の特徴的な機能と言える「要確認」も確認できた.引き続き Autify を試していく!

Autify 紹介記事

Autify を使って「スマホレイアウト」をレコーディングする

先週に続き「E2E テスト自動化プラットフォーム Autify」を試す.今回は「スマホレイアウト」をレコーディングする.Autify の基本的な操作などは以下の記事を読んでもらえればと!

kakakakakku.hatenablog.com

「スマホレイアウト」をレコーディングする

今回も kakakakakku blog を題材とし,スマホを使って画面遷移をするシナリオをレコーディングする.以下のステップを試す.

  1. 「kakakakakku blog」にアクセスする
  2. キーワード「github」で記事を検索する
    • ✅ URL を検証する : https://kakakakakku.hatenablog.com/search?q=github
  3. 「プロフィール」をクリックする
    • ✅ アカウント名を検証する : id:kakku22
  4. 「ブログタイトル」をクリックする

1.「シナリオ」を作る

まず「シナリオ」を作る.現在 Autify に「スマホに特化したレコーディング機能」はなく,前回と同じようにシナリオを作る.シナリオ名は「スマホ : kakakakakku blog 画面遷移 + 検証」とする.ウィンドウサイズは 1280x1024 とする(今回はウィンドウサイズは関係なし).

f:id:kakku22:20200501220707p:plain

レコーディングを開始し,Chrome の「シークレットウィンドウ」を起動したら,まず Chrome DevTools の「Device Mode 機能」を使ってスマホレイアウトに変更する.今回は「iPhone X」とした.あとはステップを進めていく.

f:id:kakku22:20200501220726p:plain

2.「シナリオ」を確認する

レコーディング結果を確認すると,正しくスマホレイアウトになっている.

f:id:kakku22:20200501220741p:plain

3.「テストプラン」を作成する

今回は「Chrome で今すぐ実行」を使わずに「テストプラン」を作成する.今回はテストプラン名を「iPhone 実行」とし,以下の設定をした.

  • 実行環境
    • iPhone 6/7/8 (Emulator)
    • iPhone X (Emulator)
  • シナリオ
    • スマホ : kakakakakku blog 画面遷移 + 検証

f:id:kakku22:20200501220759p:plain

実行環境は,例えば iPhone と iPad なら「計5種類」からエミュレーターを選択できる.エミュレーターではなく実機を希望する場合は Autify の Pro プランなどを検討する.契約次第と言える.

f:id:kakku22:20200501220819p:plain

4.「シナリオ」を実行する

「テストプラン」から「シナリオ」を実行する.「テスト結果」を確認すると,正しく実行されている.

f:id:kakku22:20200501220837p:plain

Autify FAQs

まとめ

E2E テストでは,デバイスのバリエーションを増やすことにより,サービスの品質を高めることができる.Autify では「テストプラン」で実行環境を複数選択することで実現できる.現状だと「スマホに特化したレコーディング機能」がなく,Chrome DevTools の「Device Mode 機能」を使う必要はあるけど,今後に期待かなと!

Autify 紹介記事