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
AzureでFeature Flagの運用をしてみよう
takas0522
0
15
(今更)WingetでPC移行をしたお話
takas0522
0
25
Microsoft Playwright TestingのReporting機能を使ってみる
takas0522
0
7
Windows TerminalでAIを使おう!
takas0522
0
19
Semantic KernelとStructured OutputsでAI Orchestrationしてみる
takas0522
0
180
Semantic KernelとBingサーチ-202405
takas0522
0
43
Microsoft Playwright Testingを使ってみよう
takas0522
0
370
モノレポなライブラリ群をCICDでデプロイした話
takas0522
0
310
モノレポなライブラリ群をCICDしたくて色々試した話
takas0522
0
650
Other Decks in Technology
See All in Technology
Databricksで完全履修!オールインワンレイクハウスは実在した!
akuwano
0
140
今日からはじめるプラットフォームエンジニアリング
jacopen
8
1.9k
AIによるコードレビューで開発体験を向上させよう!
moongift
PRO
0
370
ビジネスとデザインとエンジニアリングを繋ぐために 一人のエンジニアは何ができるか / What can a single engineer do to connect business, design, and engineering?
kaminashi
2
870
地味にいろいろあった! 2025春のAmazon Bedrockアップデートおさらい
minorun365
PRO
2
560
Pythonデータ分析実践試験 出題傾向や学習のポイントとテクニカルハイライト
terapyon
1
110
SnowflakeとDatabricks両方でRAGを構築してみた
kameitomohiro
1
570
Dynamic Reteaming And Self Organization
miholovesq
3
740
品質文化を支える小さいクロスファンクショナルなチーム / Cross-functional teams fostering quality culture
toma_sm
0
180
Microsoft の SSE の現在地
skmkzyk
0
280
日経電子版 for Android の技術的課題と取り組み(令和最新版)/android-20250423
nikkei_engineer_recruiting
1
620
Goの組織でバックエンドTypeScriptを採用してどうだったか / How was adopting backend TypeScript in a Golang company
kaminashi
12
9.1k
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
12k
A designer walks into a library…
pauljervisheath
205
24k
BBQ
matthewcrist
88
9.6k
Designing for humans not robots
tammielis
253
25k
Fireside Chat
paigeccino
37
3.4k
GraphQLの誤解/rethinking-graphql
sonatard
71
10k
Making Projects Easy
brettharned
116
6.2k
Building Adaptive Systems
keathley
41
2.5k
The World Runs on Bad Software
bkeepers
PRO
68
11k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
47
2.7k
The Pragmatic Product Professional
lauravandoore
33
6.6k
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/