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.config.tsを設定しない場合はヘッドレスで起動します。

Slide 36

Slide 36 text

Node.js:playwright.config.ts 36 playwright.config.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

Slide 54

Slide 54 text

54