feat(e2e): add playwright runner (#776)

Co-authored-by: Max Schmitt <[email protected]>

.github/workflows/ci.yml

@@ -83,7 +83,7 @@ jobs:
             ${{ runner.os }}-playwright-bin-v1-
 
       - name: Install Playwright
-        run: pnpm playwright-core install chromium
+        run: pnpm playwright install chromium
 
       - name: Prepare build environment
         run: pnpm dev:prepare

build.config.ts

@@ -6,6 +6,7 @@ export default defineBuildConfig({
   declaration: true,
   entries: [
     'src/e2e',
+    'src/playwright',
     'src/experimental',
     'src/config',
     'src/module.ts',

examples/app-playwright/.gitignore

@@ -0,0 +1,2 @@
+test-results/
+playwright-report/

examples/app-playwright/app.vue

@@ -0,0 +1,5 @@
+<template>
+  <h1>
+    Welcome to Playwright!
+  </h1>
+</template>

examples/app-playwright/nuxt.config.ts

@@ -0,0 +1,4 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  devtools: { enabled: true }
+})

examples/app-playwright/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "nuxt-app-playwright",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare",
+    "test": "playwright test"
+  },
+  "dependencies": {
+    "nuxt": "^3.9.1",
+    "vue": "^3.4.7",
+    "vue-router": "^4.2.5"
+  },
+  "devDependencies": {
+    "@nuxt/test-utils": "latest",
+    "@playwright/test": "^1.42.1"
+  }
+}

examples/app-playwright/playwright.config.ts

@@ -0,0 +1,41 @@
+import { fileURLToPath } from 'node:url'
+import { defineConfig, devices } from '@playwright/test'
+import type { ConfigOptions } from '@nuxt/test-utils/playwright'
+
+const devicesToTest = [
+  'Desktop Chrome',
+  // Test against other common browser engines.
+  // 'Desktop Firefox',
+  // 'Desktop Safari',
+  // Test against mobile viewports.
+  // 'Pixel 5',
+  // 'iPhone 12',
+  // Test against branded browsers.
+  // { ...devices['Desktop Edge'], channel: 'msedge' },
+  // { ...devices['Desktop Chrome'], channel: 'chrome' },
+] satisfies Array<string | typeof devices[string]> 
+
+/* See https://playwright.dev/docs/test-configuration.*/
+export default defineConfig<ConfigOptions>({
+  testDir: './tests',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+    /* Nuxt configuration options */
+    nuxt: {
+      rootDir: fileURLToPath(new URL('.', import.meta.url))
+    }
+  },
+  projects: devicesToTest.map(p => typeof p === 'string' ? ({ name: p, use: devices[p] }) : p),
+})

examples/app-playwright/tests/basic.test.ts

@@ -0,0 +1,6 @@
+import { expect, test } from '@nuxt/test-utils/playwright'
+
+test('test', async ({ page, goto }) => {
+  await goto('/', { waitUntil: 'hydration' })
+  await expect(page.getByRole('heading')).toHaveText('Welcome to Playwright!')
+})

examples/app-playwright/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "./.nuxt/tsconfig.json"
+}

package.json

@@ -13,6 +13,7 @@
     ".": "./dist/e2e.mjs",
     "./config": "./dist/config.mjs",
     "./e2e": "./dist/e2e.mjs",
+    "./playwright": "./dist/playwright.mjs",
     "./experimental": "./dist/experimental.mjs",
     "./module": "./dist/module.mjs",
     "./runtime": "./dist/runtime-utils/index.mjs",
@@ -68,6 +69,7 @@
     "@nuxt/devtools": "1.0.8",
     "@nuxt/eslint-config": "0.2.0",
     "@nuxt/module-builder": "0.5.5",
+    "@playwright/test": "1.42.1",
     "@testing-library/vue": "8.0.2",
     "@types/estree": "1.0.5",
     "@types/jsdom": "21.1.6",
@@ -96,6 +98,7 @@
   "peerDependencies": {
     "@cucumber/cucumber": "^10.3.1",
     "@jest/globals": "^29.5.0",
+    "@playwright/test": "^1.42.1",
     "@testing-library/vue": "^7.0.0 || ^8.0.1",
     "@vitest/ui": "^0.34.6 || ^1.0.0",
     "@vue/test-utils": "^2.4.2",
@@ -112,6 +115,9 @@
     "@cucumber/cucumber": {
       "optional": true
     },
+    "@playwright/test": {
+      "optional": true
+    },
     "@testing-library/vue": {
       "optional": true
     },
@@ -149,4 +155,4 @@
     "node": "^14.18.0 || >=16.10.0"
   },
   "packageManager": "[email protected]"
-}
+}

playwright.d.ts

@@ -0,0 +1 @@
+export * from './dist/playwright'