QA Wolf
ブラウザテストを作成 、実行できるツールです。
ブラウザ操作からリアルタイムで Jest のテストコードを作成してくれるのが特徴で、ブラウザの自動操作には Playwright が使われています。
この記事では QA Wolf の導入方法と、どんなことができるのかを簡単に紹介しています。
DEMO
インストール
npm insatll qawolf --save-dev
QA Wolf が使えるかどうか確認する
qawolf
をインストールしたプロジェクト配下で次のコマンドを実行して、 QA Wolf が利用可能になったかどうかを確認します。
npx qawolf howl . / V\ / ' / << | / | / | / | / \ \ / ( ) | | ________| _/_ | | <__________\______)\__)
上記のように、狼が吠えているアスキーアートが表示されれば qawolf
コマンドが使える状態です。
テストを作成する
npm qawolf create
でテストを作成します。
引数で対象の URL, 作成するテスト名を渡します。
npx qawolf create [https://](https://myawesomesite.com/)hoge.com myTestName
ブラウザが立ち上がります。
そこで行った操作内容を元に、上記で指定したテスト名のファイル( .qawolf/tests/myTestName.js
)にテストが書き込まれていきます。
ターミナルには下記のようなログが表示されています。
❯ 💾 Save and exit 🖥️ Open REPL to run code 🗑️ Discard and exit
- テストを保存し終了する際は
Save and exit
- REPL を開いて、ブラウザ操作のコードを対話的に実行したい場合は
Open REPL to run code
Discard and exit
は今のテストを保存せずに終了します
セレクタは別ファイルで管理される
作成されたテストの一つを見てみます。
can click div
とテストの説明も自動で出力してくれているのが嬉しいですね。
it("can click div", async () => { await browser.click(selectors[10]); });
browser.click()
の第一引数で渡しているセレクタは selectors
という変数から取得しています。
selectors
は .qawolf/selectors
フォルダ内にテスト名ごとに定義されている json ファイルから読み込んだものです。
中身はこんな形です。
[ { "html": { "ancestors": [ "<div class=\"hoge\"></div>", "<div class=\"fuga\"></div>" ], "node": "<input class=\"search\" name=\"q\" type=\"search\"/>" }, "index": 0 }, ]
セレクタが外にまとまっていることにより DOM 改修があったときには、こちらの selector ファイルだけ改修することになり、テストコード自体には手を加えずに済むのが良さそうに思えました。
すべてのテストを実行する
npx qawolf test
Chromium が立ち上がって .qawolf/tests
内 すべてのテストが実行されます
テストを指定して実行する
npx qawolf test myTestName
test コマンドのあとにテスト名を指定することで、作成したテストを単独で実行することもできます。
クロスブラウザテスト
QA Wolf はデフォルトでは Chromium でテストを実行するようになっていますが、テスト実行時にフラグを渡してあげることで、Firefox, Webkit でもテストを実行することが可能です。
例: Firefox ですべてのテストを実行する
npx qawolf test --firefox
例: Webkit で 特定のテストを実行する
npx qawolf test myFirstTest --webkit
例: すべてのブラウザですべてのテストを実行する
npx qawolf test --all-browsers
テストを順番に実行する
QA Wolf はテストを可能な限り並列に実行しようとします。
直列で順番に実行させる場合は --runInBand
フラグを適用します。
npx qawolf test --runInBand
CI で実行する
QA Wolf は CircleCI や Github, Gitlab, Jenkins といった CI サービス向けの Workflow ファイルを 1つのコマンドで作成することができます。
Github の場合
npx qawolf github
コマンドを実行すると .github/workflows/qawolf.yml
というファイルが作成されました。
Github にリポジトリを作成し、テストを作成し push すると .github/workflows/qawolf.yml
の内容を元に Github Actions で job が実行されます。
job の実行が完了すると、 Artifacts Workflow が zip ファイルを出力してくれています。
ダウンロードしてみましょう。
解凍したファイルの中にはテスト実行時のログやスクリーンキャストの動画が入っています。
TypeScript の利用
QA Wolf が自動で出力するテストは JavaScript で書かれていますが、QA Wolf は TypeScript を built in しているため、簡単な修正で TypeScript が利用できるようになっています。
1.拡張子の変更
.js
を .ts
に変更します。
require()
をimport
に変更
//const { launch } = require("qawolf"); import { launch } from "qawolf"
- 型の追加インストール
ブラウザテストを行う場合は Node.js
, Playwright
, Jest
の型をインストールします。
npm install --save-dev @types/node @types/playwright @types/jest
ブラウザ操作しか行わない場合は @types/jest
以外の 2つをインストールすればよいでしょう。
npm install --save-dev @types/node @types/playwright
これで TypeScript で書いたテストコードも実行できるようになります。
これまでもブラウザ操作からコードを生成するものは他にもありましたが、そのコードを元にテストコードへの変換が手間となっていたのでそのまま使えるテストコードが吐き出されるのはかなり嬉しいです。
今回 CI を使った検証を行う上で Github Actions もはじめて使ったのですが、QA Wolf が Workflow ファイルを作成してくれるので使う側はそのファイルを push するだけでよく、楽でした。
導入が簡単なので、短期の案件などでも使いやすいな思いました。