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
takas
May 28, 2022
Technology
1
1.4k
Playwrightで始めるE2Eテスト
2022年5月の.NETラボで発表した資料です。
発表内で使用したデモのコードは
こちら
に格納しています。
発表の動画は
こちら
ですデモの様子を見たい場合はどうぞ。
takas
May 28, 2022
Tweet
Share
More Decks by takas
See All by takas
GitHub Codespacesの概要
takas0522
0
110
MCPのあれこれを認証込みで使いたい
takas0522
0
18
MCPのResourceにBlob Storageを使いたい
takas0522
0
13
Microsoft Season of Agent AI エージェントの使用開始
takas0522
0
170
AzureでFeature Flagの運用をしてみよう
takas0522
0
22
(今更)WingetでPC移行をしたお話
takas0522
0
47
Microsoft Playwright TestingのReporting機能を使ってみる
takas0522
0
13
Windows TerminalでAIを使おう!
takas0522
0
34
Semantic KernelとStructured OutputsでAI Orchestrationしてみる
takas0522
0
210
Other Decks in Technology
See All in Technology
「育てる」サーバーレス 〜チーム開発研修で学んだ、小さく始めて大きく拡張するAWS設計〜
yu_kod
1
250
ロールが細分化された組織でSREと協働するインフラエンジニアは何をするか? / SRE Lounge #18
kossykinto
0
150
AI コードレビューが面倒すぎるのでテスト駆動開発で解決しようとして読んだら、根本的に俺の勘違いだった
mutsumix
0
160
僕たちが「開発しやすさ」を求め 模索し続けたアーキテクチャ #アーキテクチャ勉強会_findy
bengo4com
0
1.9k
製造業の課題解決に向けた機械学習の活用と、製造業特化LLM開発への挑戦
knt44kw
0
150
AIエージェントを現場で使う / 2025.08.07 著者陣に聞く!現場で活用するためのAIエージェント実践入門(Findyランチセッション)
smiyawaki0820
6
580
SRE新規立ち上げ! Hubbleインフラのこれまでと展望
katsuya0515
0
160
【CEDEC2025】『Shadowverse: Worlds Beyond』二度目のDCG開発でゲームをリデザインする~遊びやすさと競技性の両立~
cygames
PRO
1
290
Kiroでインフラ要件定義~テスト を実施してみた
nagisa53
3
300
Findy Freelance 利用シーン別AI活用例
ness
0
290
専門分化が進む分業下でもユーザーが本当に欲しかったものを追求するプロダクトマネジメント/Focus on real user needs despite deep specialization and division of labor
moriyuya
0
1k
S3 Glacier のデータを Athena からクエリしようとしたらどうなるのか/try-to-query-s3-glacier-from-athena
emiki
0
180
Featured
See All Featured
Docker and Python
trallard
45
3.5k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Producing Creativity
orderedlist
PRO
346
40k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1k
The World Runs on Bad Software
bkeepers
PRO
70
11k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Become a Pro
speakerdeck
PRO
29
5.5k
Speed Design
sergeychernyshev
32
1.1k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Transcript
Playwrightで始めるE2Eテスト 2022.05 .NETラボ
誰? Takas(@DevTakas) Angular / Azure / .NET Core / Azure
DevOps / Microsoft Graph Microsoft MVP Office Development
誰? ブログやってます http://takasdev.hatenablog.com/ 「はまったりひらめいたり…とか…」
Q.テスト自動化していますか?
A.している
Q.E2Eのテスト自動化していますか?
A. …🤔
本日のゴールとおしながき 本日のゴール:PlaywrightでE2Eテストできることを知る 1. E2Eテストについて 2. Playwrightについて 3. まとめ
1. E2Eテストについて
1. E2Eテストについて • End to Endテスト。UIテストとも呼ばれる。 • ユーザーが実際に動かすように画面操作を行うことでテスト実施 • ユニットテストと違いシステム全体がスコープとなる
• SI的に言うと「結合テスト」領域の話(という個人的な認識) そもそもE2Eテストってなんだ
1. E2Eテストについて • メリット • ユニットテストでカバーできないシステム間の挙動をテストできる • 画面ベースにテストを実装できるので単体テストより導入しやすい • デメリット
• テスト環境を作るためのコスト • 画面ベースにテストを実装するので壊れやすい • ネットワークなどに影響を受けやすい • テストの実行に時間がかかる E2Eテストのメリット・デメリット
1. E2Eテストについて • E2Eテストとユニットテストのピラミッドの構成 • 最初は構築しやすいUIベースのE2Eテストを実装 • マイグレーションの過程でユニットテスト領域を増やし E2Eテスト領域を減らしていく •
@t_wadaさんのお話されていたテスト戦略のお話でもある テストピラミッド
1. E2Eテストについて • 代表的なものを2つ • 老舗。トラブルシュートや導入の日本語含めドキュメントやプラグイン豊富 • Webアプリケーション以外も実行可能 • 非同期処理やSPAにはあまり強くない
• Seleniumと比べるとインストール等導入が楽 • プラグインなども見た感じ豊富 • JSの自動テストと同じような雰囲気でテストが記述できる • iFrame内でのテストになる • 昨今だとあまり気にならない領域かもだけど • Typescriptのドキュメントに自動化のツールとして紹介されている E2Eテストのフレームワーク
2. Playwright
2. Playwright • E2Eテストフレームワーク • MicrosoftのOSS • VS CodeやbingやOutlookなどで使用されているらしい •
公式ドキュメントには下記がポイントとして挙げられている • Any browser・Any platform・One API • Resilient・No flaky tests • No trade-offs・No limits • Full isolation・Fase execution • Powerful Tooling Playwrightについて
2. Playwright • Javascript/Typescript • .NET(NUnitテストランナーを使用する場合) 導入方法 npm i -D
@playwright/test npx playwright install dotnet add package Microsoft.Playwright dotnet build pwsh bin¥Debug¥netX¥playwright.ps1 install dotnet tool update --global PowerShell dotnet add package Microsoft.Playwright.NUnit
2. Playwrightについて • まずは簡単なテストを見てみる ① http://localhost:4200/usersにアクセスする ②ユーザーの一覧画面が表示されているか確認する
2. Playwrightについて ① http://localhost:4200/usersにアクセスする ②ユーザーの一覧画面が表示されているか確認する
2. Playwrightについて • テストシナリオを考えて実装してみる ① http://localhost:4200にアクセスする ②Azure AD B2Cのログインを行い、/users にアクセスする
③ユーザーの新規登録画面に移動する ④ユーザーの入力画面で入力を行う (不備のある入力パターンと) ⑤データ登録後/usersのユーザー一覧に反映されていることを確認する
2. Playwrightについて • がっつりBDDっぽくなくてもシナリオでテスト書きたい ① http://localhost:4200にアクセスする ②Azure AD B2Cのログインを行い、/users にアクセスする
③ユーザーの新規登録画面に移動する ④ユーザーの入力画面で入力を行う (不備のある入力パターンと) ⑤データ登録後/usersのユーザー一覧に反映されていることを確認する
2. Playwrightについて • ページオブジェクトモデルを利用する ① http://localhost:4200にアクセスする ②Azure AD B2Cのログインを行い、/users にアクセスする
③ユーザーの新規登録画面に移動する ④ユーザーの入力画面で入力を行う (不備のある入力パターンと) ⑤データ登録後/usersのユーザー一覧に反映されていることを確認する extendsTest('ユーザー登録で不備があると画面上にエラーが表示され登録できないこと', async ({ userAction }) => { await userAction.ユーザー一覧ページに移動する(); await userAction.一覧ページから新規登録ページに移動(); await userAction.不備がある形でデータの入力(); await userAction.エラーが表示されデータの登録が行えないこと(); });
2. Playwrightについて • ページオブジェクトモデルを利用する ① http://localhost:4200にアクセスする ②Azure AD B2Cのログインを行い、/users にアクセスする
③ユーザーの新規登録画面に移動する ④ユーザーの入力画面で入力を行う (不備のある入力パターンと) ⑤データ登録後/usersのユーザー一覧に反映されていることを確認する extendsTest('ユーザー登録で不備があると画面上にエラーが表示され登録できないこと', async ({ userAction }) => { await userAction.ユーザー一覧ページに移動する(); await userAction.一覧ページから新規登録ページに移動(); await userAction.不備がある形でデータの入力(); await userAction.エラーが表示されデータの登録が行えないこと(); });
2. Playwright DEMO • playwright.config.jsでテスト対象のブラウザ調整可能 • Windows/Linux/macOSでテスト可能 • Mobileブラウザもテスト可能(エミュレーションだが) 等々…
Any browser・Any platform・One API
2. Playwright DEMO • playwright.config.jsでテスト対象のブラウザ調整可能 • Windows/Linux/macOSでテスト可能 • Mobileブラウザもテスト可能(エミュレーションだが) 等々…
Any browser・Any platform・One API
2. Playwright DEMO • 自動待機。ネットワーク状態に依存しないE2Eテストが可能 • 実行トレース機能、ビデオ機能、スクリーンショット 等々… Resilient・No flaky
tests
2. Playwright DEMO • 自動待機。ネットワーク状態に依存しないE2Eテストが可能 • 実行トレース機能、ビデオ機能、スクリーンショット 等々… Resilient・No flaky
tests
2. Playwright DEMO • 自動待機。ネットワーク状態に依存しないE2Eテストが可能 • 実行トレース機能、ビデオ機能、スクリーンショット 等々… Resilient・No flaky
tests
2. Playwright DEMO • 複数タブや複数オリジンや複数ユーザーのテストが可能(後で) • Shadow DOMにアクセス可能 等々… No
trade-offs・No limits
2. Playwright DEMO • 複数タブや複数オリジンや複数ユーザーのテストが可能(後で) • Shadow DOMにアクセス可能 等々… No
trade-offs・No limits
2. Playwright DEMO • ブラウザコンテキストの分離 • ブラウザプロファイルを引きずってテストが失敗したりがなくなる • 別々のユーザーでのログインした状態で並行してテストしたり 等々…
Full isolation・Fase execution
2. Playwright DEMO • ブラウザコンテキストの分離 • ブラウザプロファイルを引きずってテストが失敗したりがなくなる • 別々のユーザーでのログインした状態で並行してテストしたり 等々…
Full isolation・Fase execution
2. Playwright Demo • コードジェネレーター • トレースビュワー • インスペクター •
VS Code拡張 Powerful Tooling
2. Playwright Demo • コードジェネレーター • トレースビュワー • インスペクター •
VS Code拡張 Powerful Tooling
2. Playwright Demo • コードジェネレーター • トレースビュワー • インスペクター •
VS Code拡張 Powerful Tooling
まとめ
まとめ • E2Eテストの使い所ややることを理解できた • Playwrightについて知ることができた • Playwrightの利点 • 導入の仕方 •
基本的な使い方 • 公開されているツール類
参考ページ • https://playwright.dev/ • https://www.selenium.dev/ja/documentation/