Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Mikumo
October 15, 2022

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

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

Mikumo

October 15, 2022
Tweet

More Decks by Mikumo

Other Decks in Programming

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) ありがとうございました