playwright-skill

Playwright スキル

Playwright に関する実践的で、本番環境で検証済みのガイダンスです。すべてのパターンで、使用すべき場合と、使用すべきでない場合を説明しています。

50 以上のリファレンスガイドで、セレクター、アサーション、フィクスチャ、ページオブジェクト、ネットワークのモック、認証、ビジュアルリグレッション、アクセシビリティ、API テスト、CI/CD、デバッグなど、Playwright の全領域を網羅しています。TypeScript と JavaScript の例も掲載しています。

基本ルール

1. CSS/XPath より getByRole() を使う — マークアップの変更に強く、ユーザーから見たページの状態を反映します
2. page.waitForTimeout() は使わない — expect(locator).toBeVisible() または page.waitForURL() を使います
3. Web ファーストのアサーションを使う — expect(locator) は自動的に再試行しますが、expect(await locator.textContent()) は再試行しません
4. すべてのテストを分離する — 状態を共有せず、実行順序に依存させません
5. 設定で baseURL を指定する — テスト内に URL をハードコードしません
6. 再試行回数は CI では 2、ローカルでは 0 にする — 重要な環境で不安定さを検出します
7. トレースには 'on-first-retry' を指定する — CI を遅くせずに、詳細なデバッグ用アーティファクトを取得できます
8. グローバル変数よりフィクスチャを使う — モジュールレベルの変数ではなく、test.extend() で状態を共有します
9. 1 つのテストにつき 1 つの動作を検証する — 関連する複数の expect() 呼び出しは問題ありません
10. 外部サービスのみをモックする — 自分のアプリはモックせず、サードパーティ API、決済ゲートウェイ、メールをモックします

ガイド一覧

Writing Tests

What you're doing	Guide	Deep dive
Choosing selectors	locators.md	locator-strategy.md
Assertions & waiting	assertions-and-waiting.md
Organizing test suites	test-organization.md	test-architecture.md
Playwright config	configuration.md
Page objects	page-object-model.md	pom-vs-fixtures-vs-helpers.md
Fixtures & hooks	fixtures-and-hooks.md
Test data	test-data-management.md
Auth & login	authentication.md	auth-flows.md
API testing (REST/GraphQL)	api-testing.md
Visual regression	visual-regression.md
Accessibility	accessibility.md
Mobile & responsive	mobile-and-responsive.md
Component testing	component-testing.md
Network mocking	network-mocking.md	when-to-mock.md
Forms & validation	forms-and-validation.md
File uploads/downloads	file-operations.md	file-upload-download.md
Error & edge cases	error-and-edge-cases.md
CRUD flows	crud-testing.md
Drag and drop	drag-and-drop.md
Search & filter UI	search-and-filter.md

デバッグと修正

問題	ガイド
一般的なデバッグのワークフロー	debugging.md
特定のエラーメッセージ	error-index.md
不安定／断続的なテスト	flaky-tests.md
初心者によくある間違い	common-pitfalls.md

フレームワークのレシピ

フレームワーク	ガイド
Next.js（App Router + Pages Router）	nextjs.md
React（CRA、Vite）	react.md
Vue 3 / Nuxt	vue.md
Angular	angular.md

移行ガイド

移行元	ガイド
Cypress	from-cypress.md
Selenium / WebDriver	from-selenium.md

アーキテクチャの選択

質問	ガイド
どのロケーター戦略を使うべきですか？	locator-strategy.md
E2E、コンポーネント、APIのどれを使うべきですか？	test-architecture.md
モックと実際のサービスのどちらを使うべきですか？	when-to-mock.md
POM、フィクスチャ、ヘルパーのどれを使うべきですか？	pom-vs-fixtures-vs-helpers.md

CI/CDとインフラストラクチャ

トピック	ガイド
GitHub Actions	ci-github-actions.md
GitLab CI	ci-gitlab.md
CircleCI / Azure DevOps / Jenkins	ci-other.md
並列実行とシャーディング	parallel-and-sharding.md
Dockerとコンテナ	docker-and-containers.md
レポートとアーティファクト	reporting-and-artifacts.md
コードカバレッジ	test-coverage.md
グローバルセットアップ／ティアダウン	global-setup-teardown.md
マルチプロジェクト設定	projects-and-dependencies.md

専門的なトピック

トピック	ガイド
複数ユーザーとコラボレーション	multi-user-and-collaboration.md
WebSocket とリアルタイム処理	websockets-and-realtime.md
ブラウザー API（位置情報、クリップボード、権限）	browser-apis.md
iframe と Shadow DOM	iframes-and-shadow-dom.md
Canvas と WebGL	canvas-and-webgl.md
Service Worker と PWA	service-workers-and-pwa.md
Electron アプリ	electron-testing.md
ブラウザー拡張機能	browser-extensions.md
セキュリティテスト	security-testing.md
パフォーマンスとベンチマーク	performance-testing.md
i18n とローカライゼーション	i18n-and-localization.md
複数タブとポップアップ	multi-context-and-popups.md
クロックと時間のモック	clock-and-time-mocking.md
サードパーティ統合	third-party-integrations.md

CLI ブラウザー自動化

実行する内容	ガイド
CLI でのブラウザー操作	playwright-cli/SKILL.md
基本コマンド（open、click、fill、navigate）	core-commands.md
ネットワークのモックとインターセプト	request-mocking.md
カスタム Playwright コードの実行	running-custom-code.md
複数セッションのブラウザー管理	session-management.md
Cookie、localStorage、認証状態	storage-and-auth.md
CLI からのテストコード生成	test-generation.md
トレースとデバッグ	tracing-and-debugging.md
スクリーンショット、動画、PDF	screenshots-and-media.md
デバイスと環境のエミュレーション	device-emulation.md
複雑な複数ステップのワークフロー	advanced-workflows.md

言語に関する注意

すべてのガイドには TypeScript と JavaScript の例が含まれています。プロジェクトで .js ファイルを使用している場合、または tsconfig.json がない場合は、例をプレーンな JavaScript に適合させています。