PlaywrightとJestでクロスブラウザテストを実装する

Publish:: 2020/04/02

Tags:

Playwrightとは

Playwrightは、Chromium、WebKit、Firefoxをヘッドレスで操作できるNode.jsライブラリです。 APIがシンプルなので、少しの記述で簡単に複数のブラウザを操作することができます。Puppeteerをベースとしているので、Puppeteerからの移行も容易です。

今回はJestと組み合わせて、クロスブラウザテストを実装してみます。

完成版のコードはGitHubにアップしているので、気になる方は「kimulaco/jest-playwright-example」を参考にしてください。

テストするページの準備

今回は、次のような「Click me!」ボタンを押したら「Nice click!」というテキストが表示されるだけの簡単なサンプルを用意します。この機能が各種ブラウザで正常に動作しているかテストしてみます。

<main>
  <button type="button" id="btn">Click me!</button>
  <p id="text"></p>
</main>

<script>
  const btn = document.getElementById('btn')
  const text = document.getElementById('text')
  btn.addEventListener('click', () => {
    text.innerText = 'Nice click!'
  })
</script>

実際のページはこちら。

必要なモジュールをインストールする

次のコマンドで必要なモジュールをインストールします。

npm i -D playwright jest jest-playwright-preset

設定ファイルを作成する

jest.config.js

まず初めに、Jestの設定ファイルを作成しましょう。

今回必須なのは、次のpresetのみです。testMatchなどのその他の項目は好みの設定で構いません。

module.exports = {
  preset: 'jest-playwright-preset'
}

jest-playwright.config.js

テストの際にローカルサーバーを使用したい場合は、プロジェクトのルートにjest-playwright.config.jsを作成し、ローカルサーバーを起動するコマンドやポート番号を指定します。

例えば、npm start でポート番号3000のローカルサーバーを起動させる場合は、次のように書きます。

module.exports = {
  server: {
    command: 'npm start',
    port: 3000
  }
}

テストコードを書く

今回は/test/index.test.jsを作成し、次のテストコードを書きます。

const playwright = require('playwright')
const browserTypes = ['chromium', 'firefox', 'webkit']

for (const browserType of browserTypes) {
  describe(`Test by ${browserType}`, () => {
    let browser
    let page

    beforeAll(async () => {
      browser = await playwright[browserType].launch()
      const context = await browser.newContext()
      page = await context.newPage()
      await page.goto('http://localhost:3000')
    })

    test('Check renderd text', async () => {
      await page.click('#btn');
      const renderdText = await page.evaluate(async () => {
        return document.getElementById('text').innerText
      })
      expect(renderdText).toBe('This is renderd text.')
    })

    afterAll(async () => {
      await browser.close()
    })
  })
}

テストを実行してみる

jestコマンドでテストを実行しましょう。

npx jest

結果は次のようになりました。無事に各種ブラウザで期待通りの動作をしたことがわかります。

$ npx jest
PASS test/index.test.js (5.807s)
  Test by chromium
    ✓ Show nice click (30ms)
  Test by firefox
    ✓ Show nice click (65ms)
  Test by webkit
    ✓ Show nice click (17ms)

Test Suites: 1 passed, 1 total
Tests:       3 passed, 3 total
Snapshots:   0 total
Time:        5.888s, estimated 6s
Ran all test suites.

まとめ

Playwrightを使用して簡単にクロスブラウザテストを実装できました。各種ブラウザでスクリーンショットを撮ったり、フォーム操作やHTML属性の有無のチェックなど、ブラウザやJavaScriptでできることはだいたい何でもできるので、複雑な要件のテストも実装可能です。

UIや機能を更新する度に手動でクロスブラウザテストを行うのは割と大きい負担なので、このように自動化できるのはとても嬉しいです。ただし、ブラウザテストはユニットテストに比べるとテストコードのメンテナンスにかかるコストが大きくなることが多いので、コストのバランスを見つつ導入してみるのがよいかなと思いました。

記事一覧に戻る