📘

Playwrightを使ってブラウザ操作を自動化してみよう

2021/12/12に公開

この記事は ミライトデザイン Advent Calendar 2021 の12日目です🚀

11日目は @suzuki-hoge さんでした。

Playwrightって何?

webテストを自動化するためのフレームワークですね。

Playwright is a framework for Web Testing and Automation. It allows testing Chromium, Firefox and WebKit with a single API. Playwright is built to enable cross-browser web automation that is ever-green, capable, reliable and fast.

githubの引用をGoogle翻訳したもの

Playwrightは、Webテストと自動化のためのフレームワークです。単一のAPIでChromium、Firefox、WebKitをテストできます。 Playwrightは、常に環境に配慮し、機能があり、信頼性が高く、高速なクロスブラウザWeb自動化を可能にするように構築されています

ちなみにMicrosoftが出しています。

github

ドキュメント

Playwrightの機能

・Scenarios that span multiple page, domains and iframes
・Auto-wait for elements to be ready before executing actions (like click, fill)
・Intercept network activity for stubbing and mocking network requests
・Emulate mobile devices, geolocation, permissions
・Support for web components via shadow-piercing selectors
・Native input events for mouse and keyboard
・Upload and download files

  • 複数のページ、ドメイン、iframeにまたがるシナリオ
  • アクション(クリックやフィルなど)を実行する前に、要素の準備が整うのを自動的に待つ
  • ネットワークリクエストのスタブ化やモック化のためのネットワークアクティビティの傍受
  • モバイルデバイス、ジオロケーション、パーミッションのエミュレート
  • シャドーピアシングセレクタによるウェブコンポーネントのサポート
  • マウスやキーボードのネイティブ入力イベント
  • ファイルのアップロードとダウンロード

こういった機能を使ってwebアプリのE2Eテストやスクレイピングなどをする事が可能です。

Playwrightと似たような機能を持つソフトウェア

Selenium

ThoughtWorksが出しています。

自分はブラウザ操作の自動化といえば、Seleniumを最初に思い浮かびましたね。
Playwrightに比べると直感的には使いにくかった印象があります。

Puppeteer

Googleが出しています。

Playwrightを作ったのは、Puppeteerの後継だという言った話が出ていますがどうやら違うようです。

実際は、こういう事のようです。

  • Googleにいた時にPuppeteerを作る
  • Googleを退職してMicrosoftに入る
  • MicrosoftでPlaywrightを作った

【続報】PlaywrightはPuppeteerの後継ではない

基本的には違いはないですが、Safariを動かせるのは現状Playwrightだけみたいです。
調べた感じだと、Playwrightで良い気はします。

導入

今回はTypeScriptで書くのでTypeScriptも一緒にインストールします

yarn add -D playwright typescript ts-node

tsの初期設定

./node_modules/.bin/tsc --init

試してみる

ブラウザ別にアクセスしてスクリーンショットを撮る

const playwright = require('playwright');

const browserTypes: string[] = ['chromium', 'firefox', 'webkit'];

(async () => {
  for (const browserType of browserTypes) {
    // ブラウザの種類を設定する
    const browser = await playwright[browserType].launch();

    const context = await browser.newContext();
    const page = await context.newPage();

    // 設定しているURLにアクセスする
    await page.goto('https://www.whatismybrowser.com/');

    // スクリーンショットを取る。
    // この場合は実行ファイルと同じディレクトリに保存されます。
    await page.screenshot({path: `browserType-${browserType}.png`});

    // ブラウザを閉じる
    await browser.close();
  }
})();

実行する

./node_modules/.bin/ts-node index.ts

結果
上から順にChrome・Firefox・Safari


Googleに入力して、submitした後にスクリーンショットを撮る

const pw = require('playwright');

(async () => {
  const browser = await pw.webkit.launch(); // or 'chromium', 'firefox'
  const context = await browser.newContext();
  const page = await context.newPage();

  await page.goto('https://google.com');
  await page.type('input[name=q]', 'zenn');
  await page.click('input[name=btnK]:visible');
  await page.waitForTimeout(3000);
  await page.screenshot({ path: 'google.png' });

  await browser.close();
})();

結果

その他

ブラウザ操作を記録してコードを生成する

わざわざDOMの名前調べたり面倒だなと思っていましたが、ブラウザ操作も記録してコードを生成してくれる機能がありました。

素敵!!

公式が解説してくれているので詳細はドキュメントを見てください。
https://playwright.dev/docs/cli/

jestを使った単体テスト

playwrightの機能とjestを組み合わせるとフロントエンドの単体テストもかけますね。
別の記事で試してみます。
https://github.com/playwright-community/jest-playwright

終わりに

playwrightを使えば、自動化の幅が広がりますね!
アプリケーションを作るほどではないけど、ブラウザ操作を自動化したいような時に便利そう。

自分はブラウザ操作の自動化はSeleniumで初めて知りましたが、期待した使い勝手ではなく、すぐに断念しました。

しかしplaywrightなら直感的に実装できて、学習コストも低いと感じました。
実務などでも活用していきたいなと思います。

13日目は @rabit_momo さんです。

よろしくお願いします!

Discussion