はじめに

こんにちは。ACS 事業部の奥山です。

Autify連載Day2はざっくりとAutifyについて紹介します。

Autify とは、Web アプリケーションのE2Eテストを行うためのツールです。 E2E テストツールの代表的な例としては、Selenium や Cypress、TestCafe、Nightwatch.js などがあり、E2E テストを自動化する場合はなにかしらのツールを利用することが多いと思います。

Autify の主な特徴

ノーコードでテストを作れる
画像認識 AI で自動で要修正箇所を抽出
クロスブラウザテスト、多端末テスト

無料トライアルで初めてみる

現在、14 日間の無料トライアルを実施していますのでこちらを利用してみました。

準備が簡単

ユーザー登録が完了したらすぐに次にシナリオを作成していきます。シナリオの作成には Chrome 拡張機能を利用します。詳細な手順は、こちらの Autify University に纏められています。ドキュメンテーションがしっかりとされているので、初めてでもあまり迷うことなく実施できます。

シナリオの作成が簡単

セットアップが完了したら、早速シナリオを作成していきます。「新規シナリオ」の作成画面にテスト対象の URL(開始 URL)を入力して「レコーディングを開始」すると別 Window でテスト対象の Web 画面が開きます。

あとは、Web 画面で操作を行うだけでシナリオが作成できます。

テスト結果の確認（動画とスクリーンショット）

テストを実行して結果を確認してみると。

前回と今回でテスト結果(スクリーンショットの画像)を比較して、ピンク色のマーカーで差分を強調してくれます。予期しない変更などに気づきやすいですね。 ※スクリーンショットの一括ダウンロードはオプションで利用可能です。

結果は動画でも確認できます。

Slack への通知

テストプランに「Slack 通知」設定がありこちらで簡単に設定できます。

設定した Slack チャンネルに通知が届きます。

CI/CD に組み込む

CI/CD に Github Action を利用している場合は簡単に Autify を組み込むことができます。 Github Action の workflow ファイルに以下のように記述します。

  # シンプルにautifyのテストを実行する場合は以下のように記述
  # github actionの実行時間に注意！
  autify-integration-test:
    runs-on: ubuntu-latest
    needs: deploy
    steps:
      - uses: autifyhq/actions-web-test-run@v2
        with:
          access-token: ${{ secrets.AUTIFY_WEB_ACCESS_TOKEN }}
          # autifyのテストプラン画面にアクセスしてブラウザのURLから取得する
          autify-test-url: ${{ vars.AUTIFY_TEST_PLAN_URL }}

イメージとしては以下のような感じです。Github Actions で Autify のテストを実行して Slack へ通知するというものです。開発・検証環境への連携が簡単にできるので、とても便利ですね。

※Github Actions のデプロイ後にテストを開始していますが、デプロイ後に Web アプリが利用可能になるまでに時間がかかる場合は、テストが失敗する可能性があります。

いろいろなデバイスでのテスト

Chrome(Linux)/Edge(Windows)の他に iPhone/Android が利用可能です。 Emulator だけでなく実機も多数用意されています。
※実機テストの実行には少し時間がかかるので注意が必要
※実機テストは無料トライアルでは利用できません。

(iOS)

(Android OS)

Chat でのサポート

ポータル画面の右下のチャットボタンからサポートを受けることができます。

簡単な内容でも丁寧に対応していただけるので、とても助かります。

今回の検証中も「入力値を動的に変更したいのですがどうすれば良いですか？」という質問に対して、JavaScript を利用して対応する方法を教えていただきました。応答も早く、とても安心ですね。

API 連携 (Autify Command Line Interface (CLI))

CLI も用意されていおり、いろいろな利用ができそうですね。いくつか試してみました。これらを組み合わせることで、テスト実行やテスト結果の収集・通知の自動化が可能です。

# version確認
$ autify --version
@autifyhq/autify-cli/0.37.0 wsl-x64 node-v18.17.0

結果の取得を少し試してみました。細かくは見れていませんが、結果の一覧や詳細を取得することができています。

# 結果の一覧
$ autify web api list-results --project-id $AUTIFY_PROJECT
[
  {
    "id": 2507285,
    "status": "failed",
    "duration": 5024160,
    "started_at": "2023-09-18T01:01:08.902Z",
    "finished_at": "2023-09-18T02:24:53.063Z",
    "created_at": "2023-09-18T01:01:06.271Z",
    "updated_at": "2023-09-18T02:25:02.226Z",
    "review_needed": true,
    "test_plan": {
      "id": 523299,
      "name": "1st-test-plan",
      "created_at": "2023-08-29T04:39:30.543Z",
      "updated_at": "2023-08-29T04:39:30.543Z"
    }
  },
  {
    "id": 2499162,
    "status": "failed",
    "duration": 5095618,
    "started_at": "2023-09-15T01:01:10.765Z",
    "finished_at": "2023-09-15T02:26:06.384Z",
    "created_at": "2023-09-15T01:01:08.651Z",
    "updated_at": "2023-09-15T02:26:15.206Z",
    "review_needed": true,
    "test_plan": {
      "id": 523299,
      "name": "1st-test-plan",
      "created_at": "2023-08-29T04:39:30.543Z",
      "updated_at": "2023-08-29T04:39:30.543Z"
    }
  },
  :

# 結果の詳細
$ autify web api describe-result --project-id $AUTIFY_PROJECT --result-id $AUTIFY_RESULT
{
  "id": 2507285,
  "status": "failed",
  "duration": 5024160,
  "started_at": "2023-09-18T01:01:08.902Z",
  "finished_at": "2023-09-18T02:24:53.063Z",
  "created_at": "2023-09-18T01:01:06.271Z",
  "updated_at": "2023-09-18T02:25:02.226Z",
  "review_needed": true,
  "test_plan_capability_results": [
    {
      "id": 2950107,
      "capability": {
        "id": 864356,
        "os": "Linux",
        "os_version": "",
        "browser": "Chrome",
        "browser_version": "116.0",
        "device": "",
        "created_at": "2023-09-11T04:16:54.111Z",
        "updated_at": "2023-09-11T04:16:54.111Z"
      },
      "test_case_results": [
        {
          "id": 9179362,
          "test_case_id": 223672,
          "status": "failed",
          "duration": 234322,
          "started_at": "2023-09-18T01:06:20.513Z",
          "finished_at": "2023-09-18T01:10:14.835Z",
          "created_at": "2023-09-18T01:01:08.054Z",
          "project_url": "https://app.autify.com/projects/8836/results/2507285/capabilities/2950107/scenarios/9179362",
          "updated_at": "2023-09-18T01:10:21.416Z",
          "number_of_credits_consumed": 0,
          "review_needed": 0,
          "import_variables": [],
          "export_variables": []
        },
  :

まとめ

簡単ですが、ざっくりとAutify の紹介をさせて頂きました。自分で Selenium などをインストール・セットアップしてテスト環境を作成するのは大変ですが、Autify なら簡単に自動テストを開始することができます。利用していくにはツールの学習は必要ですが、ドキュメントもわかりやすく、Chat でのサポートも充実しています。E2E テストを自動化したいと考えている方は是非試してみる価値ありだと思います。