Microsoft Playwrightで始めるブラウザテスト

Slide 1

Slide 1 text

Microsoft Playwrightで始めるブラウザテスト 1

Slide 2

Slide 2 text

このLTでやること ● 自己紹介 ● そもそもブラウザテストとはなんやねん ● 古くから存在していたけど終焉を迎えた”あのブラウザ” ● もう一つのMicrosoft Edge ● ブラウザの仕様統一 ● WebDriverの登場 2 ● Microsoft Playwrightとは ● Microsoft Playwrightの特徴 ● 実際のコード ● ブラウザテストを快適に実行するために必要なこと ● Microsoft Playwright Testingとは ● Microsoft Playwright Testing ● Microsoft Playwright Testingでテストを構成する時の注意点 ● まとめ

Slide 3

Slide 3 text

自己紹介 3 Kento.Yamada マルチクラウドでエンジニアをやっているMulti Cloud Developer 携わっていること： ● クラウドの運用分析（Google CloudのLookerが飛び道具） ● 新しいクラウドサービスの検証 ● MSP向けのシステム開発 ● 他 ● Kindle本の執筆（ベストセラー獲得） ● WebDriverの仕様でブログを書く人（最近の話） github,zenn,Qiita,X(旧Twitter),LinkedIn＠ymd65536

Slide 4

Slide 4 text

そもそもブラウザテストとはなんやねん 4

Slide 5

Slide 5 text

そもそもブラウザテストとはなんやねん 5 Webページを開くぞい

Slide 6

Slide 6 text

6 Xにある ymd65536のページを開きたいそもそもブラウザテストとはなんやねん

Slide 7

Slide 7 text

7 ほい、 ymd65536のページや！そもそもブラウザテストとはなんやねん

Slide 8

Slide 8 text

8 Homeを開くそもそもブラウザテストとはなんやねん

Slide 9

Slide 9 text

9 Homeが開いたそもそもブラウザテストとはなんやねん

Slide 10

Slide 10 text

10 お、開いた！つぶやいたろ！そもそもブラウザテストとはなんやねん

Slide 11

Slide 11 text

11 そもそもブラウザテストとはなんやねんブラウザテスト=ユーザが求めているページが正常に開くもしくはWebページ上の機能が特定のブラウザで機能するかをどうかをテストする

Slide 12

Slide 12 text

ブラウザテストはE2Eテストの1つである 12 ブラウザテスト E2Eテストそもそもブラウザテストとはなんやねん

Slide 13

Slide 13 text

技術的にはWebオートメーションとも呼べそうではある 13 ブラウザテスト Webオートメーション E2Eテストそもそもブラウザテストとはなんやねん

Slide 14

Slide 14 text

Webオートメーション RPAではブラウザオートメーション 14 ブラウザテストブラウザオートメーション RPA 自動化 E2Eテストそもそもブラウザテストとはなんやねん

Slide 15

Slide 15 text

Webオートメーションブラウザテストブラウザオートメーション今回話すのは左側の「ブラウザテスト」について 15 RPA Playwright E2Eテスト自動化昨今ではブラウザテストのことを単にUIテストと呼ぶことがあります。しかし、厳密にはネイティブアプリケーションのE2EテストもUIテストに含まれるので「UIテスト＝ブラウザテスト」ではありません。そもそもブラウザテストとはなんやねん

Slide 16

Slide 16 text

古くから存在していたけど終焉を迎えた”あのブラウザ” 16 IE

Slide 17

Slide 17 text

17 Webオートメーションブラウザテストブラウザオートメーション Playwright E2Eテスト自動化 RPA 先ほどのスライドで上記のような図を示しましたが。。。古くから存在していたけど終焉を迎えた”あのブラウザ”

Slide 18

Slide 18 text

古くから存在していたけど終焉を迎えた”あのブラウザ” 18 Webオートメーションブラウザテストブラウザオートメーション VBA E2Eテスト自動化 VBA IEが全盛の頃はExcel VBAでE2Eテストしたり、Webシステム操作の自動化ができました。 ※Microsoft HTML Object LibraryとMicrosoft Internet Controlsによる操作 IE IE

Slide 19

Slide 19 text

