はじめに
現在、 Playwright を使用したテスト自動化環境の構築対応をしております。
対応を通して得た知見が溜まってきたので、今回記事にまとめていきたいと思います。
4つの記事に分けてまとめていく予定です。
- 環境構築編 ← 今回の記事
- テスト実装編
- VisualRegressionTest 導入編
- Docker 環境構築編
VisualRegressionTest の導入や Docker 環境の構築ではハマることが多かったので、
どのような問題に直面し、どう解決したかを紹介できればと思っております。
Playwright とは
Playwright とは、Microsoft が中心となって開発をしている OSS のブラウザテスト自動化フレームワークです。
Chromium ( Chrome / Edge )、Firefox、 Webkit ( Safari ) が 1 つの API で実行できるため、クロスブラウザでのテストが容易に行えます。
GoogleChrome for Android や Mobile Safari の デバイスエミュレーションを使用して SP 版のテストを行うことも可能です。
バージョン
本記事では以下バージョンでの動作を記載しております。
- Node.js : v18.15.0
- npm : v9.5.0
- Playwright : 1.32
端末はM1 Macを使用しております。
インストール
前提条件： Node.js と npm を事前にインストールしておいてください。
npm, yarn, pnpm を使用して Playwright をインストールすることができます。
本記事では npm を使用してインストールを行なっていきます。
$ npm init playwright@latest
インストールコマンドを実行すると以下の選択肢が表示されます。
こちらは使用される環境に併せて選択すれば OK です。
本記事では以下のように設定しております。
# TypeScript か JavaScript のどちらかを選択する
✔ Do you want to use TypeScript or JavaScript? · TypeScript
# e2e テストファイルが格納されるフォルダの名前
✔ Where to put your end-to-end tests? · tests
# GitHub Actions のワークフローを追加するか
✔ Add a GitHub Actions workflow? (y/N) · false
# Playwright で使用するブラウザをインストールするか
✔ Install Playwright browsers (can be done manually via 'npx playwright install')? (Y/n) · true
Happy hacking! 🎭 がターミナルに出力されたらインストール完了となります。
インストールが完了すると以下のようなディレクトリ構成になります。
│── node_modules
│── tests
│ └── example.spec.ts # 基本的なサンプルテスト
│── tests-examples
│ └── demo-todo-app.spec.ts # ToDoアプリをテストするための詳細なサンプルテスト
│── .gitignore
│── package-lock.json
│── package.json
└── playwright.config.ts # 実行するブラウザの変更など Playwright の設定を追加するファイル
サンプルテストの実行
tests ディレクトリ配下にあるサンプルテスト example.spec.ts を実行してみましょう。
以下のコマンドでテストを実行することができます。
$ npx playwright test
デフォルトでは、Chromium, Firefox, Webkit のブラウザすべてでテストが実行されます。
この設定は playwright.config.ts で変更することができます。
また、実行時のオプションでブラウザを指定することも可能です。
# chromium ブラウザのみでテストが実行されます。
$ npx playwright test --project=chromium
テストはヘッドレスモードで実行されるためブラウザは開きません。
実行時のオプション追加でブラウザが開かれた状態でテストを実行することができます。
$ npx playwright test --headed
テストレポート
テストの実行が完了すると HTML レポートが作成されます。
playwright-report / index.html
以下のコマンドを実行することで HTML レポートを確認することができます。
$ npx playwright show-report
デフォルトのレポーター設定が html になっているため、 HTML レポートが出力されます。
この設定は playwright.config.ts で変更することができます。
また、実行時のオプションでレポーターを指定することも可能です。
# ターミナルに結果が出力される
$ npx playwright test --reporter=list
次回予告： 2. テスト実装編
Playwright の環境構築ができたので、次回はテストの実装について記載していきたいと思います。
様々な Locators や Assertions を使用したサンプルテストを実装しようと考えております。