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

.NETラボ 勉強会 2024年1月で投影したスライドです。
イベントリンク：https://dotnetlab.connpass.com/event/305578/

スライド内で紹介した動画：
（音声なし）Microsoft Playwright Demo
https://www.youtube.com/watch?v=-N2_QFrV9ho&t=1s

GitHub Profile：@ymd65536
Twitter(X)： @ymd65536

Transcript

1. Microsoft Playwrightで始めるブラウザテスト 1
2. このLTでやること • 自己紹介 • そもそもブラウザテストとはなんやねん • 古くから存在していたけど終焉を迎えた”あのブラウザ” • もう一つのMicrosoft Edge • ブラウザの仕様統一 • WebDriverの登場 2 • Microsoft Playwrightとは • Microsoft Playwrightの特徴 • 実際のコード • ブラウザテストを快適に実行するために必要なこと • Microsoft Playwright Testingとは • Microsoft Playwright Testing • Microsoft Playwright Testingでテストを構成する時の注意点 • まとめ
3. 自己紹介 3 Kento.Yamada マルチクラウドでエンジニアをやっているMulti Cloud Developer 携わっていること： • クラウドの運用分析（Google CloudのLookerが飛び道具） • 新しいクラウドサービスの検証 • MSP向けのシステム開発 • 他 • Kindle本の執筆（ベストセラー獲得） • WebDriverの仕様でブログを書く人（最近の話） github,zenn,Qiita,X(旧Twitter),LinkedIn＠ymd65536
4. そもそもブラウザテストとはなんやねん 4
5. そもそもブラウザテストとはなんやねん 5 Webページを 開くぞい
6. 6 Xにある ymd65536の ページを開き たい そもそもブラウザテストとはなんやねん
7. 7 ほい、 ymd65536の ページや！ そもそもブラウザテストとはなんやねん
8. 8 Homeを開く そもそもブラウザテストとはなんやねん
9. 9 Homeが開いた そもそもブラウザテストとはなんやねん
10. 10 お、開いた！ つぶやいたろ！ そもそもブラウザテストとはなんやねん
11. 11 そもそもブラウザテストとはなんやねん ブラウザテスト=ユーザが求めているページが正常に開くもしくはWebページ上の機 能が特定のブラウザで機能するかをどうかをテストする
12. ブラウザテストはE2Eテストの1つである 12 ブラウザテスト E2Eテスト そもそもブラウザテストとはなんやねん
13. 技術的にはWebオートメーションとも呼べそうではある 13 ブラウザテスト Webオートメーション E2Eテスト そもそもブラウザテストとはなんやねん
14. Webオートメーション RPAではブラウザオートメーション 14 ブラウザテスト ブラウザオートメーション RPA 自動化 E2Eテスト そもそもブラウザテストとはなんやねん
15. Webオートメーション ブラウザテスト ブラウザオートメーション 今回話すのは左側の「ブラウザテスト」について 15 RPA Playwright E2Eテスト 自動化 昨今ではブラウザテストのことを単にUIテストと呼ぶことがあります。 しかし、厳密にはネイティブアプリケーションのE2EテストもUIテストに含まれるので 「UIテスト＝ブラウザテスト」ではありません。 そもそもブラウザテストとはなんやねん
16. 古くから存在していたけど終焉を迎えた”あのブラウザ” 16 IE
17. 17 Webオートメーション ブラウザテスト ブラウザオートメーション Playwright E2Eテスト 自動化 RPA 先ほどのスライドで上記のような図を示しましたが。。。 古くから存在していたけど終焉を迎えた”あのブラウザ”
18. 古くから存在していたけど終焉を迎えた”あのブラウザ” 18 Webオートメーション ブラウザテスト ブラウザオートメーション VBA E2Eテスト 自動化 VBA IEが全盛の頃はExcel VBAでE2Eテストしたり、Webシステム操作の自動化ができました。 ※Microsoft HTML Object LibraryとMicrosoft Internet Controlsによる操作 IE IE
19. 古くから存在していたけど終焉を迎えた”あのブラウザ” 19 Webオートメーション ブラウザテスト ブラウザオートメーション VBA E2Eテスト 自動化 VBA しかし、IEが終焉するとともにこの仕組みが崩壊しました。VBAでWebオートメーションを構 築している方々は阿鼻叫喚 同じ仕組みを使っていたUWSCも利用できなくなり、置き換えを余儀なくされました。 IE IE
20. 古くから存在していたけど終焉を迎えた”あのブラウザ” 20 Webオートメーション ブラウザテスト ブラウザオートメーション VBA E2Eテスト 自動化 VBA IEなきあとはEdgeを活用したWebオートメーションとなりますが、前述のCOMコンポーネント に対応していないため、自動化するのにはひと工夫が必要でした。 ここでIEを胸に宿したEdgeが登場します。 Edge Edge
21. もう一つの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
22. 図解するとどうなるか 22 Webオートメーション ブラウザテスト ブラウザオートメーション E2Eテスト 自動化 VBAでWindows32 APIを実行し、Microsoft Edgeのウィンドウハンドルを掴んだら Internet Explorer_Serverを探してゴニョゴニョします。するとIEと同じ操作ができます。 Edge Edge IE IE VBA VBA
23. 補足：IEモードでIEと同じ動きをVBAで実現する話 23 https://qiita.com/ymd65536-ms/items/320f889e9fc35fe375f1
24. とはいえ。。。。。 24
25. VBAとIE（IEモード）を卒業して モダンに自動化したいですよね？ ※IEモードのサポートは2029年に切れます。 25
26. ブラウザの仕様統一へ 今まで：ブラウザのベンダーそれぞれがブラウザを開発して提供 （仕様も独自が多い）※W3Cの仕様に沿っていたものもあったが、完全ではない。 上記の問題点： • ブラウザによって挙動が違うもしくは動かない（クロスブラウザ問題） • 独自のインターフェイスによるベンダーロックイン アクセシビリティが変わってしまうことが大きな課題 もちろん、Webオートメーションを実行する上でも大きな課題に！ 26
27. 現在におけるブラウザの仕様（一例） 27 Chromium Microsoft Edge Google Chrome ブラウザを提供するベンダは違うけどもベースとなっているブラウザは どちらもChromium（クロミウム）がベースとなっている。
28. WebDriverの登場 ブラウザベンダー毎にWebDriverを提供 例： • Microsoft Edge WebDriver • WebDriver for Chrome WebDriverを起動するとローカルホストにエンドポイント構築されます。 ※注意点としてWebDriverのバージョン＝ブラウザのバージョン 28 仕様が統一されたことによって統一された自動化フレームワーク利用できるようになった。
29. WebDriverの登場 29 ローカルホストに起動したWebDriverに対してリクエストを発行すると。。。。 Edge Chrome EdgeDriver http リクエスト WebDriver ChromeDriver WebDriverがブラウザを操作します。
30. WebDriverの登場 30 リクエスト内容に応じてWebDriverがレスポンスを返します。 Edge Chrome EdgeDriver http レスポンス WebDriver ChromeDriver WebDriverはブラウザとユーザを繋ぐ架け橋的な存在！
31. こうして WebDriverのような仲介役が登場したことにより より簡単にWebオートメーションができるようになりました。 そして、似たようなコンセプトを持った Playwright（Microsoft Playwright） が登場します。 31
32. Microsoft Playwrightとは • Microsoftが中心となって開発しているオープンソースのWebアプリケーション向け テスト自動化フレームワーク • Node.js、C#,、Python、Javaに対応 • WebDriverは不要 ◦ 言語毎にデバッグ用のブラウザをインストールするだけでよい（コマンド完結！） 32
33. 補足：WebDriverは不要 WebDriverではブラウザ毎にWebDriverが必要であるという点 33 Edge Chrome EdgeDriver WebDriver ChromeDriver Playwright Edge Chrome
34. 34 Microsoft Playwrightの特徴 モダン クロス ヘッドレス
35. 実際のコード（Node.js：foo.spec.ts） 35 playwright.config.tsを設定しない場合はヘッドレスで起動します。
36. Node.js：playwright.config.ts 36 playwright.config.tsを構成することでさまざまなテストに対応します。 ※Microsoft Edgeを起動してテストをする場合です
37. テストの実行（実演） 37
38. テストの実行（npx playwright test --headed） 38 実行したテストの数や実行終了までの秒数までを表示します。
39. Playwrightを学ぶにはMicrosoft Learn！ 39 Playwright を使用してMicrosoft Edgeで自動化とテストを行う 引用元：https://learn.microsoft.com/ja-jp/microsoft-edge/playwright/
40. 40 ブラウザテストを快適に実行するために必要なこと
41. 41 ブラウザテストを快適に実行するために必要なこと マルチプラットフォーム
42. 42 ブラウザテストを快適に実行するために必要なこと マルチプラットフォーム クロスブラウザ
43. 43 ブラウザテストを快適に実行するために必要なこと マルチプラットフォーム クロスブラウザ 並列実行
44. どうしたら良いかはわかりましたが。。。。 アプリケーションにあるすべての機能を さまざまな環境でテストできるのか？ いったいいくつのテストパターンがあるのだろう。 44
45. 45 例：テストパターンを考えてみると アプリケーションの機能数 ❌ デバイスの種類 ❌ OS ❌ ブラウザの種類 ＝　10 ❌ 3 ❌ 3 ❌ 5 ＝　450通り 実際にはもっとパターン数があったり、デバイスの調達コストや場合によっては ライセンス費用も必要となるでしょう。。。
46. Microsoft Playwright Testing 46 🥳🥳🥳🥳 🥳🥳🥳🥳
47. 47 Microsoft Playwright Testingとは • Azure上でPlaywrightが動作するE2Eテストのサービス マルチプラットフォーム、クロスブラウザ、並列実行が Azureのクラウド上でできる！！ 既存のPlaywrightプロジェクトを利用できる！
48. Microsoft Azure Workspace 並列実行 48 Microsoft Playwright Testingの構成 オペレーティングシステム ブラウザ CI Pipeline
49. 49 Microsoft Playwright Testingでテストを構成する時の注意点 コードを書く人の観点から言えることはテストコードを複雑にしないことです。 詳しくは[Microsoft Learn]最適なテスト スイート構成を決定するを参照
50. 50 Microsoft Playwright Testingの画面
51. 51 Microsoft Playwright Testingの画面
52. まとめ • ブラウザテストはE2Eテストの1つだYo ◦ 技術的な観点ではRPAのブラウザオートメーションに近いものがあるYo • 古き時代ではブラウザの仕様が統一されていないのでテストは大変だったYo ◦ IEモードとおさらばしようね。 • WebDriverの登場でテストは比較的にやりやすくなったYo • Microsoft PlaywrightはブラウザテストのフレームワークだYo • WebDriverとの大きな違いはセットアップが手軽なところだYo • Microsoft Playwright Testingを使うとAzure上でE2EテストができるYo 52
53. もし移行するとしたら・・・（ロードマップ） 53 レガシーな Web オートメーション Selenium Playwright その他 (mablなど) Microsoft Playwright Testing