古くから存在していたけど終焉を迎えた”あのブラウザ” 19 Webオートメーションブラウザテストブラウザオートメーション VBA E2Eテスト自動化 VBA しかし、IEが終焉するとともにこの仕組みが崩壊しました。VBAでWebオートメーションを構築している方々は阿鼻叫喚同じ仕組みを使っていたUWSCも利用できなくなり、置き換えを余儀なくされました。 IE IE

Slide 20

Slide 20 text

古くから存在していたけど終焉を迎えた”あのブラウザ” 20 Webオートメーションブラウザテストブラウザオートメーション VBA E2Eテスト自動化 VBA IEなきあとはEdgeを活用したWebオートメーションとなりますが、前述のCOMコンポーネントに対応していないため、自動化するのにはひと工夫が必要でした。ここでIEを胸に宿したEdgeが登場します。 Edge Edge

Slide 21

Slide 21 text

もう一つのMicrosoft Edge IE終焉後は2つのMicrosoft Edgeが登場しました。 ● Microsoft Edge Legacy（Microsoft Edgeの前に登場したMicrosoft Edge） ● Microsoft Edge（多くの人が利用・イメージするMicrosoft Edge）多くの人が利用・イメージするMicrosoft EdgeではIEモードがサポートされました。このIEモードはVBAとWindows32 APIを用いることでIEとほぼ同じWebオートメーションをMicrosoft Edgeで実現できます。つまりどういうことか・・・ 21

Slide 22

Slide 22 text

図解するとどうなるか 22 Webオートメーションブラウザテストブラウザオートメーション E2Eテスト自動化 VBAでWindows32 APIを実行し、Microsoft Edgeのウィンドウハンドルを掴んだら Internet Explorer_Serverを探してゴニョゴニョします。するとIEと同じ操作ができます。 Edge Edge IE IE VBA VBA

Slide 23

Slide 23 text

補足：IEモードでIEと同じ動きをVBAで実現する話 23 https://qiita.com/ymd65536-ms/items/320f889e9fc35fe375f1

Slide 24

Slide 24 text

とはいえ。。。。。 24

Slide 25

Slide 25 text

VBAとIE（IEモード）を卒業してモダンに自動化したいですよね？ ※IEモードのサポートは2029年に切れます。 25

Slide 26

Slide 26 text

ブラウザの仕様統一へ今まで：ブラウザのベンダーそれぞれがブラウザを開発して提供（仕様も独自が多い）※W3Cの仕様に沿っていたものもあったが、完全ではない。上記の問題点： ● ブラウザによって挙動が違うもしくは動かない（クロスブラウザ問題） ● 独自のインターフェイスによるベンダーロックインアクセシビリティが変わってしまうことが大きな課題もちろん、Webオートメーションを実行する上でも大きな課題に！ 26

Slide 27

Slide 27 text

現在におけるブラウザの仕様（一例） 27 Chromium Microsoft Edge Google Chrome ブラウザを提供するベンダは違うけどもベースとなっているブラウザはどちらもChromium（クロミウム）がベースとなっている。

Slide 28

Slide 28 text

WebDriverの登場ブラウザベンダー毎にWebDriverを提供例： ● Microsoft Edge WebDriver ● WebDriver for Chrome WebDriverを起動するとローカルホストにエンドポイント構築されます。 ※注意点としてWebDriverのバージョン＝ブラウザのバージョン 28 仕様が統一されたことによって統一された自動化フレームワーク利用できるようになった。

Slide 29

Slide 29 text

WebDriverの登場 29 ローカルホストに起動したWebDriverに対してリクエストを発行すると。。。。 Edge Chrome EdgeDriver http リクエスト WebDriver ChromeDriver WebDriverがブラウザを操作します。

Slide 30

Slide 30 text

WebDriverの登場 30 リクエスト内容に応じてWebDriverがレスポンスを返します。 Edge Chrome EdgeDriver http レスポンス WebDriver ChromeDriver WebDriverはブラウザとユーザを繋ぐ架け橋的な存在！

Slide 31

Slide 31 text

こうして WebDriverのような仲介役が登場したことによりより簡単にWebオートメーションができるようになりました。そして、似たようなコンセプトを持った Playwright（Microsoft Playwright）が登場します。 31

