Testim を使ってWEBサイトのE2Eテストを行う


# Testim とは？

https://www.testim.io/

> Accelerate test authoring, reduce test maintenance, and release higher-quality apps faster.

（引用： https://www.testim.io/ ）

AI を使ったテストツールで、公式にもある通りテスト周りをサポートしてくれます。

特徴としては、**ノーコード**でテストの作成から実行、運用まで行える点です。ちなみにモバイルアプリのテストもできますが、今回はそこには触れません。

それなりに昔からあるようですが、日本語の記事が多いわけではないため、日本での知名度は他のツールに比べると低いかもしれません。（そもそもドキュメントも日本語に対応していない）

なので、日本語でのメモ的なものが欲しいと思い、こちらに残しておきます。


# Testim を動かしてみる

アカウントの作成などは各自で行なってください。Chrome で Extension の設定がありますがそこまで難しくはないです。

最初は２週間のフリートライアルとして使えますが、それが過ぎても機能が制限するだけで使用することは可能です。チームで使うとなると契約が必要になるので、小さいスコープで試したい場合にはおすすめです。

**※ちなみにフリーアドレスでは登録できないので注意※**

## - テストの作成

テストは `Testim` の Extension が入った Chrome を動かすことで作成可能です。`Testim` 側が動作を自動でステップとして認識して、テストのフローにしてくれます。（すばらしい！）

`Testim` の管理画面からレコードボタンを押して URL を入力すると、WEB ページ上でテストステップの作成を開始します。

![001](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/f2d97087-a7b1-0c61-f0a6-dfea88653ba1.png)

![002](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/bae9cbd1-6262-e2a5-edcc-95414edcd347.png)


今回は 「Qiita を使ってログインする」までのステップを作ってみます。

「Create Test」 を押すと、入力した URL の画面に飛んで、実際にテストしたい動作を　WEB ページで操作していきます。

![003](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/1a46ac68-d891-15d9-00b7-a08e85c695ac.png)

途中で一時停止する場合は、右下のアイコンをクリックして止めることができます。また、終了する場合は、上にある「キャンセル」を押せば強制的に終了できます。（タブごと閉じても同じ）

例えば、`ログイン -> ID・Password入力 -> ログイン` の動作を行った場合、自動で以下のようなテストのステップが作成されます。

![０0４](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/fc27014c-24c4-ca61-17f0-9e2a37d48b36.png)

動作名、参考画像などは自動で作成されますが、後で自分で編集可能です。また、途中で一部の動作を差し込んだりできます。

これでテストは完成です。とても簡単です！

## - テストの実行

作ったステップのフローは、上にある再生アイコンボタンでローカルに実行できます。

![011](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/56b99e3d-7117-5abc-e1f3-48ac42f7ee1e.png)

また、実行時に

- シークレットモードで行う
- 画面サイズを変更する

といった、いくつかのオプションが用意されています。

実行すると自動で別のブラウザが立ち上がり、テストを開始します。

![012](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/4595201d-3a0f-014f-71b2-61dc051f010a.png)

テスト作成時と同様に、上にあるボタンからキャンセルして、強制的にテストを終わらせることもできます。

### テスト成功時

このようなアラートが出れば成功です。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/151dc1ef-ded7-1604-77ae-3f62d4d2c1d1.png)


### テスト失敗時

以下は、強制的にテストを終わらせた場合の画面です。

失敗したステップに、なぜ失敗したのか原因が出ます。

![013-2](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/91201650-b4e2-e320-89c8-4b4061728391.png)

エラーの詳細を見ることもできます。

![013-3](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/1a0480bd-e3be-ab48-a5d5-3bcdb023299d.png)

どの画面なのか、事前に登録されたステップの画面をみて確認できます。
※失敗した時のスクショではないので注意

また、失敗したテストをタグ付けして分類できます。

![013-4](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/52a46dd9-dfd2-dc17-ec84-79458cded362.png)

詳しい方法はこちらをみてください。

https://help.testim.io/docs/tag-remote-runs-failures

# Testim の便利な機能

