# Playwright
###### tags: `技術情報`

https://github.com/WordPress/gutenberg/tree/trunk/packages/e2e-test-utils-playwright

https://playwright.dev/docs/intro

参考
https://www.cresco.co.jp/blog/entry/20355/
https://blog1.mammb.com/entry/2022/11/10/090000
■コマンド集
https://qiita.com/oh_rusty_nail/items/d955e3273994214a0afa

## インストール

テストを導入したい任意のリポジトリにインストールします。

npmでインストールする場合

npm init playwright@latest

上記コマンドを叩くと以下を聞かれるので、好みに応じて選択。

今回は以下の設定にしました。

? Do you want to use TypeScript or JavaScript? … 
  TypeScript
❯ JavaScript(enter)
✔ Do you want to use TypeScript or JavaScript? · JavaScript
? Where to put your end-to-end tests? › tests/e2e(enter)
? Add a GitHub Actions workflow? (y/N) › y
? Install Playwright browsers (can be done manually via 'npx playwright install')? (Y/n) › y

これでインストールは完了です。
上記で tests/e2e ディレクトリにテスト用のファイルを置く事を指定しています。

## 設定ファイル追加

インストールした階層に playwright.config.js が出来ている。
テストディレクトリを変更したい場合などはここで指定する。

### テストディレクトリを tests/e2e に指定し忘れた場合

1. リポジトリ直下に e2e ディレクトリが作成されるので tests 内に移動
2. playwright.config.js を書き換える

## テストを作成

Playwriteは操作を自動的トラッキングしてコードを出力してくれます。
以下のようにテスト対象のURLを指定して叩くと、ブラウザが起動してトラッキングを開始します。

npx playwright codegen "テスト対象のURL"

例えばWordPressのログイン画面からの動作テストを作る場合は以下のようになります。

npx playwright codegen "http://localhost:8889/wp-login.php"

## テストの実行

全てのテストの実行

npx playwright test

ブラウザは chrome だけで良い場合

npx playwright test --project=chromium

操作のスクリーンショットが見たい場合 --trace on を追加

npx playwright test --trace on

npx playwright test --trace on --project=chromium

## レポートの確認

npx playwright show-report

---

## よく使うテスト書式

特定のセレクタ内の文字列

await expect(page.locator('.target-selector')).toContainText('Please select CTA from Setting sidebar.');

表示中のページのURLが特定の文字列を含むか？

await expect(page).toHaveURL(/.*intro/);

数秒待つ

await page.waitForTimeout(1000);

---

## 未解決メモ

スクリーンショットの比較
toHaveScreenshot()
toMatchSnapshot()

パネルの状態管理参考
https://github.com/WordPress/gutenberg/blob/trunk/packages/e2e-test-utils-playwright/src/editor/open-document-settings-sidebar.ts