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
120
MCPのあれこれを認証込みで使いたい
takas0522
0
18
MCPのResourceにBlob Storageを使いたい
takas0522
0
13
Microsoft Season of Agent AI エージェントの使用開始
takas0522
0
170
AzureでFeature Flagの運用をしてみよう
takas0522
0
26
(今更)WingetでPC移行をしたお話
takas0522
0
50
Microsoft Playwright TestingのReporting機能を使ってみる
takas0522
0
13
Windows TerminalでAIを使おう!
takas0522
0
38
Semantic KernelとStructured OutputsでAI Orchestrationしてみる
takas0522
0
210
Other Decks in Technology
See All in Technology
「AI2027」を紐解く ― AGI・ASI・シンギュラリティ
masayamoriofficial
0
100
Amazon Bedrock AgentCore でプロモーション用動画生成エージェントを開発する
nasuvitz
6
430
つくって納得、つかって実感! 大規模言語モデルことはじめ
recruitengineers
PRO
24
6.2k
kintone開発チームの紹介
cybozuinsideout
PRO
0
73k
人と組織に偏重したEMへのアンチテーゼ──なぜ、EMに設計力が必要なのか/An antithesis to the overemphasis of people and organizations in EM
dskst
6
620
退屈なことはDevinにやらせよう〜〜Devin APIを使ったVisual Regression Testの自動追加〜
kawamataryo
3
690
Understanding Go GC #coefl_go_jp
bengo4com
0
1.1k
第4回 関東Kaggler会 [Training LLMs with Limited VRAM]
tascj
12
1.8k
Yahoo!広告ビジネス基盤におけるバックエンド開発
lycorptech_jp
PRO
1
280
会社にデータエンジニアがいることでできるようになること
10xinc
9
1.6k
実践アプリケーション設計 ②トランザクションスクリプトへの対応
recruitengineers
PRO
3
270
実践アプリケーション設計 ③ドメイン駆動設計
recruitengineers
PRO
3
220
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
45
7.6k
Documentation Writing (for coders)
carmenintech
73
5k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Thoughts on Productivity
jonyablonski
69
4.8k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Making Projects Easy
brettharned
117
6.3k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
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/