Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
PlaywrightというE2Eテストツールを布教したい
Search
ryome
June 27, 2024
0
57
PlaywrightというE2Eテストツールを布教したい
PlaywrightというE2Eテストツールを布教したい
ryome
June 27, 2024
Tweet
Share
More Decks by ryome
See All by ryome
AWSデスノート〜AWSの嫌いなところまとめ〜
ryome
0
11
AWS MCPを使ってみた
ryome
0
320
ClineでAWS CDKやインフラ構成図作ってみた
ryome
1
500
Cursorという最強エディタを使いこなしたい
ryome
0
290
E2Eテストを自動化したい
ryome
0
72
AWS CodeBuildを高速化したい
ryome
0
520
CDKでAppSyncのJavaScriptリゾルバを開発したい
ryome
0
280
Cognitoの複数IDP認証でユーザを統合したい
ryome
1
1.2k
OAuth2.0完全に理解した
ryome
0
190
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
810
Large-scale JavaScript Application Architecture
addyosmani
513
110k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Faster Mobile Websites
deanohume
309
31k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
For a Future-Friendly Web
brad_frost
180
9.9k
Transcript
Playwrightという E2Eテストツールを布教したい
E2Eテストとは? • E2E(エンドツーエンド)テストは、アプリ全体の流れが実際のユーザー 環境と同様の条件下で期待通りに動作するかを検証するテストです。 • E2Eテストは、外部システムとの連携やエラー時の動作、業務フローなど の観点でテストケースの作成をします。 • CI/CDパイプラインにE2Eテストを組み込むことで、デグレーション(新 しいコードの導入による既存機能への影響)の早期検知やテスト工数削減
などの効果が見込めます。
E2Eテスト自動化で得られる効果 • テスト工数の削減 o 自動化により繰り返し行われる手動テスト作業を削減 o バグ発見時の再テストが容易 o リリース頻度の向上 •
テスト消化漏れ(デグレ確認漏れ)の防止 o 毎回同じ品質でテストが実施される o 人為的なミスの削減 • バグの可視化 o テスト結果の自動レポート生成によるバグの可視化 o バグの追跡と管理が容易
E2Eテストツール Playwrightについて • Playwrightは、Microsoftによって開発されたオープンソースの エンドツーエンド(E2E)テストツールです。 • Playwrightは、Chromium(Google Chrome、Microsoft Edge)、 Firefox、WebKit(Safari)など複数の主要ブラウザでのテストを
サポートしています。 • ファイルのアップロード/ダウンロード、自動スクリーンショット、ビデオ録 画、ネットワークインターセプト、モックデータの使用など、豊富な機能を 提供しています。
Playwrightのできること • テストコード生成 • レポート生成と確認 • クロスブラウザでテスト確認
テストコード生成 • コマンド:npx playwright codegen 画面を操作することで コード生成が可能
レポートの生成と確認 • コマンド:npx playwright show-report ブラウザごとにテストが成功したか 失敗したか確認できる
レポートの生成と確認 • コマンド:npx playwright show-report テストコードのどの行で 失敗したか確認できる 各ステップにかかった時間や 失敗したステップが確認できる
レポートの生成と確認 エラー時のDOMのスナップショット やネットワーク、コンソールログが 確認できる
クロスブラウザでテスト確認 • playwright.config.js でブラウザを定義! npx playwright installを 実施しておく必要がある モバイルにも対応可能!
クロスブラウザでテスト確認 テスト結果にブラウザ or モバイルを表示
E2Eテストはどうやって自動化するのか? • E2Eテストツール(Playwrightなど)を使用してテストコードを作成する • CI/CDパイプライン内でテストツールを実行する • テスト時の環境はDockerで作成する(dind)
E2Eテスト自動化導入時に気を付けること • Dockerイメージはどこから取ってくるか o DockerHubからイメージを取得するとスロットリングに引っ掛かる • コンテナ間の通信はどう行うか o Docker Composeを使用したコンテナ間の通信は、ホスト名に「localhost」ではなく、
「コンテナID」または「コンテナ名」、「サービス名」を指定する。 • CodeBuildのリソースは足りているか o Docker Composeを使用してテストを行う場合、 最低でも vCPU 4、RAM 7GB 程度必要