Playwright のドキュメントを読む
akihisa1210E2E テスト用のブラウザ操作ツール Playwright のドキュメントを、動作確認しながら読んでいきます。
akihisa1210テスト用のリポジトリはこれ。
akihisa1210動作確認環境
- Playwright: 1.17.1
- Node.js: 16.13.1
- Ubuntu: 22.04
akihisa1210まずは Getting started を一通りやってみます。ドキュメントは 1.17 系のものを参照。
Playwright can either be used as a part of the Playwright Test test runner (this guide), or as a Playwright Library.
PlayWright は PlayWright Test テストランナーとしても使えるし、PlayWright Library としても使えるとのこと。ライブラリのドキュメントは後で出てくるので一旦テストランナーとしての使い方を学ぼう。
PlayWright Test でできることは以下の通り。
Run tests across all browsers.
Execute tests in parallel.
Enjoy context isolation out of the box.
Capture videos, screenshots and other artifacts on failure.
Integrate your POMs as extensible fixtures.
3点目と5点目は現段階ではよくわからない。
akihisa1210Getting Started - Installation
PlayWright のテストランナー、PlayWright Test をインストールする。
npm init
npm i -D @playwright/test
npx playwright install
npx playwright install でブラウザがインストールされる。
デフォルトでは Chromium、FFmpeg（ブラウザではないが、Chromium の依存関係として）、Firefox、WebKit がインストールされる。
デフォルトのインストール対象はここで type が browser になっているもの。
インストールされるブラウザのバージョンはここで定義されている。
インストール処理本体はこのあたり。
特定のブラウザのみをインストールすることもできる。
npx playwright install chromium
Getting Started - First test
tests/example.spec.ts を作成して、npx playwright test でテストを実行できる。
TypeScript 導入のための設定は特に不要。また、テスト用の設定ファイルも不要。
デフォルトではテストはヘッドレスで動く。テスト実行状況を見たい場合は npx playwright test --headed とすればよい。
akihisa1210Getting Started - Configuration file
設定ファイルの例。ここでは projects を設定して、Chromium、Firefox、WebKit の3ブラウザでテストを流している。
（WebKit でのテスト実行はエラーになったが、これは Ubuntu 22.04 で検証しているせい。）
他の設定項目の内容は以下の通り。
-
forbidOnly: !!process.env.CI: CI 環境の場合、いずれかのテストでtest.onlyが指定されていたときにエラーにする。 -
retries: process.env.CI ? 2 : 0: リトライ回数。CI 環境の場合は2回、それ以外の場合はリトライしない。 -
use: { trace: 'on-first-retry', }:useには PlayWright のグローバルな設定を書く。trace: 'on-first-retry'は、テストの初回リトライ時にトレースを保存する。トレースは GUI のビューワーで閲覧できる。
設定ファイルの型が提供されているはありがたい。
akihisa1210Getting Started - Writing assertions
アサーションには Jest の expect ライブラリを PlayWright 特有のマッチャーで拡張したものが使われているとのこと。
例のテストでは、ページのタイトルを検証する toHaveTitle()、要素の属性を検証する toHaveAttribute()、要素が見えていることを検証する toBeVisible() が使われている。
いずれも Jest の expect には存在しないもの。
akihisa1210Getting Started - Using test fixtures
これまでの例でも出てきたテスト用のコールバック関数の引数 { page } は fixtures と呼ばれるものらしい。
test('basic test', async ({ page }) => {
...
フィクスチャはテスト実行ごとに作成されるオブジェクト。デフォルトで用意されているフィクスチャもあるし、自分でフィクスチャを作成して追加することもできる。
デフォルトで用意されているフィクスチャのうち、代表的なものは以下の通り。
-
page: このテストが実行されているページ。 -
context: テストが実行される独立したコンテキスト。pageフィクスチャもこのフィクスチャに属する。 -
browser: リソース最適化のためにブラウザはテスト間で使い回されるとのこと。 -
browserName: テストで実行されているブラウザ名。
akihisa1210Getting Started - Using test hooks
全てのテストの実行前（実行後）に実行される test.beforeAll（test.afterAll）と、個々のテストの実行前（実行後）に実行される test.beforeEach（test.afterEach）。
test.beforeAll（test.afterAll）が単に before（after）となっているテストフレームワークもあるけど、all がついている方が意味が明示的でよいですね。
akihisa1210Getting Started - Command line
よく使われる（CLI の）コマンドの一覧。ここでは気になったものを書きとめておく。
test の後にパス以外の文字列を指定すると、全てのファイルのうちその文字列を含むファイルのみを実行する。
npx playwright test my-spec my-spec-2
テスト名（ファイル名ではなく）を指定してテストを実行できる。
npx playwright test -g "add a todo item"
PlayWright Inspector を使ってテストをステップ実行できる。これは便利。
npx playwright test --debug
Getting Started - Configure NPM scripts
PlayWright はコマンドが実行されたディレクトリにある playwright.config.js または playwright.config.ts を自動的に読み込む。他の場所に置く場合は --config でパスを指定する。