Playwright コマンド&テストランナー チートシート【保存版スニペット集】

Playwright を使ったテスト自動化を始めたものの、「あのコマンド何だったっけ?」「このオプション、どう使うんだっけ?」と毎回ドキュメントを探していませんか?テスト実行やデバッグ、設定ファイルの調整など、日々の開発で頻繁に使うコマンドやオプションを素早く参照できるチートシートがあれば、開発効率が大きく向上します。本記事では、Playwright のコマンドとテストランナーに関する実用的なスニペットを体系的にまとめました。
ブックマークして、必要な時にすぐに使えるリファレンスとしてご活用ください。
クイックリファレンス早見表
よく使うコマンドとオプションを素早く参照できる早見表です。
基本コマンド
コマンド | 用途 |
---|---|
npx playwright test | 全テストを実行 |
npx playwright test --headed | ブラウザを表示して実行 |
npx playwright test --debug | デバッグモードで実行 |
npx playwright test --ui | UI モードで実行 |
npx playwright show-report | HTML レポートを表示 |
npx playwright codegen | コード生成ツールを起動 |
npx playwright install | ブラウザをインストール |
テスト実行のフィルタリング
コマンド | 用途 |
---|---|
npx playwright test tests/login.spec.ts | 特定のファイルを実行 |
npx playwright test tests/auth/ | 特定のディレクトリを実行 |
npx playwright test -g "login" | タイトルで絞り込み |
npx playwright test --grep-invert "slow" | パターンを除外 |
npx playwright test --last-failed | 失敗したテストのみ再実行 |
npx playwright test --project=chromium | 特定のブラウザのみ実行 |
実行制御オプション
オプション | 用途 |
---|---|
--workers=4 | 並列ワーカー数を指定 |
--workers=1 | シリアル実行(1 つずつ実行) |
--max-failures=5 | 指定数の失敗で停止 |
--retries=2 | リトライ回数を指定 |
--timeout=60000 | タイムアウト時間(ミリ秒) |
--shard=1/4 | シャード分割実行 |
レポート関連
コマンド/設定 | 用途 |
---|---|
--reporter=html | HTML レポート出力 |
--reporter=json | JSON レポート出力 |
--reporter=junit | JUnit レポート出力 |
--reporter=dot | 最小限の出力 |
npx playwright show-trace trace.zip | トレースを表示 |
よく使う設定ファイルパターン
typescript// 基本設定
export default defineConfig({
testDir: './tests', // テストディレクトリ
timeout: 30000, // タイムアウト(30秒)
retries: 2, // リトライ回数
workers: 4, // 並列ワーカー数
fullyParallel: true, // 完全並列実行
use: {
baseURL: 'http://localhost:3000', // ベースURL
trace: 'retain-on-failure', // 失敗時のトレース保存
screenshot: 'only-on-failure', // 失敗時のスクリーンショット
video: 'retain-on-failure', // 失敗時のビデオ保存
},
// 複数ブラウザ設定
projects: [
{
name: 'chromium',
use: { ...devices['Desktop Chrome'] },
},
{
name: 'firefox',
use: { ...devices['Desktop Firefox'] },
},
{
name: 'webkit',
use: { ...devices['Desktop Safari'] },
},
],
// レポーター設定
reporter: [
['html'],
['json', { outputFile: 'test-results.json' }],
],
});
CI/CD 環境用の設定
typescript// CI環境での推奨設定
export default defineConfig({
forbidOnly: !!process.env.CI, // test.onlyを禁止
retries: process.env.CI ? 2 : 0, // CIでリトライ
workers: process.env.CI ? 1 : undefined, // CIでシリアル実行
use: {
headless: process.env.CI ? true : false, // CIでヘッドレス
video: process.env.CI ? 'retain-on-failure' : 'off', // CIで失敗時のみ
screenshot: process.env.CI ? 'only-on-failure' : 'off',
},
});
背景
Playwright は、モダンな Web アプリケーションのテスト自動化において、非常に強力なツールとなっています。Chromium、Firefox、WebKit という主要ブラウザをサポートし、クロスブラウザテストを簡単に実現できます。
しかし、Playwright の機能は豊富であり、CLI コマンドやテストランナーのオプション、設定ファイルのパラメータなど、覚えるべき項目が多岐にわたります。特に以下のような場面で、正確なコマンドやオプションを素早く参照したいニーズがあります。
- テスト実行時に特定のブラウザやファイルだけを対象にしたい
- デバッグモードで UI を確認しながらテストを進めたい
- CI/CD 環境で適切な設定を行いたい
- レポート形式をカスタマイズしたい
以下の図は、Playwright のテスト実行フローを示しています。コマンド実行から結果出力までの流れを理解することで、各オプションの役割が明確になります。
mermaidflowchart LR
cli["CLI コマンド実行<br/>(npx playwright test)"] --> config["設定ファイル読み込み<br/>(playwright.config.ts)"]
config --> runner["テストランナー起動"]
runner --> browser["ブラウザ起動<br/>(Chromium/Firefox/WebKit)"]
browser --> execute["テスト実行"]
execute --> report["レポート生成"]
report --> output["結果出力<br/>(HTML/JSON/Console)"]
このフローを把握しておくと、各段階でどのようなオプションや設定が影響するかが理解しやすくなります。
課題
Playwright を実務で活用する際、以下のような課題に直面することが多くあります。
コマンドとオプションの多様性
Playwright には、テスト実行、コード生成、デバッグ、レポート表示など、多数のコマンドが用意されています。さらに、各コマンドには多くのオプションがあり、それぞれの用途と組み合わせを覚えるのは容易ではありません。
設定ファイルの複雑さ
playwright.config.ts
には、グローバル設定、プロジェクト設定、ブラウザオプション、レポーター設定など、多岐にわたる設定項目があります。初心者にとっては、どの設定をどこに記述すべきか迷いやすいです。
ドキュメント検索の手間
公式ドキュメントは充実していますが、必要な情報を毎回検索するのは時間がかかります。特に、複数のオプションを組み合わせて使いたい場合、実例を見つけるのが難しいこともあります。
環境による設定の違い
ローカル開発環境と CI/CD 環境では、最適な設定が異なります。たとえば、ローカルではヘッドモードでデバッグしたいが、CI ではヘッドレスモードで高速に実行したいといったケースがあります。
以下の図は、Playwright 利用時の主な課題とその影響範囲を示しています。
mermaidflowchart TD
start["Playwright 利用時の課題"] --> cmd["コマンド・オプションの多様性"]
start --> cfg["設定ファイルの複雑さ"]
start --> doc["ドキュメント検索の手間"]
start --> env["環境による設定の違い"]
cmd --> impact1["学習コストの増大"]
cfg --> impact1
doc --> impact2["開発効率の低下"]
env --> impact3["設定ミスのリスク"]
impact1 --> result["テスト品質・開発速度への影響"]
impact2 --> result
impact3 --> result
これらの課題を解決するには、頻繁に使うコマンドやオプション、設定パターンを体系的に整理し、すぐに参照できる形でまとめておくことが有効です。
解決策
本記事では、Playwright のコマンドとテストランナーに関する実用的なスニペット集を提供します。以下のカテゴリに分けて、それぞれの使い方と実例を紹介します。
チートシートの構成
- 基本コマンド: テスト実行、レポート表示、ブラウザインストールなど
- テスト実行オプション: ブラウザ指定、並列実行、デバッグモードなど
- フィルタリング・絞り込み: 特定のファイルやテストケースのみを実行
- デバッグ・開発支援: UI モード、コード生成、トレース表示など
- 設定ファイル: よく使う設定パターンとカスタマイズ方法
- レポーティング: レポート形式の選択と出力設定
- CI/CD 環境: 本番環境での最適な設定例
各カテゴリでは、コマンドやオプションの説明とともに、実際に使えるコードスニペットを掲載します。コピー&ペーストですぐに試せる形式にしていますので、実務でそのままご活用いただけます。
以下の図は、本記事で提供するスニペット集の全体像を示しています。
mermaidflowchart TB
root["Playwright チートシート"]
root --> cat1["基本コマンド"]
root --> cat2["テスト実行オプション"]
root --> cat3["フィルタリング"]
root --> cat4["デバッグ・開発支援"]
root --> cat5["設定ファイル"]
root --> cat6["レポーティング"]
root --> cat7["CI/CD 環境"]
cat1 --> ex1["test / show-report<br/>install / codegen"]
cat2 --> ex2["--headed / --debug<br/>--workers / --project"]
cat3 --> ex3["-g / --last-failed<br/>ファイル指定"]
cat4 --> ex4["--ui / show-trace<br/>コード生成"]
cat5 --> ex5["playwright.config.ts<br/>グローバル・プロジェクト設定"]
cat6 --> ex6["HTML / JSON<br/>カスタムレポーター"]
cat7 --> ex7["ヘッドレス設定<br/>並列化・リトライ"]
このように、必要な情報を素早く見つけられる構成にしています。次のセクションからは、具体的なスニペットを紹介していきます。
具体例
基本コマンド
Playwright の基本的なコマンドは、テスト実行やブラウザのセットアップ、レポート表示など、日常的に使う操作をカバーしています。
テストを実行する
全てのテストを実行する基本コマンドです。デフォルトでは、設定ファイルで指定された全ブラウザでヘッドレスモードで実行されます。
bashnpx playwright test
このコマンドは、playwright.config.ts
に定義されたテストディレクトリ内の全テストファイルを対象とします。
HTML レポートを表示する
テスト実行後に生成された HTML レポートをブラウザで開きます。
bashnpx playwright show-report
レポートには、テスト結果の詳細、スクリーンショット、トレース情報などが含まれます。デフォルトでは playwright-report
ディレクトリに出力されます。
ブラウザをインストールする
Playwright が使用するブラウザ(Chromium、Firefox、WebKit)をインストールします。
bashnpx playwright install
初回セットアップ時や、ブラウザのバージョンを更新したい場合に実行します。
依存関係も含めてインストールする場合は、以下のオプションを使います。
bashnpx playwright install --with-deps
このオプションにより、ブラウザの動作に必要なシステムライブラリも自動的にインストールされます。
コード生成(Codegen)を実行する
ブラウザ操作を記録して、テストコードを自動生成します。
bashnpx playwright codegen
このコマンドを実行すると、ブラウザウィンドウとコードエディタウィンドウが開き、ブラウザでの操作がリアルタイムでコードに変換されます。
特定の URL から記録を開始する場合は、URL を引数に指定します。
bashnpx playwright codegen https://example.com
生成されたコードをファイルに保存する場合は、-o
オプションを使います。
bashnpx playwright codegen -o tests/example.spec.ts https://example.com
テスト実行オプション
テスト実行時には、さまざまなオプションを指定することで、実行対象やモードを柔軟にコントロールできます。
ヘッドモードで実行する
通常はヘッドレスモード(ブラウザ UI が表示されない)で実行されますが、--headed
オプションを使うと、ブラウザの動作を目視確認できます。
bashnpx playwright test --headed
デバッグや動作確認時に非常に便利です。
デバッグモードで実行する
Playwright Inspector を起動して、ステップ実行やブレークポイントを使ったデバッグが可能になります。
bashnpx playwright test --debug
このモードでは、テストが一時停止され、Inspector の UI で各ステップを確認しながら進められます。
UI モードで実行する
インタラクティブな UI でテストを実行・管理できます。テストの選択、実行、結果の確認が GUI で行えます。
bashnpx playwright test --ui
UI モードでは、テストのフィルタリング、タイムラインの確認、スクリーンショットの表示などが直感的に操作できます。
特定のプロジェクト(ブラウザ)だけを実行する
設定ファイルで複数のプロジェクト(ブラウザ)を定義している場合、特定のプロジェクトだけを実行できます。
bashnpx playwright test --project=chromium
複数のプロジェクトを指定する場合は、オプションを繰り返します。
bashnpx playwright test --project=chromium --project=firefox
これにより、Chromium と Firefox でのみテストが実行されます。
並列実行のワーカー数を指定する
デフォルトでは、CPU コア数に応じて自動的にワーカー数が決定されますが、--workers
オプションで明示的に指定できます。
bashnpx playwright test --workers=4
CI 環境でリソースを制限したい場合や、テストの実行順序を制御したい場合に有用です。
シリアル実行(1 つずつ実行)にする場合は、ワーカー数を 1 に設定します。
bashnpx playwright test --workers=1
フィルタリング・絞り込み
特定のテストファイルやテストケースだけを実行したい場合、さまざまなフィルタリング方法があります。
特定のテストファイルを実行する
ファイルパスを引数に指定することで、そのファイルだけを実行できます。
bashnpx playwright test tests/login.spec.ts
複数のファイルを指定する場合は、スペース区切りで列挙します。
bashnpx playwright test tests/login.spec.ts tests/signup.spec.ts
特定のディレクトリ内のテストを実行する
ディレクトリパスを指定すると、その配下の全テストファイルが実行されます。
bashnpx playwright test tests/auth/
これにより、tests/auth/
ディレクトリ内の全テストがまとめて実行されます。
タイトルでテストを絞り込む(grep)
-g
または --grep
オプションで、テストタイトルに含まれるキーワードにマッチするテストだけを実行します。
bashnpx playwright test -g "login"
正規表現も使用できます。
bashnpx playwright test -g "login|signup"
この例では、"login" または "signup" を含むテストが実行されます。
特定のパターンを除外する(grep-invert)
逆に、特定のパターンにマッチするテストを除外したい場合は、--grep-invert
オプションを使います。
bashnpx playwright test --grep-invert "slow"
これにより、"slow" を含むテストは実行されません。
最後に失敗したテストだけを再実行する
テスト失敗後、修正して失敗したテストだけを再実行したい場合に便利です。
bashnpx playwright test --last-failed
このオプションにより、前回の実行で失敗したテストケースだけが対象となります。
デバッグ・開発支援
テストの作成やデバッグを効率化するための便利なコマンドとオプションを紹介します。
トレースを記録して表示する
テスト実行時にトレースを記録し、後から Trace Viewer で詳細を確認できます。
まず、設定ファイルでトレース記録を有効にします。
typescript// playwright.config.ts の use セクション
use: {
trace: 'on-first-retry', // 最初のリトライ時にトレースを記録
}
トレースファイルを表示するには、以下のコマンドを使います。
bashnpx playwright show-trace trace.zip
Trace Viewer では、各アクションのタイムライン、DOM スナップショット、ネットワーク通信、コンソールログなどが確認できます。
コード生成で特定のブラウザを使う
デフォルトでは Chromium が使われますが、-b
または --browser
オプションで変更できます。
bashnpx playwright codegen -b firefox https://example.com
これにより、Firefox での操作が記録されます。
コード生成で言語を指定する
生成されるコードの言語を指定できます。デフォルトは JavaScript ですが、TypeScript や Python などにも対応しています。
bashnpx playwright codegen --target=typescript https://example.com
他にも python
、csharp
、java
などが指定できます。
キャッシュをクリアする
Playwright のキャッシュをクリアして、クリーンな状態に戻します。
bashnpx playwright clear-cache
ブラウザの更新やトラブルシューティング時に有用です。
設定ファイル(playwright.config.ts)
テストランナーの動作を制御する設定ファイルのよく使うパターンを紹介します。
基本的な設定ファイルの構造
以下は、最小限の設定ファイルの例です。
typescriptimport { defineConfig } from '@playwright/test';
export default defineConfig({
testDir: './tests',
timeout: 30000,
});
testDir
でテストファイルのディレクトリを指定し、timeout
で各テストのタイムアウト時間(ミリ秒)を設定します。
複数ブラウザでのテスト実行を設定する
projects
セクションを使って、複数のブラウザでテストを実行できます。
typescriptimport { defineConfig, devices } from '@playwright/test';
export default defineConfig({
projects: [
{
name: 'chromium',
use: { ...devices['Desktop Chrome'] },
},
{
name: 'firefox',
use: { ...devices['Desktop Firefox'] },
},
{
name: 'webkit',
use: { ...devices['Desktop Safari'] },
},
],
});
devices
オブジェクトには、各ブラウザやデバイスのプリセット設定が含まれています。
ベース URL とタイムアウトの設定
テスト内で相対 URL を使えるようにするため、ベース URL を設定します。
typescriptexport default defineConfig({
use: {
baseURL: 'http://localhost:3000',
trace: 'retain-on-failure',
},
timeout: 60000,
});
trace: 'retain-on-failure'
により、テスト失敗時にのみトレースが保存されます。
リトライ回数と並列実行の設定
テストの安定性を高めるため、リトライ回数を設定できます。
typescriptexport default defineConfig({
retries: 2, // テスト失敗時に2回まで再実行
workers: 4, // 並列実行ワーカー数
fullyParallel: true, // 全テストを並列実行
});
fullyParallel
を true
にすると、ファイル内のテストケースも並列実行されます。
CI 環境専用の設定
CI 環境では、特定の設定を適用したい場合があります。
typescriptexport default defineConfig({
forbidOnly: !!process.env.CI, // CI では test.only を禁止
retries: process.env.CI ? 2 : 0, // CI では2回リトライ
workers: process.env.CI ? 1 : undefined, // CI ではシリアル実行
});
forbidOnly
により、CI 環境で test.only
が使われている場合にエラーとなり、意図しないテストの除外を防げます。
レポーターの設定
レポート形式を指定します。複数のレポーターを同時に使用することも可能です。
typescriptexport default defineConfig({
reporter: [
['html'],
['json', { outputFile: 'test-results.json' }],
['junit', { outputFile: 'junit.xml' }],
],
});
HTML レポート、JSON レポート、JUnit レポートを同時に出力する設定です。
Web サーバーの自動起動
テスト実行前に開発サーバーを自動起動できます。
typescriptexport default defineConfig({
webServer: {
command: 'yarn dev',
port: 3000,
timeout: 120000,
reuseExistingServer: !process.env.CI,
},
});
reuseExistingServer
を true
にすると、既に起動しているサーバーがある場合は再利用します。
モバイルデバイスのエミュレーション
スマートフォンやタブレットのエミュレーションも設定できます。
typescriptexport default defineConfig({
projects: [
{
name: 'Mobile Chrome',
use: { ...devices['Pixel 5'] },
},
{
name: 'Mobile Safari',
use: { ...devices['iPhone 12'] },
},
],
});
devices
にはさまざまなデバイスのプリセットが用意されています。
レポーティング
テスト結果を適切な形式で出力することで、チーム内での情報共有や分析が容易になります。
HTML レポートの出力先を変更する
デフォルトでは playwright-report
ディレクトリに出力されますが、変更できます。
typescriptexport default defineConfig({
reporter: [['html', { outputFolder: 'custom-report' }]],
});
JSON レポートで詳細データを取得する
プログラムで結果を処理したい場合は、JSON 形式が便利です。
typescriptexport default defineConfig({
reporter: [['json', { outputFile: 'results.json' }]],
});
出力された JSON ファイルは、スクリプトでパースして分析できます。
JUnit レポートで CI 連携する
JUnit 形式のレポートは、多くの CI ツールで標準サポートされています。
typescriptexport default defineConfig({
reporter: [
['junit', { outputFile: 'junit-results.xml' }],
],
});
Jenkins、GitHub Actions、GitLab CI などで、テスト結果を自動的に集計・表示できます。
コンソール出力をカスタマイズする
list
レポーターは、テスト結果をコンソールに一覧表示します。
typescriptexport default defineConfig({
reporter: 'list',
});
dot
レポーターは、よりコンパクトな形式で出力します。
typescriptexport default defineConfig({
reporter: 'dot',
});
複数のレポーターを併用する
前述の通り、配列で複数のレポーターを指定できます。
typescriptexport default defineConfig({
reporter: [
['list'],
['html', { open: 'never' }],
['json', { outputFile: 'test-results.json' }],
],
});
open: 'never'
により、HTML レポートが自動的に開かれるのを防げます。
CI/CD 環境での設定
本番環境や継続的インテグレーション環境では、特定の設定が推奨されます。
GitHub Actions での設定例
GitHub Actions でのワークフロー例です。
yamlname: Playwright Tests
on: [push, pull_request]
jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: '18'
- name: Install dependencies
run: yarn install
- name: Install Playwright browsers
run: npx playwright install --with-deps
- name: Run Playwright tests
run: npx playwright test
- uses: actions/upload-artifact@v3
if: always()
with:
name: playwright-report
path: playwright-report/
テスト結果のレポートをアーティファクトとしてアップロードすることで、失敗時の詳細を確認できます。
Docker コンテナでの実行
Docker を使うことで、環境の一貫性を保てます。
dockerfileFROM mcr.microsoft.com/playwright:v1.40.0-focal
WORKDIR /app
COPY package.json yarn.lock ./
RUN yarn install
COPY . .
CMD ["npx", "playwright", "test"]
公式の Playwright Docker イメージを使うと、ブラウザと依存関係が事前にインストールされています。
並列実行でテストを高速化する
CI 環境では、シャード機能を使って複数のジョブに分散実行できます。
yamljobs:
test:
runs-on: ubuntu-latest
strategy:
matrix:
shard: [1, 2, 3, 4]
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
- run: yarn install
- run: npx playwright install --with-deps
- run: npx playwright test --shard=${{ matrix.shard }}/4
この例では、テストを 4 つのシャードに分割し、並列実行します。
環境変数で設定を切り替える
環境変数を使って、CI とローカルで設定を切り替えられます。
typescriptexport default defineConfig({
use: {
headless: process.env.CI ? true : false,
video: process.env.CI ? 'retain-on-failure' : 'off',
screenshot: process.env.CI ? 'only-on-failure' : 'off',
},
});
CI 環境では、ビデオとスクリーンショットを失敗時のみ保存し、ストレージを節約します。
その他の便利なコマンドとオプション
テスト実行を途中で停止する
--max-failures
オプションで、指定した数の失敗で実行を停止できます。
bashnpx playwright test --max-failures=5
早期にフィードバックを得たい場合や、リソースを節約したい場合に有用です。
特定のテストにタグを付けて実行する
テストにタグを付けることで、柔軟にフィルタリングできます。
typescript// tests/example.spec.ts
test('@smoke ログインできる', async ({ page }) => {
// テストコード
});
実行時にタグで絞り込みます。
bashnpx playwright test -g @smoke
リポート生成をスキップする
レポート生成をスキップして、実行時間を短縮できます。
bashnpx playwright test --reporter=dot
dot
レポーターは最小限の出力のみを行います。
グローバルセットアップとティアダウン
全テスト実行前後に一度だけ実行される処理を定義できます。
typescript// playwright.config.ts
export default defineConfig({
globalSetup: require.resolve('./global-setup'),
globalTeardown: require.resolve('./global-teardown'),
});
データベースの初期化やテスト用ユーザーの作成などに利用できます。
以下は、Playwright のコマンド、オプション、設定項目を一覧表にまとめたものです。
# | カテゴリ | コマンド/オプション | 用途 |
---|---|---|---|
1 | 基本コマンド | npx playwright test | 全テストを実行 |
2 | 基本コマンド | npx playwright show-report | HTML レポートを表示 |
3 | 基本コマンド | npx playwright install | ブラウザをインストール |
4 | 基本コマンド | npx playwright codegen | コード生成ツールを起動 |
5 | 実行オプション | --headed | ヘッドモードで実行 |
6 | 実行オプション | --debug | デバッグモードで実行 |
7 | 実行オプション | --ui | UI モードで実行 |
8 | 実行オプション | --project=<name> | 特定のプロジェクトを実行 |
9 | 実行オプション | --workers=<num> | 並列ワーカー数を指定 |
10 | フィルタリング | -g <pattern> | タイトルでテストを絞り込み |
11 | フィルタリング | --grep-invert <pattern> | パターンを除外 |
12 | フィルタリング | --last-failed | 最後に失敗したテストを再実行 |
13 | フィルタリング | --shard=<n>/<total> | シャード分割実行 |
14 | 設定ファイル | testDir | テストディレクトリ |
15 | 設定ファイル | timeout | テストタイムアウト |
16 | 設定ファイル | retries | リトライ回数 |
17 | 設定ファイル | workers | 並列ワーカー数 |
18 | 設定ファイル | fullyParallel | 全テストを並列実行 |
19 | 設定ファイル | use.baseURL | ベース URL |
20 | 設定ファイル | use.trace | トレース記録設定 |
21 | レポート | reporter: 'html' | HTML レポート |
22 | レポート | reporter: 'json' | JSON レポート |
23 | レポート | reporter: 'junit' | JUnit レポート |
24 | その他 | --max-failures=<num> | 失敗数で実行停止 |
25 | その他 | npx playwright clear-cache | キャッシュをクリア |
このように、Playwright のコマンドと設定オプションは非常に豊富で、さまざまなシナリオに対応できます。
まとめ
Playwright のコマンドとテストランナーには、多くのオプションと設定項目があり、初めて触れる方にとっては覚えることが多いと感じるかもしれません。しかし、本記事で紹介したチートシートを活用すれば、必要な情報を素早く参照でき、開発効率が大きく向上します。
以下のポイントを押さえておくと、Playwright をより効果的に活用できます。
- 基本コマンドをまず覚え、テスト実行とレポート確認の流れを理解する
- フィルタリング機能を使いこなし、必要なテストだけを素早く実行する
- 設定ファイルで、ブラウザやリトライ、並列実行などを適切に設定する
- デバッグツール(UI モード、Inspector、Trace Viewer)を活用してテストの品質を高める
- CI/CD 環境では、ヘッドレスモード、リトライ、レポート保存を適切に設定する
本記事のスニペットは、実際のプロジェクトでそのまま利用できる形式になっていますので、ブックマークして日々の開発にお役立てください。Playwright の公式ドキュメントも合わせて参照することで、さらに深い理解が得られます。
テスト自動化の効率を上げ、品質の高いアプリケーション開発を実現しましょう。
関連リンク
- article
Playwright コマンド&テストランナー チートシート【保存版スニペット集】
- article
Playwright セットアップ完全手順【2025】:インストールから初テスト作成まで
- article
【2025 年版】Playwright vs Cypress vs Selenium 徹底比較:速度・安定性・学習コストの最適解
- article
【2025 年最新】Playwright 入門:E2E テストの基本・特徴・できること完全ガイド
- article
Playwright × Docker:本番環境に近い E2E テストを構築
- article
Playwright でページ遷移と状態管理をしっかり検証
- article
Preact チートシート【保存版】:JSX/Props/Events/Ref の書き方早見表
- article
Playwright コマンド&テストランナー チートシート【保存版スニペット集】
- article
htmx 属性チートシート:hx-get/hx-post/hx-swap/hx-target 早見表【実例付き】
- article
Homebrew コマンドチートシート 2025:毎日使う 60 コマンド即参照リスト
- article
Node.js クリーンアーキテクチャ実践:アダプタ/ユースケース/エンティティの分離
- article
gpt-oss のモデルルーティング設計:サイズ別・ドメイン別・コスト別の自動切替
- blog
iPhone 17シリーズの発表!全モデルiPhone 16から進化したポイントを見やすく整理
- blog
Googleストアから訂正案内!Pixel 10ポイント有効期限「1年」表示は誤りだった
- blog
【2025年8月】Googleストア「ストアポイント」は1年表記はミス?2年ルールとの整合性を検証
- blog
Googleストアの注文キャンセルはなぜ起きる?Pixel 10購入前に知るべき注意点
- blog
Pixcel 10シリーズの発表!全モデル Pixcel 9 から進化したポイントを見やすく整理
- blog
フロントエンドエンジニアの成長戦略:コーチングで最速スキルアップする方法
- review
今の自分に満足していますか?『持たざる者の逆襲 まだ何者でもない君へ』溝口勇児
- review
ついに語られた業界の裏側!『フジテレビの正体』堀江貴文が描くテレビ局の本当の姿
- review
愛する勇気を持てば人生が変わる!『幸せになる勇気』岸見一郎・古賀史健のアドラー実践編で真の幸福を手に入れる
- review
週末を変えれば年収も変わる!『世界の一流は「休日」に何をしているのか』越川慎司の一流週末メソッド
- review
新しい自分に会いに行こう!『自分の変え方』村岡大樹の認知科学コーチングで人生リセット
- review
科学革命から AI 時代へ!『サピエンス全史 下巻』ユヴァル・ノア・ハラリが予見する人類の未来