機能はかなり豊富に用意されているので、いくつかピックアップしたいと思います。

## - 仮想環境でのテスト実行

ローカルで実行すると、動かしている間はパソコンの操作ができないので不便です。そこで便利なので **Testim が用意した仮想環境で実行できる機能**です。

実行時のオプションにある、`Run on a grid` を選択することで実行できます。また、実行時にいくつかのオプションを設定できます。

![021](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/db435707-fa3d-2288-6f55-fad6920d6f36.png)

テストを実行すると、実行中の画面が表示され、現在実行されているステップがわかるようになります。

![022](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/feb13292-e32d-8fe9-fa27-b9b2324e742a.png)

しばらく放置して待っていると、結果が返ってきます。


### テスト成功時

ローカル実行と同じく成功のアラートが出てきます。

![023](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/71b8283c-7684-3144-8a06-61ba0dcab8a8.png)

### テスト失敗時

失敗している場合、失敗した部分が赤く表示されます。

![024](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/7de44362-df66-6352-9c7c-5c767e45d9bb.png)

また、期待値に対して失敗した部分のスクリーンショットを確認することができます。

![025](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/db353351-27b1-5c03-ec4f-3c9362fc8241.png)

`Edit`から、その場で失敗した部分のテストのステップを編集することもできます。


## - テストの処理を分岐する

テスト実行時に
**「たまにしか出ないアラートのせいでテストが止まってしまう」**
みたいな場合があると思います。

こういったケースの対応するために、

- 特定のボタンが存在する時だけ押す
- ボタンがなければテストを進める

といった設定が可能です。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/4ec73161-5a65-f31c-390d-1e712b1394a4.png)

具体的な例を見てみましょう。

### 要素の存在確認

https://help.testim.io/docs/conditions#section-configuring-a-custom-condition

今回は「ログインボタンが存在すれば処理を実行する」を例にします。

「When to run step」 オプションは「Always run」がデフォルトで選択されています。これを条件によって実行しないと設定することで、処理を分けることができます。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/1dfd8ee4-959a-6523-2d46-1985e1adc315.png)

要素が存在するかで処理を分岐するために「Element visibility」を選択して、実際に WEB の画面上にある HTML の要素を選択するだけです。

ただし、実際にその要素がある画面を開いていないと選択できないため、次のような警告が表示されます。（テスト実行途中でその画面を開いていれば出ない）

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/4d0557aa-8ba4-475d-d19d-871f07b71309.png)

以下の２つで

- Open base URL
- Run test to relevant step

「Open base URL」は最初に設定したURLを開いて自分でそのページまで進む必要があります。

「Run test to relevant step」を選ぶと `Testim` がそのページまでテストを動かして自動でページまで移動します。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/e53fc4b5-fb92-85e8-23ce-b325b6dd4d46.png)

手動でも使える **ブレイクポイント** （テストを途中まで進めて止める）機能を使って、`Testim` が自動でそこまで進めてくれます。

そこまできたら再度「Element visibility」を選択して、条件としたい HTML の要素を選択します。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/1605ed6d-e949-9648-a41a-91ae430756b4.png)

要素を選択すると要素の 「Visble」 or 「Not visible」 （表示・非表示）のいずれかで処理を実行するのかを決められます。これを選択して完了です。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/5a5021c2-fd32-832f-7111-e19cccd3268d.png)

最後に、自動で作られてしまったブレイクポイントだけ削除しておきましょう。
（でないと次のテストもここで止まってしまうため）

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/4e863436-888f-23ba-4f0e-b1b6d5ad2a3c.png)

ちなみに Javascript を使って具体的にエレメントから判定することもできます。
（すいませんが、こちらは動作確認しておりませんmm）

## - Javascript を差し込む

`Testim` の裏側は Javascript で動いています。なので、必然的に Javascript でカスタマイズできます。実行するステップと同時に入れることもできますが、Javascript のアクション単体としても実行できます。

ステップの間にあるボタンから追加していきます。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/5633183c-cab2-cdb5-3168-69e341ce01e1.png)

