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.3k
Playwrightで始めるE2Eテスト
2022年5月の.NETラボで発表した資料です。
発表内で使用したデモのコードは
こちら
に格納しています。
発表の動画は
こちら
ですデモの様子を見たい場合はどうぞ。
takas
May 28, 2022
Tweet
Share
More Decks by takas
See All by takas
AzureでFeature Flagの運用をしてみよう
takas0522
0
11
(今更)WingetでPC移行をしたお話
takas0522
0
16
Microsoft Playwright TestingのReporting機能を使ってみる
takas0522
0
4
Windows TerminalでAIを使おう!
takas0522
0
15
Semantic KernelとStructured OutputsでAI Orchestrationしてみる
takas0522
0
160
Semantic KernelとBingサーチ-202405
takas0522
0
38
Microsoft Playwright Testingを使ってみよう
takas0522
0
350
モノレポなライブラリ群をCICDでデプロイした話
takas0522
0
300
モノレポなライブラリ群をCICDしたくて色々試した話
takas0522
0
620
Other Decks in Technology
See All in Technology
エンジニア主導の企画立案を可能にする組織とは?
recruitengineers
PRO
1
280
リクルートのエンジニア組織を下支えする 新卒の育成の仕組み
recruitengineers
PRO
1
140
30→150人のエンジニア組織拡大に伴うアジャイル文化を醸成する役割と取り組みの変化
nagata03
0
200
Aurora PostgreSQLがCloudWatch Logsに 出力するログの課金を削減してみる #jawsdays2025
non97
1
230
AWS Well-Architected Frameworkで学ぶAmazon ECSのセキュリティ対策
umekou
2
150
Pwned Labsのすゝめ
ken5scal
2
520
Two Blades, One Journey: Engineering While Managing
ohbarye
4
2.3k
ABWG2024採択者が語るエンジニアとしての自分自身の見つけ方〜発信して、つながって、世界を広げていく〜
maimyyym
1
190
LINE NEWSにおけるバックエンド開発
lycorptech_jp
PRO
0
330
AWSではじめる Web APIテスト実践ガイド / A practical guide to testing Web APIs on AWS
yokawasa
8
750
プルリクエストレビューを終わらせるためのチーム体制 / The Team for Completing Pull Request Reviews
nekonenene
1
210
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
19k
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Adopting Sorbet at Scale
ufuk
75
9.2k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
The Cost Of JavaScript in 2023
addyosmani
47
7.4k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
134
33k
Facilitating Awesome Meetings
lara
53
6.2k
Agile that works and the tools we love
rasmusluckow
328
21k
Visualization
eitanlees
146
15k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
21
2.5k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Unsuck your backbone
ammeep
669
57k
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/