QA Wolf を使ってブラウザテストしてみる

QA Wolf

ブラウザテストを作成 、実行できるツールです。

https://www.qawolf.com/

ブラウザ操作からリアルタイムで Jest のテストコードを作成してくれるのが特徴で、ブラウザの自動操作には Playwright が使われています。

github.com


この記事では QA Wolf の導入方法と、どんなことができるのかを簡単に紹介しています。

DEMO

https://i.gyazo.com/0504485be913acefea69ac72a307db1c.gif

インストール

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 が実行されます。

https://i.gyazo.com/bd50a1e7ed36f74eb8c5c08c78985907.png

job の実行が完了すると、 Artifacts Workflow が zip ファイルを出力してくれています。

https://i.gyazo.com/34b6238afac34276a09402ce35956333.png

ダウンロードしてみましょう。

解凍したファイルの中にはテスト実行時のログやスクリーンキャストの動画が入っています。

https://i.gyazo.com/1cf0b3bb063f381e92689f6c4c18b84e.png

TypeScript の利用

QA Wolf が自動で出力するテストは JavaScript で書かれていますが、QA Wolf は TypeScript を built in しているため、簡単な修正で TypeScript が利用できるようになっています。

1.拡張子の変更

.js.ts に変更します。

  1. require()import に変更
//const { launch } = require("qawolf");
import { launch } from "qawolf"
  1. 型の追加インストール

ブラウザテストを行う場合は 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 するだけでよく、楽でした。

導入が簡単なので、短期の案件などでも使いやすいな思いました。