Playwrightを活用した機能開発のスピードを落とさないE2Eテストの自動化
株式会社RevComm / Kamikawa
メンバー / フロントエンドエンジニア / 従業員規模: 101名〜300名
ツールの利用規模 | ツールの利用開始時期 | 事業形態 |
---|---|---|
10名以下 | 2023年3月 | B to B |
ツールの利用規模 | 10名以下 |
---|---|
ツールの利用開始時期 | 2023年3月 |
事業形態 | B to B |
導入の背景・解決したかった問題
導入背景
2023年の6月に新プロダクトを正式リリースしてから、スピード感を持って新機能の開発を進めてきました。
機能リリースのプロセスの中で開発エンジニアよる手動テストと、重要な機能や影響範囲の大きい場合はQAによる手動テストを実施しています。 QAの人数も限りがあるため、思ったようなスピードでリリースができない場合もありました。 また開発エンジニアによる手動テストの場合は、影響範囲を全て理解できてないことから、テストの漏れなどがあり、デグレが発生することもありました。
他にも、先行でAutifyを利用していましたが、下記の課題もありました。
- ドラッグ & ドロップの操作をテストできないため、一部の機能をテストできない
- 料金形態がテストの足枷となっている (実行回数の上限があるので本当にAutifyを使いたいチームに回数を譲った方が良い)
上記の背景から他のE2Eテストツールを検討し始めました。
比較検討したサービス
- Cypress
- Autify
比較した軸
- マルチタブを開いてテストできるか
- ドラッグ & ドロップの操作をテストできるか
- 料金形態で実行回数の上限がないか
選定理由
上記を実現できる点。 また、ローカルで実行できる点やコードベースで管理できるため、レビューのサイクルと含めやすく、条件に当てはまったPlaywrightを選定しました。
導入の成果
- ドラッグ & ドロップの操作をテストできるようになり、以前はできなった機能のE2Eテストも実行できるようになりました。
- 以前の課題でありました、手動テストによる確認漏れのいくつかは、E2Eテストによって未然に防ぐことができ、QAの負担も少しは軽減できたかと思います。
- 現状はAutifyとまだ併用していますが、PlaywrightのE2Eテストが充実化してきたため、Autifyの実行を他のチームに譲り、費用を削減する事が見えてきました。
- 副産物ですが、開発メンバーが自らE2Eテストを作成することによって、E2Eテストに関する知見が高まり、自動テストで問題を未然に防ぐ意識が向上したと思います。
導入時の苦労・悩み
Playwrightを使用経験のあるエンジニアがチーム内におらず、初期設定からテストを実際に書くまでは、手探りで行い少し苦労しました。 E2Eテスト自体が壊れやすいため、あまり複雑なテストはせずに、ハッピーパス(正常系の基本的な使用ケース)のテストを書くことにしました。
導入に向けた社内への説明
上長・チームへの説明
元々、チームとしてE2Eテストを導入する方針ではあったため、E2Eテスト導入に関してはスムーズに進みました。 Playwright自体に費用はかからないので、費用面での導入のハードルは低いと思います。 チームのメンバーもPlaywrightでテストを書けるようにするために、ドキュメントを作成して使い方を説明し、新規機能開発のプロセスにE2Eテストをタスクとして組み込み、積極的にレビューを行いながら普及を進めました。
活用方法
現状は、Github Actions上でPull RequestごとにE2Eテストを実行しています。
よく使う機能
Playwrightの場合はHTML Reportを出力することができます。チームでは、E2Eテスト失敗時にレポートをS3にデプロイし、PRに対して自動的にURLをコメントするGitHub Actionsを作成しています。これにより素早いデバッグを実現しています。
ローカルでは、Playwright Test for VSCodeというVS Code拡張機能を使うとスムーズなテスト開発が可能です。
ツールの良い点
- ドキュメントが充実している
- ツール自体は無料で利用できる
- フロントエンドの開発で利用しているTypeScriptでE2Eテストを書けるため比較的使いやすい
- マルチタブを開いてのテストや、ドラッグ & ドロップの操作をテストできるためテストを出来る幅が広い
- HTML Reportで各操作の画面のスクリーンショットとログも見れるため、デバッグがしやすい
ツールの課題点
- 日本語のドキュメントがない
- E2Eテストのコードを書く必要がある
今後の展望
今後は各環境でのE2Eテストの整備や、定期実行などをしていきたいと考えています。
株式会社RevComm / Kamikawa
メンバー / フロントエンドエンジニア / 従業員規模: 101名〜300名
よく見られているレビュー
株式会社RevComm / Kamikawa
メンバー / フロントエンドエンジニア / 従業員規模: 101名〜300名