feat: playwright component testing

Author: sand4rt

index.ts

@@ -228,6 +228,9 @@ async function init() {
             },
             {
               title: 'Playwright',
+              description: answers.needsVitest
+                ? undefined
+                : 'also supports unit testing with Playwright Component Testing',
               value: 'playwright'
             }
           ]
@@ -284,6 +287,7 @@ async function init() {
   const needsCypress = argv.cypress || argv.tests || needsE2eTesting === 'cypress'
   const needsCypressCT = needsCypress && !needsVitest
   const needsPlaywright = argv.playwright || needsE2eTesting === 'playwright'
+  const needsPlaywrightCT = needsPlaywright && !needsVitest
 
   const root = path.join(cwd, targetDir)
 
@@ -332,6 +336,9 @@ async function init() {
   if (needsPlaywright) {
     render('config/playwright')
   }
+  if (needsPlaywrightCT) {
+    render('config/playwright-ct')
+  }
   if (needsTypeScript) {
     render('config/typescript')
 
@@ -437,8 +444,9 @@ async function init() {
       needsTypeScript,
       needsVitest,
       needsCypress,
-      needsPlaywright,
       needsCypressCT,
+      needsPlaywright,
+      needsPlaywrightCT,
       needsEslint
     })
   )

pnpm-lock.yaml

@@ -0,0 +1,3 @@
+test-results/
+playwright-report/
+/playwright/.cache/

template/config/playwright-ct/_gitignore

@@ -0,0 +1,9 @@
+{
+  "scripts": {
+    "test:unit": "playwright test -c playwright-ct.config.ts"
+  },
+  "devDependencies": {
+    "@playwright/experimental-ct-vue": "^1.33.0",
+    "@playwright/test": "^1.33.0"
+  }
+}

template/config/playwright-ct/package.json

@@ -0,0 +1,54 @@
+import { defineConfig, devices } from '@playwright/experimental-ct-vue'
+import { resolve } from 'path'
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './',
+  /* The base directory, relative to the config file, for snapshot files created with toMatchSnapshot and toHaveScreenshot. */
+  snapshotDir: './__snapshots__',
+  /* Maximum time one test can run for. */
+  timeout: 10 * 1000,
+  /* 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',
+    /* Port to use for Playwright component endpoint. */
+    ctPort: 3100,
+    /* Vite configuration for Playwright component testing. */
+    ctViteConfig: {
+      resolve: {
+        alias: {
+          '@': resolve(__dirname, './src')
+        }
+      }
+    }
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] }
+    },
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] }
+    },
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] }
+    }
+  ]
+})

template/config/playwright-ct/playwright-ct.config.ts

@@ -0,0 +1,54 @@
+const { defineConfig, devices } = require('@playwright/experimental-ct-vue')
+const { resolve } = require('path')
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+module.exports = defineConfig({
+  testDir: './',
+  /* The base directory, relative to the config file, for snapshot files created with toMatchSnapshot and toHaveScreenshot. */
+  snapshotDir: './__snapshots__',
+  /* Maximum time one test can run for. */
+  timeout: 10 * 1000,
+  /* 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',
+    /* Port to use for Playwright component endpoint. */
+    ctPort: 3100,
+    /* Vite configuration for Playwright component testing. */
+    ctViteConfig: {
+      resolve: {
+        alias: {
+          '@': resolve(__dirname, './src')
+        }
+      }
+    }
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] }
+    },
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] }
+    },
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] }
+    }
+  ]
+})

template/config/playwright-ct/playwright.config.js

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Testing Page</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./index.js"></script>
+  </body>
+</html>

template/config/playwright-ct/playwright/index.html

@@ -0,0 +1,2 @@
+// Import styles, initialize component theme here.
+// import '../src/common.css';

template/config/playwright-ct/playwright/index.js

@@ -0,0 +1,16 @@
+import { expect, test } from '@playwright/experimental-ct-vue'
+import HelloWorld from '../HelloWorld.vue'
+
+
+test('playground', async ({ mount }) => {
+  await mount(HelloWorld, {
+    props: { msg: 'Hello Playwright' }
+  })
+})
+
+test('renders properly', async ({ mount }) => {
+  const component = await mount(HelloWorld, {
+    props: { msg: 'Hello Playwright' }
+  })
+  await expect(component.getByRole('heading', { level: 1 })).toContainText('Hello Playwright')
+})

template/config/playwright-ct/src/components/__tests__/HelloWorld.spec.ts

@@ -22,6 +22,7 @@ export default function generateReadme({
   needsCypress,
   needsCypressCT,
   needsPlaywright,
+  needsPlaywrightCT,
   needsVitest,
   needsEslint
 }) {
@@ -124,6 +125,26 @@ ${commandFor('test:e2e', '--debug')}
 `
   }
 
+  if (needsCypressCT) {
+    npmScriptsDescriptions += `
+### Run Component Tests with [Playwright](https://playwright.dev/docs/test-components)
+
+\`\`\`sh
+# Install browsers for the first run
+npx playwright install
+
+# Runs the component tests
+${commandFor('test:unit')}
+# Runs the tests only on Chromium
+${commandFor('test:unit', '--project=chromium')}
+# Runs the tests of a specific file
+${commandFor('test:unit', 'tests/example.spec.ts')}
+# Runs the tests in debug mode
+${commandFor('test:unit', '--debug')}
+\`\`\`
+`
+  }
+
   if (needsEslint) {
     npmScriptsDescriptions += `
 ### Lint with [ESLint](https://eslint.org/)