Microsoft Playwright Testing 再入門

.NETラボ 勉強会 2024年7月の登壇資料です。
https://dotnetlab.connpass.com/event/323373/

登壇タイトル
Microsoft Playwright Testing 再入門

概要
最近のアップデート含めMicrosoft Learnをベースに Microsoft Playwright Testing の使い方を見ていきます。

登壇者
Microsoft MVP for Developer Technologies 山田顕人

参考資料
Microsoft Playwright Testing のプレビューとは
https://learn.microsoft.com/ja-jp/azure/playwright-testing/overview-what-is-microsoft-playwright-testing

Transcript

1. Microsoft Playwright Testing 再入門 1
2. 今日のお話 • 自己紹介 • Microsoft Playwright Testingとは • Microsoft Playwright Testingって結局なに？ • Microsoft Playwright Testingの構成 • そもそもPlaywrightってなんなのサ • Playwrightの特徴 ◦ UI Mode、インスペクター、コード生成 2 • で、どうすればいいPlaywright！ • デモ • PlaywrightをMicrosoft Playwright Testingに移行する • デモ • Visual Studio Codeに拡張機能がある • Microsoft Playwright Testingを使うメリット・優位性 • まとめ
3. 山田顕人 == Kento.Yamada 自己紹介 3 • MSP向けの運用分析プラットフォームの開発と提供・新しいサービスの検証 • 受賞歴（Microsoft MVP for Developer Technologies以外） ◦ LINE Expert ◦ Google Cloud Partner Tech Blog Challenge 2023 Cloud AI/ML 部門受賞 ◦ LAPRAS OUTPUT AWARD 2024 01
4. 4 Microsoft Playwright Testingとは • Azure上でPlaywrightが動作するE2Eテストのサービス マルチプラットフォーム、クロスブラウザ、並列実行が Azureのクラウド上でできる！！
5. 5 Microsoft Playwright Testingって結局なに？ しかし、個人的には以下の説明が適切だと思う。 Playwrightの能力を最大限に活用するためのクラウドサービス
6. 6 Microsoft Playwright Testingの構成 引用：Microsoft Playwright Testing のプレビューとは https://learn.microsoft.com/ja-jp/azure/playwright-testing/overview-what-is-microsoft-playwright-testing
7. 7 そもそもPlaywrightってなんなのサ 元はGoogleでPuppeteerを開発していたチームが開発したフレームワーク • UI Modeの提供 • コード生成、インスペクタ（Playwright Inspector）の提供 ※最近のSeleniumもフレームワークの機能でWebDriverがインストールできます。
8. 8 Playwrightの特徴 モダン クロスブラウザ ヘッドレス
9. 9 UI Modeの提供
10. 10 Playwright codegenとPlaywright Inspector コードを生成したいところにカーソルを合わせて操作するとコードが生成できます。
11. 11 Playwright codegenの注意事項 注意事項としてchromiumをインストールしていないといけません。 ※Windows環境で確認済 Windows
12. 12 で、どうすればいいPlaywright！（環境構築＆実行） • Playwrightでプロジェクトを作成（使う言語によって変わります） • コマンドラインでブラウザをインストール • Playwright Service Configを作成 • テストを書く • 実行
13. 13 デモ • Blazorのローカルアプリケーションを起動してテストする • UI Modeを使ってみる • レポートを見る • Playwright codegenとPlaywright Inspector
14. 14 PlaywrightをMicrosoft Playwright Testingに移行する 移行方法は簡単 • Microsoft Playwright Testing用のコンフィグをプロジェクトに配置 • Microsoft Playwright Testingのアクセスキーを環境変数にセット ただし、ローカルでテストしているアプリケーションは テスト実行前にデプロイされていなければいけません。
15. Microsoft Azure 15 構成 AWS Cloud AWS App Runner デプロイ Microsoft Playwright Testing プッシュ
16. 16 デモ • クラウド上で起動されているBlazor アプリケーションをテストする
17. 17 Visual Studio Codeに拡張機能がある 紹介
18. 18 Visual Studio Codeに拡張機能がある 今日紹介した機能もある。
19. 19 Microsoft Playwright Testingを使うメリット・優位性 クラウドリソースでE2Eテストができるところは他にはないすごいところ！ ：Azure以外でPlaywrightを実行する場合は構成が必要！ 👉マネージドではない
20. 20 Microsoft Playwright Testingを使うメリット・優位性 マルチプラットフォーム クロスブラウザ 並列実行
21. まとめ • Microsoft Playwright Testingを使うとAzure上でE2EテストができるYo • Playwrightは多機能なE2Eテストフレームワーク • 移行はプロジェクトにPlaywright Configと環境変数をセットするだけでOK • Visual Studio Codeの拡張機能を使うとPlaywrightの機能を試せるYo • 他のクラウド上でPlaywrightのE2Eテストを実行する場合 ◦ 専用の構成を考える必要がある。フルマネージドにできないYo 21