chore: add playwright setup for github actions

Author: kazupon

.github/workflows/ci.yml

@@ -141,6 +141,33 @@ jobs:
       - name: Build codes
         run: npm run build
 
+      # https://github.com/vitejs/vite/blob/main/.github/workflows/ci.yml#L91
+      # Install playwright's binary under custom directory to cache
+      - name: (non-windows) Set Playwright path and Get playwright version
+        if: runner.os != 'Windows'
+        run: |
+          echo "PLAYWRIGHT_BROWSERS_PATH=$HOME/.cache/playwright-bin" >> $GITHUB_ENV
+          PLAYWRIGHT_VERSION="$(bun run ./scripts/playwright-version.ts)"
+          echo "PLAYWRIGHT_VERSION=$PLAYWRIGHT_VERSION" >> $GITHUB_ENV
+      - name: (windows) Set Playwright path and Get playwright version
+        if: runner.os == 'Windows'
+        run: |
+          echo "PLAYWRIGHT_BROWSERS_PATH=$HOME\.cache\playwright-bin" >> $env:GITHUB_ENV
+          PLAYWRIGHT_VERSION="$(bun run ./scripts/playwright-version.ts)"
+          echo "PLAYWRIGHT_VERSION=$env:PLAYWRIGHT_VERSION" >> $env:GITHUB_ENV
+
+      - name: Cache Playwright's binary
+        uses: actions/cache@v3
+        with:
+          key: ${{ runner.os }}-playwright-bin-v1-${{ env.PLAYWRIGHT_VERSION }}
+          path: ${{ env.PLAYWRIGHT_BROWSERS_PATH }}
+          restore-keys: |
+            ${{ runner.os }}-playwright-bin-v1-
+
+      - name: Install Playwright
+        # does not need to explicitly set chromium after https://github.com/microsoft/playwright/issues/14862 is solved
+        run: bun x playwright install chromium
+
       - name: Run test
         run: ./scripts/e2e.sh
 

bun.lockb

@@ -114,6 +114,7 @@
     "npm-run-all": "^4.1.5",
     "miniflare": "^3.20231016.0",
     "supertest": "^6.3.3",
+    "playwright": "^1.38.1",
     "pkg-types": "^1.0.2",
     "typescript": "^5.2.2",
     "unbuild": "^2.0.0",

package.json

@@ -0,0 +1,24 @@
+import { resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { readPackageJSON } from 'pkg-types'
+import { isExists } from './utils.ts'
+
+const __dirname = fileURLToPath(new URL('.', import.meta.url))
+
+async function main() {
+  const playwrightPath = resolve(__dirname, '../node_modules/playwright')
+  if (!await isExists(playwrightPath)) {
+    throw new Error(`not found '${playwrightPath}'`)
+  }
+
+  const playwrightPkg = await readPackageJSON(playwrightPath)
+  if (!playwrightPkg.version) {
+    throw new Error(`not found 'version' in 'playwright'`)
+  }
+  console.log(playwrightPkg.version)
+}
+
+main().catch((err) => {
+  console.error(err)
+  process.exit(1)
+})

scripts/playwright-version.ts

@@ -1,19 +1,11 @@
-import { constants as FS_CONSTANTS, promises as fs } from 'node:fs'
+import { promises as fs } from 'node:fs'
 import { resolve } from 'node:path'
 import { fileURLToPath } from 'node:url'
 import { readPackageJSON, writePackageJSON } from 'pkg-types'
+import { isExists } from './utils.ts'
 
 const __dirname = fileURLToPath(new URL('.', import.meta.url))
 
-export async function isExists(path: string) {
-  try {
-    await fs.access(path, FS_CONSTANTS.F_OK)
-    return true
-  } catch {
-    return false
-  }
-}
-
 type Platform = 'browser' | 'node' | 'deno' | 'bun'
 
 async function replaceNodePlatform(platform: 'node' | 'bun', playgroundPath: string) {

scripts/replaceDeps.ts

@@ -0,0 +1,10 @@
+import { constants as FS_CONSTANTS, promises as fs } from 'node:fs'
+
+export async function isExists(path: string) {
+  try {
+    await fs.access(path, FS_CONSTANTS.F_OK)
+    return true
+  } catch {
+    return false
+  }
+}