フロントエンド開発といえば。
react アプリの初期化( npm init vite@latest <アプリ名> )

Playwright

● 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
No.2425
11/29 16:00

edit