目次
Playwrightを使用したE2Eテストの自動化
参考になった
2
レビュー投稿日の情報になります
株式会社カナリー / nu0ma
メンバー / フルスタックエンジニア・プロダクトエンジニア
最終更新日投稿日
| ツールの利用規模 | ツールの利用開始時期 | 事業形態 |
|---|---|---|
| 11名〜50名 | 2025年7月 | B to C |
| ツールの利用規模 | 11名〜50名 |
|---|---|
| ツールの利用開始時期 | 2025年7月 |
| 事業形態 | B to C |
導入の背景・解決したかった問題
導入背景
ツール導入前の課題
手動確認というボトルネック
- AI Agentを使用してコーディングの生産性が上がっても成果物が正しいことを素早く検証できない
- 実装途中でE2Eテストを回してAI Agentに実装が正しくないことをフィードバックできない
どのような状態を目指していたか
開発フローのボトルネックが取り除かれている状態
- AI Agentに実装のミスをフィードバックでき、自律的に修正させる状態
- 画面操作の結果としてのデータベースの状態を検証し、仕様とあっているかを自動で確認できる状態
比較検討したサービス
- Cypress
- Gauge
- Selenium
比較した軸
- 実行速度
- 運用コスト
- AIとの親和性
導入に向けた社内への説明
上長・チームへの説明
弊社ではADRを使用した意思決定フローを採用しており、ADR内で他ツールとの比較や現状の説明、導入による生産性の向上の可能性などを記載しました。
活用方法
よく使う機能
UIモード
実際に書いたテストを画面を見ながらどのように操作が行われているか見える機能です。セレクタが機能しない場合や、API側のエラーにより画面の要素が表示されない場合のデバッグに役立ちます。Test generator
ブラウザ操作からテストコードを自動で生成してくれて便利です。
ツールの良い点
- 主要ブラウザ（Chromium、Firefox、WebKit）でのテスト実行が可能
- CI上で安定的に実行できる
- モダンな開発体験（TypeScript対応、開発サーバーの起動、モック対応、アーティファクト対応）
- UIモードでデバッグがしやすい
- Playwright-CLIが存在する
- Claude CodeなどからPlaywright CLI経由でブラウザを操作することでコンテキスト量の削減に繋げることができます。
- Playwrightステップ内でのカスタム処理の呼び出しが可能
- Playwrightによる画面操作後にDBレコードの変更まで検証できるnpmライブラリを独自に開発し、検証範囲をDBレイヤーにまで拡張しました。
ツールの課題点
- Page Object Modelなどを使用してチーム内で書き方を揃えないと同じような処理が量産されてしまう
- codegenの生成内容は使用したいセレクタが必ず選ばれる訳ではないので手動で修正する必要がある
今後の展望
AI時代におけるガードレールの1つとして、Playwrightを有効活用していきたいです。
株式会社カナリー / nu0ma
メンバー / フルスタックエンジニア・プロダクトエンジニア
よく見られているレビュー
株式会社カナリー / nu0ma
メンバー / フルスタックエンジニア・プロダクトエンジニア
レビューしているツール
目次
- 導入の背景・解決したかった問題
- 活用方法