Slide 32

Slide 32 text

Microsoft Playwrightとは ● Microsoftが中心となって開発しているオープンソースのWebアプリケーション向けテスト自動化フレームワーク ● Node.js、C#,、Python、Javaに対応 ● WebDriverは不要 ○ 言語毎にデバッグ用のブラウザをインストールするだけでよい（コマンド完結！） 32

Slide 33

Slide 33 text

補足：WebDriverは不要 WebDriverではブラウザ毎にWebDriverが必要であるという点 33 Edge Chrome EdgeDriver WebDriver ChromeDriver Playwright Edge Chrome

Slide 34

Slide 34 text

34 Microsoft Playwrightの特徴モダンクロスヘッドレス

Slide 35

Slide 35 text

実際のコード（Node.js：foo.spec.ts） 35 playwright.conﬁg.tsを設定しない場合はヘッドレスで起動します。

Slide 36

Slide 36 text

Node.js：playwright.conﬁg.ts 36 playwright.conﬁg.tsを構成することでさまざまなテストに対応します。 ※Microsoft Edgeを起動してテストをする場合です

Slide 37

Slide 37 text

テストの実行（実演） 37

Slide 38

Slide 38 text

テストの実行（npx playwright test --headed） 38 実行したテストの数や実行終了までの秒数までを表示します。

Slide 39

Slide 39 text

Playwrightを学ぶにはMicrosoft Learn！ 39 Playwright を使用してMicrosoft Edgeで自動化とテストを行う引用元：https://learn.microsoft.com/ja-jp/microsoft-edge/playwright/

Slide 40

Slide 40 text

40 ブラウザテストを快適に実行するために必要なこと

Slide 41

Slide 41 text

41 ブラウザテストを快適に実行するために必要なことマルチプラットフォーム

Slide 42

Slide 42 text

42 ブラウザテストを快適に実行するために必要なことマルチプラットフォームクロスブラウザ

Slide 43

Slide 43 text

43 ブラウザテストを快適に実行するために必要なことマルチプラットフォームクロスブラウザ並列実行

Slide 44

Slide 44 text

どうしたら良いかはわかりましたが。。。。アプリケーションにあるすべての機能をさまざまな環境でテストできるのか？いったいいくつのテストパターンがあるのだろう。 44

Slide 45

Slide 45 text

45 例：テストパターンを考えてみるとアプリケーションの機能数 ❌ デバイスの種類 ❌ OS ❌ ブラウザの種類＝　10 ❌ 3 ❌ 3 ❌ 5 ＝　450通り実際にはもっとパターン数があったり、デバイスの調達コストや場合によってはライセンス費用も必要となるでしょう。。。

Slide 46

Slide 46 text

Microsoft Playwright Testing 46 🥳🥳🥳🥳 🥳🥳🥳🥳

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

Microsoft Azure Workspace 並列実行 48 Microsoft Playwright Testingの構成オペレーティングシステムブラウザ CI Pipeline

Slide 49

Slide 49 text

49 Microsoft Playwright Testingでテストを構成する時の注意点コードを書く人の観点から言えることはテストコードを複雑にしないことです。詳しくは[Microsoft Learn]最適なテストスイート構成を決定するを参照

Slide 50

Slide 50 text

50 Microsoft Playwright Testingの画面

Slide 51

Slide 51 text

51 Microsoft Playwright Testingの画面

Slide 52

Slide 52 text

まとめ ● ブラウザテストはE2Eテストの1つだYo ○ 技術的な観点ではRPAのブラウザオートメーションに近いものがあるYo ● 古き時代ではブラウザの仕様が統一されていないのでテストは大変だったYo ○ IEモードとおさらばしようね。 ● WebDriverの登場でテストは比較的にやりやすくなったYo ● Microsoft PlaywrightはブラウザテストのフレームワークだYo ● WebDriverとの大きな違いはセットアップが手軽なところだYo ● Microsoft Playwright Testingを使うとAzure上でE2EテストができるYo 52

Slide 53

Slide 53 text

もし移行するとしたら・・・（ロードマップ） 53 レガシーな Web オートメーション Selenium Playwright その他 (mablなど) Microsoft Playwright Testing