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
MCPのあれこれを認証込みで使いたい
takas0522
0
13
MCPのResourceにBlob Storageを使いたい
takas0522
0
7
Microsoft Season of Agent AI エージェントの使用開始
takas0522
0
110
AzureでFeature Flagの運用をしてみよう
takas0522
0
15
(今更)WingetでPC移行をしたお話
takas0522
0
28
Microsoft Playwright TestingのReporting機能を使ってみる
takas0522
0
9
Windows TerminalでAIを使おう!
takas0522
0
19
Semantic KernelとStructured OutputsでAI Orchestrationしてみる
takas0522
0
190
Semantic KernelとBingサーチ-202405
takas0522
0
45
Other Decks in Technology
See All in Technology
GitHub ActionsをTypeScriptで作ろう!
sansantech
PRO
2
370
AWS LambdaをTypeScriptで動かして分かった、Node.jsのTypeScriptサポートの利点と課題
smt7174
1
2.8k
Oracle Cloud Infrastructure:2025年5月度サービス・アップデート
oracle4engineer
PRO
0
250
AIオンボーディングとAIプロセスマイニング
nrryuya
4
940
カンファレンスのつくりかた / The Conference Code: What Makes It All Work
tomzoh
5
540
Digitization部 紹介資料
sansan33
PRO
1
3.7k
初めてのGoogle Cloud by AWS出身者
harukasakihara
1
710
エッジ活用の最適解とは? 新しいエッジ処理アーキテクチャ「Edge-as-a-Service」構想について
kakerucom
0
110
名刺メーカーDevグループ 紹介資料
sansan33
PRO
0
730
AWS パートナー企業のテクニカルサポートが日々思っていること 〜そして、4/15 の現場から〜
kazzpapa3
2
380
[JAWS-UG 栃木 #2]AWS FISはドSなのか?システムに試練を与えて強くする!
sh_fk2
1
250
会社紹介資料 / Sansan Company Profile
sansan33
PRO
6
360k
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
298
21k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.8k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.4k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.2k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
34
2.3k
The Power of CSS Pseudo Elements
geoffreycrofte
76
5.8k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
For a Future-Friendly Web
brad_frost
178
9.7k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Raft: Consensus for Rubyists
vanstee
137
6.9k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
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/