Microsoft Playwright Testing 再入門

Slide 1

Slide 1 text

Microsoft Playwright Testing 再入門 1

Slide 2

Slide 2 text

今日のお話 ● 自己紹介 ● 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を使うメリット・優位性 ● まとめ

Slide 3

Slide 3 text

山田顕人 == 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

Slide 4

Slide 4 text

4 Microsoft Playwright Testingとは ● Azure上でPlaywrightが動作するE2Eテストのサービスマルチプラットフォーム、クロスブラウザ、並列実行が Azureのクラウド上でできる！！

Slide 5

Slide 5 text

5 Microsoft Playwright Testingって結局なに？しかし、個人的には以下の説明が適切だと思う。 Playwrightの能力を最大限に活用するためのクラウドサービス

Slide 6

Slide 6 text

6 Microsoft Playwright Testingの構成引用：Microsoft Playwright Testing のプレビューとは https://learn.microsoft.com/ja-jp/azure/playwright-testing/overview-what-is-microsoft-playwright-testing

Slide 7

Slide 7 text

7 そもそもPlaywrightってなんなのサ元はGoogleでPuppeteerを開発していたチームが開発したフレームワーク ● UI Modeの提供 ● コード生成、インスペクタ（Playwright Inspector）の提供 ※最近のSeleniumもフレームワークの機能でWebDriverがインストールできます。

Slide 8

Slide 8 text

8 Playwrightの特徴モダンクロスブラウザヘッドレス

Slide 9

Slide 9 text

9 UI Modeの提供

Slide 10

Slide 10 text

10 Playwright codegenとPlaywright Inspector コードを生成したいところにカーソルを合わせて操作するとコードが生成できます。

Slide 11

Slide 11 text

11 Playwright codegenの注意事項注意事項としてchromiumをインストールしていないといけません。 ※Windows環境で確認済 Windows

Slide 12

Slide 12 text

12 で、どうすればいいPlaywright！（環境構築＆実行） ● Playwrightでプロジェクトを作成（使う言語によって変わります） ● コマンドラインでブラウザをインストール ● Playwright Service Conﬁgを作成 ● テストを書く ● 実行

Slide 13

Slide 13 text

13 デモ ● Blazorのローカルアプリケーションを起動してテストする ● UI Modeを使ってみる ● レポートを見る ● Playwright codegenとPlaywright Inspector

Slide 14

Slide 14 text

14 PlaywrightをMicrosoft Playwright Testingに移行する移行方法は簡単 ● Microsoft Playwright Testing用のコンフィグをプロジェクトに配置 ● Microsoft Playwright Testingのアクセスキーを環境変数にセットただし、ローカルでテストしているアプリケーションはテスト実行前にデプロイされていなければいけません。

Slide 15

Slide 15 text

Microsoft Azure 15 構成 AWS Cloud AWS App Runner デプロイ Microsoft Playwright Testing プッシュ

Slide 16

Slide 16 text

16 デモ ● クラウド上で起動されているBlazor アプリケーションをテストする

Slide 17

Slide 17 text

17 Visual Studio Codeに拡張機能がある紹介

Slide 18

Slide 18 text

18 Visual Studio Codeに拡張機能がある今日紹介した機能もある。

Slide 19

Slide 19 text

19 Microsoft Playwright Testingを使うメリット・優位性クラウドリソースでE2Eテストができるところは他にはないすごいところ！：Azure以外でPlaywrightを実行する場合は構成が必要！ 👉マネージドではない

Slide 20

Slide 20 text

20 Microsoft Playwright Testingを使うメリット・優位性マルチプラットフォームクロスブラウザ並列実行

Slide 21

Slide 21 text

まとめ ● Microsoft Playwright Testingを使うとAzure上でE2EテストができるYo ● Playwrightは多機能なE2Eテストフレームワーク ● 移行はプロジェクトにPlaywright Conﬁgと環境変数をセットするだけでOK ● Visual Studio Codeの拡張機能を使うとPlaywrightの機能を試せるYo ● 他のクラウド上でPlaywrightのE2Eテストを実行する場合 ○ 専用の構成を考える必要がある。フルマネージドにできないYo 21