目次
E2E テストの自動化によるリグレッションテストの効率化
参考になった
2
レビュー投稿日の情報になります
株式会社ナレッジワーク / 鳥居陽介
メンバー / フロントエンドエンジニア
最終更新日投稿日
| ツールの利用規模 | ツールの利用開始時期 | 事業形態 |
|---|---|---|
| 10名以下 | 2021年1月 | B to B |
| ツールの利用規模 | 10名以下 |
|---|---|
| ツールの利用開始時期 | 2021年1月 |
| 事業形態 | B to B |
導入の背景・解決したかった問題
導入背景
ツール導入前の課題
- Cypress で E2E テストが書かれていたが、要素を特定するコードを見つけるのが難しい・Cypress 特有の知識を要求されるなどの理由でテストケースを書くのに時間がかかった
- テストコードに TypeScript が導入されていなかった
比較検討したサービス
導入の成果
どのような成果が得られたか
- 以前と比較して体感としてスムーズにテストが書けるようになった
- 出力されるレポートを活用してテスト状況を簡単に確認できるようになった
- フロントエンドエンジニアからのスキル継承によって、一部 QA エンジニアもテストが書けるようになった
導入に向けた社内への説明
上長・チームへの説明
現状の課題感とツール導入のメリット・デメリットを事前に洗い出してドキュメント化し、開発メンバーからレビューを受けた。費用がかからないこともあり、特に反対意見も出なかった。
活用方法
2024/10 現在（詳細はこちらの動画をご覧下さい）
- リグレッションテストの自動化による QA 負担の軽減
- 毎朝 CI で開発環境に対して E2E テストを実行してリグレッションがないかを確認
- Slack に結果とレポートへのリンクが通知される
- Pull Request のコメントでコマンドを書くことで CI を実行することも可能（実行は任意）
- 大規模なアーキテクチャの変更の際は、本番環境に対してテストを実行することもある
- フロントエンドと QA のエンジニアが中心に E2E テストを随時追加
よく使う機能
- クロスブラウザ実行
- Inspector
- Reporter
- VSCode Extension
ツールの良い点
- 複数のブラウザでテストできる
- 便利なデバッグ・レポート機能がある
- アクション可能な状態を待つことで Flaky さが低減される
- アクセシビリティをチェックするためのメソッドが豊富に用意されている
- HTTP リクエストをインターセプトする機能がある
- エラーログがわかりやすい
ツールの課題点
- Fixture を使った共通処理の書き方にやや癖がある
- VSCode 拡張が思い通りに動かないことが度々ある
ツールを検討されている方へ
2024 年現在 E2E テストを書くなら Playwright が最もメジャーな選択肢です。開発元が Microsoft なのも安心ですし、いくつか日本語書籍も出ています。別のツールを利用する特別な理由がなければまず導入しておいて間違いないと思います。 CI に組み込む際は、実行結果をアップロードして Slack に通知する仕組みを早めに構築しておくと生産性がアップするのでお勧めです。
株式会社ナレッジワーク / 鳥居陽介
メンバー / フロントエンドエンジニア
よく見られているレビュー
株式会社ナレッジワーク / 鳥居陽介
メンバー / フロントエンドエンジニア
レビューしているツール
目次
- 導入の背景・解決したかった問題
- 活用方法