Microsoft Playwright Testing 再入門

.NETラボ 勉強会 2024年7月の登壇資料です。

登壇タイトル
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