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)
 
@@ -333,6 +337,9 @@ async function init() {
   if (needsPlaywright) {
     render('config/playwright')
   }
+  if (needsPlaywrightCT) {
+    render('config/playwright-ct')
+  }
   if (needsTypeScript) {
     render('config/typescript')
 
@@ -447,7 +454,9 @@ async function init() {
   console.log(`\nDone. Now run:\n`)
   if (root !== cwd) {
     const cdProjectName = path.relative(cwd, root)
-    console.log(`  ${bold(green(`cd ${cdProjectName.includes(' ') ? `"${cdProjectName}"` : cdProjectName}`))}`)
+    console.log(
+      `  ${bold(green(`cd ${cdProjectName.includes(' ') ? `"${cdProjectName}"` : cdProjectName}`))}`
+    )
   }
   console.log(`  ${bold(green(getCommand(packageManager, 'install')))}`)
   if (needsPrettier) {

template/config/playwright-ct/_gitignore

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

template/config/playwright-ct/package.json

@@ -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/playwright-ct.config.ts

@@ -0,0 +1,54 @@
+import { defineConfig, devices } from '@playwright/experimental-ct-vue'
+import { fileURLToPath, URL } from 'url'
+
+/**
+ * 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: {
+          '@': fileURLToPath(new URL('./src', import.meta.url))
+        }
+      }
+    }
+  },
+
+  /* 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,54 @@
+const { defineConfig } = require('@playwright/experimental-ct-vue')
+const { fileURLToPath, URL } = require('url')
+
+/**
+ * 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: {
+          '@': fileURLToPath(new URL('./src', import.meta.url))
+        }
+      }
+    }
+  },
+
+  /* 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/index.html

@@ -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.ts"></script>
+  </body>
+</html>

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

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

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

@@ -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')
+})