はじめに
E2Eテストの自動化ツール Playwright は高機能ですが、テストが遅いと開発フローが止まり、CIコストも増大します。
この記事では、Playwrightの実行速度を改善するテクニックを紹介します。
ヘッドレス実行＋高速モード（headless: 'new'）
Playwrightではブラウザをヘッドレスで起動するだけで大きな高速化が可能です。
const browser = await chromium.launch({ headless: 'new' });
- 'new' は従来の true より高速かつ安定
- CIでは必ず有効化し、ローカルでも GUIが不要な場合は推奨
テストの並列実行（workers）
テストファイル単位で並列実行することにより、処理時間を大幅に削減できます。
npx playwright test --workers=4
playwright.config.ts
export default defineConfig({
workers: process.env.CI ? 4 : 1,
});
- 目安は「論理CPUコア数 - 1」
- マシン性能に応じて要調整
テスト対象の絞り込み（.only / --grep）
すべてのテストを毎回実行するのは非効率です。
test.ts
test.only('ログインできること', async ({ page }) => {
// テスト本体
});
npx playwright test --grep '@smoke'
- スモークテストや開発中のテストだけを実行し、迅速にフィードバックを得る
不要な静的待機を排除（waitForTimeout → waitForSelector）
固定待機は無駄な時間を生みます。
test.ts
// NG
await page.waitForTimeout(2000);
// OK
await page.locator('text=保存しました').waitFor();
- 状態変化を検知できるセレクタを使い、不要な待機をゼロに
ログイン状態を保存して前処理をスキップ
毎回のログインはテストを遅くします。
test.ts
// 初回ログイン後に保存
await context.storageState({ path: 'state.json' });
playwright.config.ts
use: {
storageState: 'state.json',
}
- globalSetup.ts で一度だけログイン＆保存する
モックAPIでネットワーク遅延を排除
本番APIとの通信はネットワーク遅延や不安定さの原因に。
MSW (Mock Service Worker) などで APIをモックしましょう。
test.ts
rest.get('/api/user', (req, res, ctx) => {
return res(ctx.status(200), ctx.json({ name: 'Taro' }));
});
実行時間が半分以下になることもあります。
CI環境向け最適化
CI上ではログやトレースの記録がボトルネックに。
test.ts
use: {
trace: process.env.CI ? 'off' : 'on-first-retry',
video: 'retain-on-failure',
}
- trace／video はデバッグ時以外オフに
- Dockerでは --no-sandbox オプションも検討
まとめ
今回記載したようなテクニックを使って、Playwrightを高速化しましょう。
- headless: 'new' を有効化
- --workers で並列実行
- .only / --grep で対象絞り込み
- waitForSelector で動的待機
- storageState でログイン省略
- モックAPIを活用
- CI用設定でログ／トレースオフ
他にも実行速度を改善する案があれば、コメントお願いします。