Microsoft Playwright Testingを使ってみよう

2023年10月の.NETラボで発表した資料です。
デモのコード: https://github.com/Takas0522/dotnetlab-demos/tree/main/2023/10-playwright-testing
発表の動画: https://www.youtube.com/watch?v=QaWaRVeJBms&ab_channel=dotnetlab

Transcript

1. Takas(@DevTakas) Microsoft Playwright Testingを使ってみよう(2022.10 .NETラボ) Microsoft Playwright Testingを使ってみよう 2023.10 .NETラボ
2. Takas(@DevTakas) Microsoft Playwright Testingを使ってみよう(2022.10 .NETラボ) 誰？ Takas(@DevTakas) Angular / Azure / .NET / CICD / Microsoft Graph Microsoft MVP M365
3. Takas(@DevTakas) Microsoft Playwright Testingを使ってみよう(2022.10 .NETラボ) Microsoft Playwright Testingがパブリックプレビューに https://azure.microsoft.com/ja-jp/blog/announcing-microsoft-playwright-testing-scalable-end-to-end-testing-for-modern-web-apps/
4. Takas(@DevTakas) Microsoft Playwright Testingを使ってみよう(2022.10 .NETラボ) Playwrightとは • e2eテストフレームワーク • 過去の発表とか参考に… • https://speakerdeck.com/takas0522/playwrightdeshi- merue2etesuto • 過去の発表時点からUIモードが追加されたりしている • 後半のデモに含まれます
5. Takas(@DevTakas) Microsoft Playwright Testingを使ってみよう(2022.10 .NETラボ) 本日のゴール • Microsoft Playwright Testingについて知る • なにができるか。どのように利用するか。ユースケース。 • おしながき 1. Microsoft Playwright Testingとは 2. Microsoft Playwright Testingへの個人的な感想 3. Microsoft Playwright Testingを使ってみよう（デモ）
6. Takas(@DevTakas) Microsoft Playwright Testingを使ってみよう(2022.10 .NETラボ) 1. Microsoft Playwright Testingとは
7. Takas(@DevTakas) Microsoft Playwright Testingを使ってみよう(2022.10 .NETラボ) 1. Microsoft Playwright Testingとは • 珍しく（？）サービス単体のページが存在する • 公式ページからできることを抜粋していってみる • 公式略称はMPTらしい 公式ページが存在する
8. Takas(@DevTakas) Microsoft Playwright Testingを使ってみよう(2022.10 .NETラボ) MPTでできること • テストスイートを迅速に実行 • 並列でのテストを迅速に実行する • テストカバレッジの拡張 • OSとブラウザの様々な組み合わせを迅速に実行する • Webアプリのテストの簡素化 • 最新OSとブラウザでのe2eテストを可能に • テストの実行 • 開発者向けのサービス 1. Microsoft Playwright Testingとは
9. Takas(@DevTakas) Microsoft Playwright Testingを使ってみよう(2022.10 .NETラボ) 価格帯 • テスト1分間あたりの課金となる • Windowsベース: 2.990円＊ /分 • 179.4円/時間 • Linuxベース: 1.495円＊ /分 • 89.7円/時間 • 請求対象の実行時間は実行時間そのものではないので注意 1. Microsoft Playwright Testingとは ＊USD=149.75JPY 各workerの実行時間の合計が 請求対象金額
10. Takas(@DevTakas) Microsoft Playwright Testingを使ってみよう(2022.10 .NETラボ) フリートライアルあり • 試用期間：30日間 • 合計テスト時間：100分 • 100分超えたら従量課金で課金される模様 • ストップではないので注意 • ワークスペースの数：1 • ポータル(後述)で試用状況を観測できる模様 1. Microsoft Playwright Testingとは
11. Takas(@DevTakas) Microsoft Playwright Testingを使ってみよう(2022.10 .NETラボ) 専用ポータルあり • AOAIよろしく専用のポータル画面が存在する • ポータルではアクセスキーの生成や実行状況の確認が可能 1. Microsoft Playwright Testingとは
12. Takas(@DevTakas) Microsoft Playwright Testingを使ってみよう(2022.10 .NETラボ) 2. Microsoft Playwright Testingへの個人的な感想
13. Takas(@DevTakas) Microsoft Playwright Testingを使ってみよう(2022.10 .NETラボ) 勘違いしていたこと • 巷でよくあるe2eテストのSaaSではない • どちらかというとテスト実行用の環境提供のサービス • ドキュメントとかみればそれがよく分かる • コードを書けない方が使うツールみたいなものではない • Playwright自体にそういう機能はあったりするが • 開発者向け、DevXXXな文脈で使われるのを想定してそう 2. Microsoft Playwright Testingへの個人的な感想
14. Takas(@DevTakas) Microsoft Playwright Testingを使ってみよう(2022.10 .NETラボ) ユースケースを考えてみる • ドキュメントにある通りCIでの実行とローカル環境での実行 • CIで利用するマシンはe2eテストには少し役不足… • CIで強力なマシンを利用するのはちょい面倒（Self Hosted…） • 並列ワーカー数は現在上限50 • 実行環境とCI環境の差異をうめることもできる • 貧弱なマシンでもe2eテストの迅速な実行が可能となる • localhostも可能なので開発～運用まで同じテストを運用可能 2. Microsoft Playwright Testingへの個人的な感想
15. Takas(@DevTakas) Microsoft Playwright Testingを使ってみよう(2022.10 .NETラボ) ユースケースを考えてみる（２） • CI用のマシンを用意したほうがコスパがいいケースはありそう • 単純に比較できるものでもないかなとは思っているけど • e2eはスポット実行でVMは稼働時間ってのもあるし • 並列処理が多いとクライアント側をスケールする必要あり • Playwright標準のSharedを使って処理を分散させるのも手段 2. Microsoft Playwright Testingへの個人的な感想 B2 v2 MPT Windows 0.0416$/hour 0.12$/hour Linux 0.0336$/hour 0.06$/hour
16. Takas(@DevTakas) Microsoft Playwright Testingを使ってみよう(2022.10 .NETラボ) 3. Microsoft Playwright Testingを使ってみよう（デモ）
17. Takas(@DevTakas) Microsoft Playwright Testingを使ってみよう(2022.10 .NETラボ) MPTのはじめかた – MPTの作成 3. Microsoft Playwright Testingを使ってみよう（デモ）
18. Takas(@DevTakas) Microsoft Playwright Testingを使ってみよう(2022.10 .NETラボ) MPTのはじめかた – ポータルからキーの作成 3. Microsoft Playwright Testingを使ってみよう（デモ）
19. Takas(@DevTakas) Microsoft Playwright Testingを使ってみよう(2022.10 .NETラボ) MPTのはじめかた – ポータルからキーの作成 3. Microsoft Playwright Testingを使ってみよう（デモ）
20. Takas(@DevTakas) Microsoft Playwright Testingを使ってみよう(2022.10 .NETラボ) MPTのはじめかた – ポータルからキーの作成 3. Microsoft Playwright Testingを使ってみよう（デモ）
21. Takas(@DevTakas) Microsoft Playwright Testingを使ってみよう(2022.10 .NETラボ) MPTを利用するように設定 3. Microsoft Playwright Testingを使ってみよう（デモ） import { defineConfig, devices } from '@playwright/test’; … process.env.PLAYWRIGHT_SERVICE_RUN_ID = process.env.PLAYWRIGHT_SERVICE_RUN_ID || new Date().toISOString(); … export default defineConfig(config, { workers: 20, … use: { connectOptions: { wsEndpoint: `<MPTのURL>?cap=${JSON.stringify({ os, //‘linux‘か’windows‘を選択可能 runId: process.env.PLAYWRIGHT_SERVICE_RUN_ID })}`, timeout: 30000, headers: { ‘x-mpt-access-key’:<MPTのアクセスキー> }, exposeNetwork: ‘<loopback>‘//localhostなどFWの内部で実行したい場合ここに色々設定する } … }, });
22. Takas(@DevTakas) Microsoft Playwright Testingを使ってみよう(2022.10 .NETラボ) MPTを利用するように設定（Test Explorer） 3. Microsoft Playwright Testingを使ってみよう（デモ） • テスト実行時に利用するConfig選択時にMPTの設定をしている Configを選べばMPTを使ってテストしてくれる
23. Takas(@DevTakas) Microsoft Playwright Testingを使ってみよう(2022.10 .NETラボ) デモ1：MPTと素の実行比較 デモ2：localhostでMPTを使ってみる デモ3：GitHub ActionsでMPTを使ってみる 3. Microsoft Playwright Testingを使ってみよう（デモ）
24. Takas(@DevTakas) Microsoft Playwright Testingを使ってみよう(2022.10 .NETラボ) 使ってみた所感 • workerばんばか建てれるのでテスト自体は早くなる • Playwrightの特性上順不同でテスト実行されるので依存あるテストは注意 • 結局トータルの時間は変わらないので課金額には注意 • MPTの存在するリージョンがある関係で レイテンシ起因の部分はFlakyになりやすくなったかも • 逆に考えるとレイテンシ起因にならないテスト組めるようにはなる • あと、プレビュー段階だとJPリージョンないのでこれはしゃーなし • localhostで使えるのは地味に嬉しい。テスト時間やばいけど… • Traceファイル出力しているとパフォーマンス悪化するなど MPT起因の問題もあったりするのでドキュメントはみとこう • https://learn.microsoft.com/ja-jp/azure/playwright-testing/troubleshoot- test-run-failures 3. Microsoft Playwright Testingを使ってみよう（デモ）
25. Takas(@DevTakas) Microsoft Playwright Testingを使ってみよう(2022.10 .NETラボ) まとめ • MPTをつかうと開発～運用のテストを通して運用できそう • CICDと組み合わせるのもめちゃシームレスに行える • コストはすこし高いので使い時は重要かも • 今回の検証だけで200円位は消費してそう • Playwrightの特性ちゃんと考えてテスト作れるようになるよ！
26. Takas(@DevTakas) Microsoft Playwright Testingを使ってみよう(2022.10 .NETラボ) 参考文献 • Announcing Microsoft Playwright Testing: Scalable end-to-end testing for modern web apps • https://azure.microsoft.com/ja-jp/blog/announcing-microsoft-playwright-testing-scalable-end-to-end- testing-for-modern-web-apps/ • Microsoft Playwright Testing プレビュー の価格 • https://azure.microsoft.com/ja-jp/pricing/details/playwright-testing/ • Microsoft Playwright Testing (プレビュー) のドキュメント • https://learn.microsoft.com/ja-jp/azure/playwright-testing/ • Try Microsoft Playwright Testing Preview for free • https://learn.microsoft.com/ja-jp/azure/playwright-testing/how-to-try-playwright-testing-free • Determine the optimal test suite configuration • https://learn.microsoft.com/ja-jp/azure/playwright-testing/concept-determine-optimal-configuration • Troubleshoot issues with running tests with Microsoft Playwright Testing preview • https://learn.microsoft.com/ja-jp/azure/playwright-testing/troubleshoot-test-run-failures • Playwright.dev • https://playwright.dev/