試しにコンソールでログを出すだけの簡単な処理をいれました。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/db033118-5668-615b-be46-677fbac675e2.png)

実際にテストを実行すると Javascript が機能しており、ログが出ていることがわかります。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/3c89f382-f653-7501-4fde-ad1ef39c98be.png)

ただし、クラウド上で実行すると、ここにはログが出ないので注意してください。

各ステップの結果画面にあるコンソール画面から確認できます。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/533709c8-ae89-3f2a-fc28-89c3f995b37e.png)

## - テスト前後で処理を差し込む

先ほどはステップとして、`Javascript` を１つ差し込みましたが、設定画面から機械的に設定できます。

具体的には

- 各テストの実行前後
- 書くステップの実行前後

に処理を入れることができます。

これは、データベースの処理をリセットしたい、などテストでリセットしたい処理などを入れるのにとても有効です。

やり方としては、先ほどと同様にステップ間ボタンからアクションを作ります。このときに **「Shared step」** にチェックを入れてください。チェックを入れることで、全体で使えるようなります。


![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/7d88becf-fbff-76dc-729a-78bc944240c2.png)

また、すでに作成済みのアクションがある場合は、設定画面から編集してチェックを入れて、シェアすることもできます。

次のプロジェクトの設定画面から、コンフィグを編集します。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/f93875e8-0aca-9deb-6f6e-a4893097b308.png)

コンフィグでは色々と設定できますが、下部にある「BEFORE/AFTER HOOKS」で処理を入れたい部分にチェックを入れて、実行したいアクションを選択します。（シェアのチェックをオンにしているものだけが選択できる。）

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/13ac011e-29a9-3252-4752-9dbf57a39ceb.png)

今回は「Javascript を差し込む」で作成したアクションを設定してみました。


テスト実行すると、毎回ログの処理が呼ばれていることが確認できます。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/0a68c2e3-5387-1837-992e-03952cd3a8ef.png)

簡単に設定ができとても便利です！

上記の実行に関して、オプションとして 「常に呼ぶ/成功時だけ/失敗時」 といった設定も可能です。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/baf5f28b-44ba-541c-1294-63e9d4096cb9.png)


# Testim の注意点

## - スケジュール実行に関して

無料アカウントでは、スケジュールを試すことはできないようです。（2024/6 現在）

定期的に実行して、結果をメールやWebhookできるので試したいなと思ったのですが...残念。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/331ba1b4-8fb4-a8fe-42ff-61224850be49.png)


## - CLI の実行に関して

設定の CLI タブから Testim に必要なツールをインストールします。

リモートの場合は自分が連携したい場所（Azure, Circle CI, GitHub Actions etc.）を選択します。またローカルからも実行可能です。

選択したオプションによって、必要なコマンドを提供してくれるので（右に表示される）、それを実行するだけです。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/12c426d2-485c-8b84-c30a-d7b26ba4dcb0.png)

インストールはできたのですが、こちらも同じく実行しても立ち上がらなかったので、無料アカウントでは使えないのかもしれません。（2024/6 現在）

## - テストのエクスポートに関して

いくつかの情報からできると思ったのですが、**現在はできなくなっている**ようです。

（ドキュメントは残っているが使えない）

https://help.testim.io/docs/first-time-use-downloading-the-testim-extension

https://www.testim.io/blog/introducing-the-testim-playground/

> Testim Playground was discontinued on June 26, 2023. We are preserving this post for your reference.

と公式にも書かれており、機能としては廃止されています。

# 終わりに

機能のアップデートが頻繁に行われているので、ここに書かれていても使えなかった場合はすみませんmm

また、プランによってできることも違うので、試しにフリープランで使ってみることをオススメしますっ


# 参考

## 日本語の記事

https://developers.gmo.jp/37138/

https://qiita.com/tomohiro_odan/items/b7fbea75d6172c28292b

https://note.shiftinc.jp/n/n7fa9bcf547d8

https://dev.classmethod.jp/articles/akiba-saas-online-20220309-mokichi-testim/