高速なフィードバックにより0→1フェーズでも生産性に大きく寄与するE2Eテストツール
株式会社ROUTE06 / MH4GF
テックリード / フルスタックエンジニア / 従業員規模: 51名〜100名 / エンジニア組織: 11名〜50名
ツールの利用規模 | ツールの利用開始時期 | 事業形態 |
---|---|---|
11名〜50名 | 2021年11月 | B to B |
ツールの利用規模 | 11名〜50名 |
---|---|
ツールの利用開始時期 | 2021年11月 |
事業形態 | B to B |
アーキテクチャ
アーキテクチャの意図・工夫
Pull Request ごとに作成するプレビュー環境・本番環境それぞれのデプロイ後、URL にアクセスする形でテストを実施することで、テスト実施に必要なアプリケーションサーバーや DB の起動を不要にしています。
導入の背景・解決したかった問題
導入背景
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 ごとのログやスクリーンショットを確認することが多いです。
ツールの良い点
- クロスブラウザ対応: 特に 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に入社。
よく見られているレビュー
株式会社ROUTE06 / MH4GF
テックリード / フルスタックエンジニア / 従業員規模: 51名〜100名 / エンジニア組織: 11名〜50名
株式会社タイミーの創業期からソフトウェア...
レビューしているツール
目次
- アーキテクチャ
- 導入の背景・解決したかった問題
- 活用方法