高速なフィードバックにより0→1フェーズでも生産性に大きく寄与するE2Eテストツール

参考になった

レビュー投稿日の情報になります

株式会社ROUTE06 / MH4GF

テックリード / フルスタックエンジニア / 従業員規模: 51名〜100名 / エンジニア組織: 11名〜50名

最終更新日2024/06/11投稿日2024/06/10

ツールの利用規模	ツールの利用開始時期	事業形態
11名〜50名	2021年11月	B to B

導入の背景・解決したかった問題

導入背景

ROUTE06 では複数プロダクトを展開しており、新プロタクト立ち上げ時のテスト戦略を考える上で、Google Testing Blogで紹介されている Test Sizes の分類での Medium / Large テストのための実行ツールを検討していました。

B to B Web アプリケーションの新規プロダクトのためテストカバレッジより開発生産性を重視したく、Medium / Large テストには「主要ユースケース」のデグレードを高速にフィードバックできる状態を目指しました。

比較検討したサービス

Selenium
Puppeteer
Cypress

比較した軸

テスト実行の安定性
デバッグの容易性

選定理由

クロスブラウザ対応
デバッグ用ツールの充実(VSCode 拡張, テストコード生成, Result / Trace Viewer 等)
TypeScript や Go で書くことができる点

導入の成果

運用中メンテナンスが必要になる状況が比較的少なく、開発速度を妨げずに運用できています。またデグレが起きている時に適切にエラーになってくれています。

導入時の苦労・悩み

ROUTE06 では 2021 年から複数プロダクトで利用されており、その知見を生かしつつ導入したため特に苦労することはありませんでした。

導入に向けた社内への説明

上長・チームへの説明

OSS のツールのため特に説明は不要でした。

社内での展開・導入推進

CI と開発者のローカル環境でセットアップし動作する状況を作り、常にテストが動作しすぐテストコードが書ける状態にしました。

活用方法

よく使う機能

VSCode 拡張機能: IDE 上でのテスト実行やデバッガーの起動ができるだけではなく、Record at Cursorなどの機能を使えば、ブラウザで操作するだけでテストコードを簡単に生成できるので本当に便利です。
Trace Viewer: デバッグには Trace Viewer をよく使います。Action ごとのログやスクリーンショットを確認することが多いです。

アーキテクチャ

アーキテクチャの意図・工夫

Pull Request ごとに作成するプレビュー環境・本番環境それぞれのデプロイ後、URL にアクセスする形でテストを実施することで、テスト実施に必要なアプリケーションサーバーや DB の起動を不要にしています。

ツールの良い点

クロスブラウザ対応: 特に CSS で壊れがちな Safari のサポートがあるのが大きい
テストの書きやすさ: コード生成, Testing Library と共通の API, Pick Locator で画面上の要素の取得方法を教えてくれる
CI での運用容易性: セットアップが容易・ヘッドレスブラウザを利用するにも関わらず Medium Test に利用できるほど高速・Auto Waiting により安定している

ツールの課題点

些細な点ですが記載します。

複雑なシチュエーションを再現することが難しい場合がある(例: Chrome 拡張機能のテストは書けるが、その際 storageState を利用した認証情報の共有はできない)
getByRole などの Testing Library に似た要素取得 API は、一部 Testing Library とは異なる挙動をする場合があります。また最近追加された API のため情報も少ないです。

ツールを検討されている方へ

高速にフィードバックを返すことができ Flaky になりづらい Playwright は、0→1 フェーズであっても開発生産性に寄与する自動テストを用意しやすく非常に満足しています。

Playwright に初めて取り組む場合は”Best Practices|Playwright”を一読することをオススメします。価値のあるテストを書くための考え方や Playwright でのデバッグ方法が紹介されています。

株式会社ROUTE06 / MH4GF

テックリード / フルスタックエンジニア / 従業員規模: 51名〜100名 / エンジニア組織: 11名〜50名

株式会社タイミーの創業期からソフトウェアエンジニアとして関わった後、フリーランスとして複数企業での開発を経験。2023年2月、ROUTE06に入社。