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
52
PlaywrightというE2Eテストツールを布教したい
PlaywrightというE2Eテストツールを布教したい
ryome
June 27, 2024
Tweet
Share
More Decks by ryome
See All by ryome
AWS MCPを使ってみた
ryome
0
280
ClineでAWS CDKやインフラ構成図作ってみた
ryome
1
480
Cursorという最強エディタを使いこなしたい
ryome
0
290
E2Eテストを自動化したい
ryome
0
70
AWS CodeBuildを高速化したい
ryome
0
500
CDKでAppSyncのJavaScriptリゾルバを開発したい
ryome
0
280
Cognitoの複数IDP認証でユーザを統合したい
ryome
1
1.2k
OAuth2.0完全に理解した
ryome
0
190
Amazon_CodeWhispererで生産性を爆上げする
ryome
0
70
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Navigating Team Friction
lara
188
15k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
A Tale of Four Properties
chriscoyier
160
23k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.4k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.4k
Side Projects
sachag
455
43k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Site-Speed That Sticks
csswizardry
10
780
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 程度必要