PyCon JP 2022 - Playwright で 高機能ブラウザテスト

『Webブラウザの自動テスト』してますか？
よく使われるツールとして、Selenium や Puppeteerなどがあります。
Pythonian と相性の良いPlaywright モジュールの利点をご紹介します。

Transcript

1. @maikeru (mikumo) Selenium / Puppeteer ユーザー必見 Playwright で 高機能ブラウザテスト 超高速LT
2. @maikeru (mikumo) 自己紹介✍ 三雲 勇二 / mikumo プライム・ストラテジー株式会社 所属 ・KUSANAGI / WEXAL (WordPress などフレームワーク高速化) ・ハイパーオートメーション (自動化やAIなど) ・PRIME STUDY (Python模擬試験の提供中) PHP技術者認定機構 エバンジェリスト 特技: 資格試験の一夜漬け
3. @maikeru (mikumo) 『Webブラウザの自動テスト』 してますか？
4. @maikeru (mikumo) よく使われるツールとして、 Selenium や Puppeteer などがあります。
5. @maikeru (mikumo) 本日は Pythonian と相性の良い Playwright モジュールの利点をご紹介します。
6. @maikeru (mikumo) Playwright (プレイライト)とは？
7. @maikeru (mikumo) Playwright Microsoft 製 ブラウザテストツール Selenium より拡張性を、 Puppeteer より利便性を、 ざっくり表現するとそういうツール § 公式サイト https://playwright.dev § GitHub https://github.com/microsoft/playwright
8. @maikeru (mikumo) 【だいじなこと】 私は Microsoft さんの 回し者ではありません😊
9. @maikeru (mikumo) 自己紹介✍ 三雲 勇二 / mikumo プライム・ストラテジー株式会社 所属 ・KUSANAGI / WEXAL (WordPress などフレームワーク高速化) ・ハイパーオートメーション (自動化やAIなど) ・PRIME STUDY (Python模擬試験の提供中) PHP技術者認定機構 エバンジェリスト 特技: 資格試験の一夜漬け もう⼀回 ⾃⼰紹介😊
10. @maikeru (mikumo) 話を戻して… では、Playwright を選ぶ ポイントは何でしょう？
11. @maikeru (mikumo) うれしいポイント👍 Python 公式対応
12. @maikeru (mikumo) Playwright for ... § 公式サイト https://playwright.dev/python/docs/library § GitHub https://github.com/microsoft/playwright-python 公式で多彩なプログラミング⾔語に対応
13. @maikeru (mikumo) Playwright for Python § 公式サイト https://playwright.dev/python/docs/library § GitHub https://github.com/microsoft/playwright-python
14. @maikeru (mikumo) うれしいポイント👍 クロスブラウザテスト
15. @maikeru (mikumo) マルチブラウザ対応 § 公式サイト https://playwright.dev/python/docs/library § GitHub https://github.com/microsoft/playwright-python
16. @maikeru (mikumo) マルチブラウザ対応 # Chromium PC browser = playwright.chromium.launch() context = browser.new_context() # WebKit PC browser = playwright.webkit.launch() context = browser.new_context() # Firefox PC browser = playwright.firefox.launch() context = browser.new_context()
17. @maikeru (mikumo) マルチブラウザ対応 # Chromium Mobile browser = playwright.chromium.launch() context = browser.new_context(**playwright.devices["Pixel 2"]) # WebKit Mobile browser = playwright.webkit.launch() context = browser.new_context(**playwright.devices["iPhone 11 Pro"])
18. @maikeru (mikumo) うれしいポイント👍 スクリーンショット& ビデオレコーディング
19. @maikeru (mikumo) スクリーンショット対応 # Screenshot page = context.new_page() page.goto("https://www.wikipedia.org/") page.screenshot(path="./screenshot.png", full_page=True)
20. @maikeru (mikumo) スクリーンショット対応 フルスクリーン取得可能 左はモバイル画⾯を取得した⼀例
21. @maikeru (mikumo) ビデオレコーディング対応 # Video Recording browser = playwright.chromium.launch() context = browser.new_context( record_video_dir="./videos", record_video_size={"height": 768, "width": 1024}, )
22. @maikeru (mikumo) ビデオレコーディング対応
23. @maikeru (mikumo) うれしいポイント👍 テストコード自動生成
24. @maikeru (mikumo) テストコード自動生成 shell> playwright codegen https://www.wikipedia.org/
25. @maikeru (mikumo) テストコード自動生成
26. @maikeru (mikumo) テストコード自動生成
27. @maikeru (mikumo) テストコード自動生成
28. @maikeru (mikumo) テストコード自動生成
29. @maikeru (mikumo) テストコード自動生成
30. @maikeru (mikumo) テストコード自動生成
31. @maikeru (mikumo) うれしいポイント👍 Docker コンテナ実行
32. @maikeru (mikumo) Docker コンテナ実行 今までの機能は、 すべてコンテナ上で 実⾏できます。 Microsoft 公式で コンテナも公開され ています。 Microsoft Artifact Registry https://mcr.microsoft.com/en-us/catalog?search=playwright
33. @maikeru (mikumo) Docker コンテナ実行 FROM mcr.microsoft.com/playwright/python:v1.24.0-focal 公式イメージの注意点 • ⽇本語環境は追加で⼊れましょう。 • Docker Hub には Playwright 公式イメージはありません。 • 公式イメージは Apple Silicon では動作しません。 • ヘッドレスモードで動作してください。
34. @maikeru (mikumo) Microsoft さんの回し者でないから言える Playwright の弱点🤔
35. @maikeru (mikumo) Playwright の弱点🤔 oとにかく知⾒や実例が少ない。 o実例が Python 以外の⾔語実装がヒットする。 o⾔語を超えてメソッドが統⼀されてない。
36. @maikeru (mikumo) Playwright の弱点🤔 oとにかく知⾒や実例が少ない。 ▶ 英語で検索すると⾒つかる事が多い。 ▶ Puppeteer の実装例が参考になることもあるので拝借する。 o実例が Python 以外の⾔語実装がヒットする。 ▶ 検索ワードを 『Playwright Python』と⾔語まで指定する。 o⾔語を超えてメソッドが統⼀されてない。 ▶ Node.js は Puppeteer に寄せているので感じがある。 ▶ PEP などコーディング規約程度の微妙な違いの場合はわかりやすい。
37. @maikeru (mikumo) Playwright 採用のポイント🤔 弱点を踏まえると、割り切って採⽤するのがポイント o今回紹介した機能が、⾮常に魅⼒的である。 o新しくテストを作成、または、⼩さいテストを作り変える。 o⼀部テストでビデオレコーディングしたい場合など、現状と併⽤させる。 oSelenium や Puppeteer で現状問題なく動作しているものは、特に移⾏ する必要はありません。
38. @maikeru (mikumo) Playwright で試すと面白い課題🤔 『⾃宅の Wi-Fi ルータの設定バックアップ』を教材にしてみると⾯⽩いか もしれません。 1. ルータにログイン 2. 設定エクスポート画⾯ページ表⽰ 3. 設定ファイルのダウンロード
39. @maikeru (mikumo) まとめ
40. @maikeru (mikumo) まとめ • Playwright では、他ツールより簡単で機能が豊富。 • 特にクロスブラウザテスト、ビデオレコーディング機能は便利。 • 知⾒や実例が少ないので、ユーザーが増えるとうれしい。 • かといって、メリットが無ければ移⾏する必要はない。 • (LTでもスライドは際限なく増える。) • (私は Microsoft さんの回し者ではない。)
41. @maikeru (mikumo) 参考記事 今⽇のお話は、 過去に書いた記事を ベースにしています。 • Qiita • Playwright • ブラウザ でググってみてください。 § Python と Playwright でブラウザを ⾃動操作させるコードを⾃動⽣成したよ https://qiita.com/mainy/items/3a9de19f440991f67f34
42. @maikeru (mikumo) ありがとうございました