● Playwrightのインストール

npm init playwright@latest

● 1. 実際にブラウザを操作してブラウザ操作を記録

npx playwright codegen

● 2. テストを新規作成して記録したコードをペースト

ファイル名は好きな命名で良いでしょう。拡張子も同じくです。

vi tests/作成したいテストファイル名.spec.ts

拡張子の設定は以下のようにします。（例 : *.playwright.ts をテストファイルとみなす）

playwright.config.ts

export default defineConfig({
  testMatch: "*.playwright.ts",

● 3. ペーストしたブラウザ操作の最後にテストを追記

要素 xxx が画面に表示されている

await expect(page.locator('h1')).toBeVisible();     // 要素h1が画面に表示されている
await expect(page.locator('h2')).not.toBeVisible(); // 要素h1が画面に表示されていない

ページのタイトルが xxx と完全一致（部分一致）する

await expect(page).toHaveTitle(/のマイページ/); // 部分一致（正規表現オブジェクトで指定）
await expect(page).toHaveTitle('Dashboard'); // 完全一致（文字列で指定）

URLが xxx である

await expect(page.url()).toBe('https://localhost/mypage/');

● 4. テストを実行する

npx playwright test --ui

インストール時に自動的にインストールされる。サンプルテストファイルが実行されます。実行されるのは以下のファイルです。

tests/example.spec.ts
tests/demo-todo-app.spec.ts

● 5. テスト結果の表示

npx playwright show-report

● 6. テストをCLIのみで実行する

3つのブラウザで実行

npx playwright test --project=chromium

Google Chrome のみで実行

npx playwright test --project=chromium