Playwrightを使ってVRTを始める

参照したページ

公式ページ

その他

VRTの概要を予習する

実際に環境構築をする前に「Playwright で一番小さく始める VRT と、次のステップの選択肢 - Speaker Deck」を読んでざっくり概要を予習しました。

「VRT を始める上で考えなければならないこと」のページに書かれていることなど、実践的でとても参考になりました。

環境

macOS Monterey 12.6.2
node: v18.12.1
@playwright/test: 1.42.1
@types/node: 20.11.28

ディレクトリを作成して移動する

まずはディレクトリを作成して移動します。

midir playwright
cd playwright

Playwrightをインストールする

以下のコマンドでインストールします。

yarn create playwright

以下の項目を聞かれるので、それぞれ選択しました。

TypeScript か JavaScript のどちらを使用するか
- TypeScript
テストフォルダの保存場所
- tests
GitHub Actions の workflow の追加をするか
- false
テストに利用するブラウザを一緒にインストールするか
- true

以下の通り表示されました。

yarn create v1.22.21
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Installed "create-playwright@1.17.132" with binaries:
      - create-playwright
[####] 4/4Getting started with writing end-to-end tests with Playwright:
Initializing project in '.'
✔ Do you want to use TypeScript or JavaScript? · TypeScript
✔ Where to put your end-to-end tests? · tests
✔ Add a GitHub Actions workflow? (y/N) · false
✔ Install Playwright browsers (can be done manually via 'yarn playwright install')? (Y/n) · true
Initializing Yarn project (yarn init -y)…
yarn init v1.22.21
warning The yes flag has been set. This will automatically answer yes to all questions, which may have security implications.
success Saved package.json
✨  Done in 0.01s.
Installing Playwright Test (yarn add --dev @playwright/test)…
yarn add v1.22.21
info No lockfile found.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
success Saved 4 new dependencies.
info Direct dependencies
└─ @playwright/test@1.42.1
info All dependencies
├─ @playwright/test@1.42.1
├─ fsevents@2.3.2
├─ playwright-core@1.42.1
└─ playwright@1.42.1
✨  Done in 3.27s.
Installing Types (yarn add --dev @types/node)…
yarn add v1.22.21
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
success Saved 2 new dependencies.
info Direct dependencies
└─ @types/node@20.11.28
info All dependencies
├─ @types/node@20.11.28
└─ undici-types@5.26.5
✨  Done in 1.06s.
Writing playwright.config.ts.
Writing tests/example.spec.ts.
Writing tests-examples/demo-todo-app.spec.ts.
Writing package.json.
Downloading browsers (yarn playwright install)…
yarn run v1.22.21
$ /Users/motomichi/Desktop/path/to/your/app/playwrite/node_modules/.bin/playwright install
Downloading Chromium 123.0.6312.4 (playwright build v1105) from https://playwright.azureedge.net/builds/chromium/1105/chromium-mac-arm64.zip
133.1 MiB [====================] 100% 0.0s
Chromium 123.0.6312.4 (playwright build v1105) downloaded to /Users/motomichi/Library/Caches/ms-playwright/chromium-1105
Downloading FFMPEG playwright build v1009 from https://playwright.azureedge.net/builds/ffmpeg/1009/ffmpeg-mac-arm64.zip
1 MiB [====================] 100% 0.0s
FFMPEG playwright build v1009 downloaded to /Users/motomichi/Library/Caches/ms-playwright/ffmpeg-1009
Downloading Firefox 123.0 (playwright build v1440) from https://playwright.azureedge.net/builds/firefox/1440/firefox-mac-13-arm64.zip
76.7 MiB [====================] 100% 0.0s
Firefox 123.0 (playwright build v1440) downloaded to /Users/motomichi/Library/Caches/ms-playwright/firefox-1440
Downloading Webkit 17.4 (playwright build v1983) from https://playwright.azureedge.net/builds/webkit/1983/webkit-mac-12-arm64.zip
64 MiB [====================] 100% 0.0s
Webkit 17.4 (playwright build v1983) downloaded to /Users/motomichi/Library/Caches/ms-playwright/webkit-1983
✨  Done in 108.25s.
✔ Success! Created a Playwright Test project at /Users/motomichi/Desktop/path/to/your/app/playwrite

Inside that directory, you can run several commands:

  yarn playwright test
    Runs the end-to-end tests.

  yarn playwright test --ui
    Starts the interactive UI mode.

  yarn playwright test --project=chromium
    Runs the tests only on Desktop Chrome.

  yarn playwright test example
    Runs the tests in a specific file.

  yarn playwright test --debug
    Runs the tests in debug mode.

  yarn playwright codegen
    Auto generate tests with Codegen.

We suggest that you begin by typing:

    yarn playwright test

And check out the following files:
  - ./tests/example.spec.ts - Example end-to-end test
  - ./tests-examples/demo-todo-app.spec.ts - Demo Todo App end-to-end tests
  - ./playwright.config.ts - Playwright Test configuration

Visit https://playwright.dev/docs/intro for more information. ✨

Happy hacking! 🎭
✨  Done in 170.12s.

生成されたディレクトリとファイルを確認する

以下のようなディレクトリとファイルが生成されました。

.
├── node_modules
│   ├── @playwright
│   ├── @types
│   ├── fsevents
│   ├── playwright
│   ├── playwright-core
│   └── undici-types
├── package.json
├── playwright.config.ts
├── tests
│   └── example.spec.ts
├── tests-examples
│   └── demo-todo-app.spec.ts
└── yarn.lock

テストを実行してみる

サンプルのテストを実行してみます。

yarn の場合は以下のコマンドで実行できます。

yarn playwright test

npm の場合は以下のコマンドで実行できます。

npx playwright test

以下の通り6件のテストが成功しました。

yarn run v1.22.21
$ /Users/motomichi/Desktop/path/to/your/app/playwrite/node_modules/.bin/playwright test

Running 6 tests using 4 workers
  6 passed (12.0s)

To open last HTML report run:

  yarn playwright show-report

✨  Done in 12.78s.

レポートを確認する

以下のコマンドを実行します。

yarn playwright show-report

ブラウザで http://localhost:9323/ が開いて、以下のようなページが表示されます。

リストのアイテムをクリックすると、詳細が表示されます。

生成されたディレクトリとファイルを再度確認する

以下のように playwright-report ディレクトリと test-results ディレクトリが生成されました。

.
├── node_modules
│   ├── @playwright
│   ├── @types
│   ├── fsevents
│   ├── playwright
│   ├── playwright-core
│   └── undici-types
├── package.json
├── playwright-report
│   └── index.html
├── playwright.config.ts
├── test-results
├── tests
│   └── example.spec.ts
├── tests-examples
│   └── demo-todo-app.spec.ts
└── yarn.lock

playwrite/tests/snapshot.spec.ts の作成とその記述内容

ファイルを作成します。

vim tests/snapshot.spec.ts

Visual comparisons | Playwright の例から、ファイル名を snapshot.png で指定するように変更して、以下の通り記述します。

import { test, expect } from '@playwright/test';

test('example test', async ({ page }) => {
  await page.goto('https://playwright.dev');
  await expect(page).toHaveScreenshot('snapshot.png');
});

実行してみる

以下のコマンドを実行します。

yarn playwright test tests/snapshot.spec.ts

実行結果

公式ページの例にあるように、以下のエラーになりました。

Error: A snapshot doesn't exist at /Users/motomichi/Desktop/path/to/your/app/playwrite/tests/snapshot.spec.ts-snapshots/snapshot-webkit-darwin.png, writing actual.

初回のテストは比較対象となる golden file が無いため失敗します。という趣旨のことが書かれています。

golden file の確認

toHaveScreenshot() の引数に 'snapshot.png' を渡したので、テストが実施されたブラウザ毎に以下の3ファイルが生成されました。これらが次回の実行時に golden file として使用されます。

playwrite/tests/snapshot.spec.ts-snapshots/snapshot-chromium-darwin.png
playwrite/tests/snapshot.spec.ts-snapshots/snapshot-firefox-darwin.png
playwrite/tests/snapshot.spec.ts-snapshots/snapshot-webkit-darwin.png

golden file を更新する

ページを編集したときに、意図した変更であることが確認できたら、 golden file を更新します。

以下のように --update-snapshots フラグを付けて実行すると更新できます。

yarn playwright test tests/snapshot.spec.ts --update-snapshots

その他

公式ページに記載されていたことについて軽く補足しておきます。

toHaveScreenshot() メソッドには配列を渡すことができる。
toHaveScreenshot() メソッドには、 pixelmatch の様々なオプションを渡すことができる。
toHaveScreenshot() メソッドは画像だけでなく、テキストまたは任意のバイナリデータの比較にも使用できる。

公式ページを参照することをおすすめします。 Visual comparisons | Playwright

Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。