BETA

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

投稿日:2020-01-24
最終更新:2020-01-24

はじめに

QA Wolfを使ってみたのですが、とても良かったです。
QA Wolfとは、ブラウザテストを簡単に作れ、CIでも簡単に使えるものです。
実際に使ってみた範囲で使い方を書きます。

本記事のリポジトリは以下です(テスト等を生成した後なので、生成を最初からやりたい場合は.github.qawolfディレクトリを削除してください)。
https://github.com/Catminusminus/qawolf-example

使い方

npm i -D qawolf  

として、プロジェクトに追加しましょう。

次にテストを作成します。まずプロジェクトのサーバーを動かします。今回はnpm startlocalhost:3000でTODOアプリが動くという例を考えます。

npm startした後、別の端末から、

npx qawolf create http://localhost:3000 yourFirstTestName  

とします。yourFirstTestNameは適当なテストの名前にしてください。そうするとブラウザでToDoアプリが開くので、何かしら動かしてみましょう。

終わったら、qawolfを動かしている端末でyを入力し終了します。これで.qawolfの下にテストが生成されました。

さて、これをローカルで動かすにはnpx qawolf testと打てば良いです。すると生成されたコードにより、先程記録したブラウザテストが実行されます。
CIで動かしたいので、今回はGitHub Actionsで動かしてみましょう。

npx qawolf github  

と打つと、GitHub Actionsのyamlが生成されます。あとは以下のコメントアウトされている部分を外します。

-      # - name: Start local server  
+      - name: Start local server  
-      #   run: npm run start & npx wait-on http://localhost:3000  
+        run: npm run start & npx wait-on http://localhost:3000  

これでGitHub Actionsでテストが走り、その証跡がartifactsとしてアップロードされます。

artifactsには、テストを実行した際の画面の動画がgif、mp4、html形式で入っており、またログファイルも入っています。

おわりに

とても簡単にブラウザテストが作成できました。凄い。

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@Catminusminusの技術ブログ Frontend/Machine Learning/C++など、興味のあるものについて、小ネタや調査中のこと、備忘録を書いたりします

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう