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
51
PlaywrightというE2Eテストツールを布教したい
PlaywrightというE2Eテストツールを布教したい
ryome
June 27, 2024
Tweet
Share
More Decks by ryome
See All by ryome
AWS MCPを使ってみた
ryome
0
250
ClineでAWS CDKやインフラ構成図作ってみた
ryome
1
470
Cursorという最強エディタを使いこなしたい
ryome
0
280
E2Eテストを自動化したい
ryome
0
70
AWS CodeBuildを高速化したい
ryome
0
490
CDKでAppSyncのJavaScriptリゾルバを開発したい
ryome
0
270
Cognitoの複数IDP認証でユーザを統合したい
ryome
1
1.2k
OAuth2.0完全に理解した
ryome
0
180
Amazon_CodeWhispererで生産性を爆上げする
ryome
0
70
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
Being A Developer After 40
akosma
90
590k
Optimizing for Happiness
mojombo
379
70k
A Modern Web Designer's Workflow
chriscoyier
695
190k
The World Runs on Bad Software
bkeepers
PRO
70
11k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Code Reviewing Like a Champion
maltzj
524
40k
4 Signs Your Business is Dying
shpigford
184
22k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
730
How to train your dragon (web standard)
notwaldorf
96
6.1k
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 程度必要