Vite でマルチページを Playwright でテストする

モチベーション

• ドキュメントに載せるサンプルコードを E2E テストできるようにしたい
• Vite でマルチページ使いたい
  • index.html と main.ts の組み合わせ
• Playwright で E2E テストを実行したい

戦略

• src/index.html でそれぞれのサンプルに飛べるようにしたい
• env.local で必要な設定を指定できるようにしたい
  • VITE_ を使う
• src/spam や src/egg とサンプル毎に細かく index.html と main.ts を用意したい
  • vite 時はいいが、vite build 時に困るので対応する必要がある
  • vite.config.js で rollupOptions の input を設定をする必要がある
• エントリーポイントを src/ 以下にしたい
  • root で設定する
  • .env のパスは root を変更するとそこに影響されてしまうので vite.config.js の envDir で指定する
• GitHub Actions でも検証したい

結果

• src 以下に好きにディレクトリを切ってその下に main.ts と index.html を置く

vite.config.js

import { resolve } from "path";
import { defineConfig } from "vite";

export default defineConfig({
  root: resolve(__dirname, "src"),
  build: {
    rollupOptions: {
      input: {
        index: resolve(__dirname, "index.html"),
        spam: resolve(__dirname, "src/spam/index.html"),
        egg: resolve(__dirname, "src/egg/index.html"),
      },
    },
  },
  envDir: resolve(__dirname, "./"),
});

資料

• https://vitejs.dev/guide/build.html#multi-page-app
• https://zenn.dev/mr_ozin/articles/53ad20a287ad47
• https://zenn.dev/s_takashi/articles/d033401905ccf9
• https://www.youtube.com/watch?v=STeKBm67l6M

Playwright

• pnpm run dev して、そこに対して playwright のテスト書きたい
  • vite --port でポート指定ができる
• webServer に指定する
  • https://playwright.dev/docs/test-webserver
  • command に pnpm run dev とかで実行するようにする
    • ここはブロッキングしないので気にしなくてイイ
  • url に指定するところがステータスコードを返してくるとテストを開始する
    • localhost と 127.0.0.1 で挙動がなぜか異なるので、ちゃんと pnpm run dev で実行されるのにする
    • vite --port でポート番号を固定できるのでポート番号固定する
• tests ディレクトリ以下に spam.spec.ts のようにファイルを置く

playwright.config.ts

import { defineConfig } from '@playwright/test'

export default defineConfig({
  // Run your local dev server before starting the tests
  webServer: {
    command: 'pnpm run dev --port 9000',
    url: 'http://localhost:9000/',
    reuseExistingServer: !process.env.CI,
    stdout: 'pipe',
    stderr: 'pipe',
  },
  projects: [
    {
      testDir: 'tests',
    },
  ],
})