QA Wolfとは
QA Wolf は、ブラウザから操作したようなエンドtoエンドのテストを、コーディングやサーバの準備をせずに作成・実行できるサービスです。
https://www.qawolf.com/ から利用できます。
実行画面はこんな感じです。Bubbleで作ったサービスを想定して、トップページを表示・ログイン・ログアウトできるかをテストしました。
![画像1](https://assets.st-note.com/production/uploads/images/55165881/picture_pc_04d829d790c2037c5753291415c851a1.gif?width=800)
Bubbleのサイトをテストする場合の下準備
Bubbleで作ったサイトをテストする場合、それぞれの入力欄にIDを付ける必要があります。
Settingsタブの「General」にある「Expose the option to add an ID attribute to HTML elements」にチェックを入れます。
その後で、各inputエレメントにIDを付与します。
![画像2](https://assets.st-note.com/production/uploads/images/55166246/picture_pc_0a2bab4141d46b06305ae97ffa03a1a6.png?width=800)
QA Wolfにログインしてテストを作成
https://www.qawolf.com/ からQA Wolfにサインアップします。メールアドレスかGitHubアカウントが利用できます。
![画像3](https://assets.st-note.com/production/uploads/images/55166336/picture_pc_9f74e3bcab08a15bf5e38c35d5b53ce0.png?width=800)
ログイン後は右上の「+ Create test」をクリックして、テストを作成します。
![画像5](https://assets.st-note.com/production/uploads/images/55167340/picture_pc_efba4da071b41ac17823cd41c2105b4e.png?width=800)
最初に、テストしたいサイトのURLを入力します。
![画像4](https://assets.st-note.com/production/uploads/images/55166667/picture_pc_5b6e2c117bb931552e78a9fee99a52ad.png?width=800)
画面が切り替わり、QA Wolfの動作画面になります。
左にテストコード、右にブラウザが表示されます。
![画像6](https://assets.st-note.com/production/uploads/images/55167589/picture_pc_b8937f540911073868ce0260dbc9d549.jpg?width=800)
あとは、右側のブラウザでクリックや文字入力をすると、自動的に左側にテストコードが作成されます。
左側に自分でコードを書くこともできます。
![画像7](https://assets.st-note.com/production/uploads/images/55167836/picture_pc_fe1c3dcab819bbf53a7108aa7310152c.jpg?width=800)
表示される文字列が想定通りか確認する
入力の自動化だけでなく、表示内容の確認も重要なテスト項目の一つです。
これもコーディングをせずに確認できます。
右上にある、四角に矢印のボタンをクリックします。
画面上の要素を選べるようになるので、確認したい文字列が表示されている要素を選択します。
![画像8](https://assets.st-note.com/production/uploads/images/55168672/picture_pc_a2915f253cfad50f3d59717f14c5bd9a.jpg?width=800)
あとは、左側の一覧から「Assert element text」を選択して、「Add snippet」をクリックすると、自動的にテストコードが追加されます。
今回は、ログイン中にヘッダに表示している「hello, {ログインしているメールアドレス}」が表示されている事を確認しました。
テストの実行
テストコードが作成できたら、テストを実行します。
左側にある「Run test」をクリックするだけです。
![画像9](https://assets.st-note.com/production/uploads/images/55169160/picture_pc_b638c60337f26b86cb0e813855ef7844.jpg?width=800)
成功すると、左側の各行に緑色のチェックマークがつきます。
画面の自動待ち合わせ
画面遷移を待つためのsleepは通常は必要ありません。QA Wolfは内部でPlaywright というフレームワークを使っており、必要な要素が表示されるまで自動的に待ちます。PlaywrightのAuto-waiting の説明ページに詳細があります。
https://playwright.dev/docs/core-concepts/#auto-waiting
それでもウェイトを入れる場合
await page.waitForTimeout(1000);
セレクトボックスで選択肢を位置やラベルで指定する
await page.selectOption("select", [{'index': 3}]);
await page.selectOption("select", {'label': 'client1 さん'});
まとめ
QA Wolf を使うとブラウザ操作で簡単なE2Eテストが作成・実行できます。サーバを用意する必要はありません。
日時/毎時や、GitHubや Herokuへのデプロイをトリガとした実行も可能です。
テストに失敗した場合にSlackやメールで通知する機能も備えています。
Node.jsが分かる人であればある程度複雑なテストも書けるので、手早くテストしたい場合に便利です。