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

Cypressより早いE2Eテストフレームワーク Playwright

● Playwrightのインストール

npm init playwright@latest

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

npx playwright codegen

起動するとブラウザが立ち上がり、すでに録画状態になっています。
テストしたいウェブサイトにアクセスして様子をクリックしたりするとInspector 画面にコードが書き出されます。

● 1. 実際にブラウザを操作してブラウザ操作を記録(Cookieなどストレージを指定)

cookies.json

{
  "cookies": 
	[
	  {
	    "name": "cookie_name",
	    "value": "cookie_value",
	    "domain": "example.com",
	    "path": "/",
	    "expires": -1,
	    "httpOnly": true,
	    "secure": true,
	    "sameSite": "Lax"
	  }
	]
}
npx playwright codegen --load-storage=cookies.json https://example.com

● 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

● VRT reg-suit のインストール

npm install -D reg-suit

インストール

npx reg-suit init

実行

npx reg-suit run

● Playwrightのカスタムフィクスチャ

フィクスチャとは何するもの?

フィクスチャとは、テストを実行する際に必要となる前提条件や共通のセットアップを提供する仕組みのことです。

具体的には:

・テスト実行前の環境準備(セットアップ)
・テスト間で共有される共通のコード
・テストデータの準備
・テスト後のクリーンアップ処理(ティアダウン)

を管理する機能です。

・テスト間でデータを共有したり、カスタム実行を作成したりする

No.2425
11/26 09:29

edit