[Windows対応]直接ブラウザをインストールしなくてもSafari・Chrome・FireFoxでテストする方法

はじめに

Playwrightというライブラリを使用して、各種ブラウザの起動ができるようになるまでを記載しています。
特に、windowsでsafariが(webkitですが)起動できるようになるのはうれしいです。
Playwright自体はNode.jsのE2Eテストライブラリですが、ブラウザを起動するだけならNode.jsのプロジェクトでなくても大丈夫そうです。

前提

サーバーはNuxt3を動かしていますが、適宜ご自身のアプリケーションに置き換えていただければと思います。
WEBアプリケーションでローカルのURLがわかれば大丈夫です。

インストール方法

https://playwright.dev/docs/intro#installing-playwright
を参考にしながらインストールしていきます。

yarn create playwright

// E2Eテストのディレクトリ。デフォルトのe2eでいいと思います。
Where to put your end-to-end tests? · e2e   
// GitHub Actionのファイルを作成するか
Add a GitHub Actions workflow? (y/N) · false
// ブラウザのインストール。今回は必要なのでtrueで
Install Playwright browsers (can be done manually via 'yarn playwright install')? (Y/n) · true

e2e/
tests-examples/
playwright.config.ts

が生成されていればインストール完了です。

起動用テストの追加

ブラウザテストを追加します。
e2eディレクトリ内にbrowser.spec.tsを作成し、以下のコードを記述します。

e2e\browser.spec.ts

import { test } from '@playwright/test';

test('test browser', async ({ page }) => {
  // ブラウザが起動した時に表示されるページ
  await page.goto('http://localhost:3000/');

  await page.pause();
});

URLは適宜書き換えてください。

e2eディレクトリ内に``example.spec.tsがある場合、不要なので削除しても大丈夫です。

アプリケーションを起動

各アプリケーションを起動しておいてください。
Nuxt3の場合はyarn devで起動します。

各ブラウザを起動

playwright.config.tsのprojectsを指定して起動します。
各projectsのdevicesが起動するブラウザになっています。

{
  // 省略
  projects: [
    {
      // chromeの起動
      name: 'chromium',
      use: {
        ...devices['Desktop Chrome'],
      },
    },

    {
      // firefoxの起動
      name: 'firefox',
      use: {
        ...devices['Desktop Firefox'],
      },
    },

    {
      // safariの起動
      name: 'webkit',
      use: {
        ...devices['Desktop Safari'],
      },
    },
  // 省略
}

コマンドラインのproject引数でプロジェクト名を指定します。
https://playwright.dev/docs/test-cli

起動しているWEBアプリケーションは止めず、別プロセスで以下のコマンドを実行してください。
safariを起動する場合は以下のようになります。

npx playwright test --headed --project=webkit

headedが無いとブラウザが起動しないので注意してください。
無事にブラウザとデバッグツールが起動すれば成功です。

package.jsonに記載する

コマンドを毎回たたくのは面倒なので、package.jsonのscriptに記載します。

package.json

{
  "scripts": {
    // 省略
    "test:chrome": "npx playwright test --headed --project=chromium",
    "test:firefox": "npx playwright test --headed --project=firefox",
    "test:safari": "npx playwright test --headed --project=webkit"
  }
}

yarn test:chrome

全部実行して並べてみました。

左からChrome、Firefox、Safariです。

最後に

webkitとはいえ、WindowsでSafariのブラウザテストができるのはうれしいですね。Macを買わなくてはいけないのかと思っていたのでかなりありがたいです。
Playwright自体はE2Eテストのライブラリなので本質的なところではないですが、掘り下げていくと面白い機能が見つかりそうです。
また、Node.js以外にもPython・Java・.NET試験にも使えるみたいです。

簡単な説明ではありましたが、ここまでご覧いただきありがとうございました。

参考サイト

• playwright
• Windows で Safari のブラウザテストをする