Skip to content

Commit 46c4818

Browse files
sand4rtsand4rt
committed
feat: playwright component testing
1 parent a263d8a commit 46c4818

File tree

10 files changed

+224
-6
lines changed

10 files changed

+224
-6
lines changed

‎index.ts‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -228,6 +228,9 @@ async function init() {
228228
},
229229
{
230230
title: 'Playwright',
231+
description: answers.needsVitest
232+
? undefined
233+
: 'also supports unit testing with Playwright Component Testing',
231234
value: 'playwright'
232235
}
233236
]
@@ -284,6 +287,7 @@ async function init() {
284287
const needsCypress = argv.cypress || argv.tests || needsE2eTesting === 'cypress'
285288
const needsCypressCT = needsCypress && !needsVitest
286289
const needsPlaywright = argv.playwright || needsE2eTesting === 'playwright'
290+
const needsPlaywrightCT = needsPlaywright && !needsVitest
287291

288292
const root = path.join(cwd, targetDir)
289293

@@ -332,6 +336,9 @@ async function init() {
332336
if (needsPlaywright) {
333337
render('config/playwright')
334338
}
339+
if (needsPlaywrightCT) {
340+
render('config/playwright-ct')
341+
}
335342
if (needsTypeScript) {
336343
render('config/typescript')
337344

@@ -437,8 +444,9 @@ async function init() {
437444
needsTypeScript,
438445
needsVitest,
439446
needsCypress,
440-
needsPlaywright,
441447
needsCypressCT,
448+
needsPlaywright,
449+
needsPlaywrightCT,
442450
needsEslint
443451
})
444452
)

‎pnpm-lock.yaml‎

Lines changed: 44 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎template/config/playwright-ct/_gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
test-results/
2+
playwright-report/
3+
/playwright/.cache/

‎template/config/playwright-ct/package.json‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"scripts": {
3+
"test:unit": "playwright test -c playwright-ct.config.ts"
4+
},
5+
"devDependencies": {
6+
"@playwright/experimental-ct-vue": "^1.33.0",
7+
"@playwright/test": "^1.33.0"
8+
}
9+
}

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

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import { defineConfig, devices } from '@playwright/experimental-ct-vue'
2+
import { resolve } from 'path'
3+
4+
/**
5+
* See https://playwright.dev/docs/test-configuration.
6+
*/
7+
export default defineConfig({
8+
testDir: './',
9+
/* The base directory, relative to the config file, for snapshot files created with toMatchSnapshot and toHaveScreenshot. */
10+
snapshotDir: './__snapshots__',
11+
/* Maximum time one test can run for. */
12+
timeout: 10 * 1000,
13+
/* Run tests in files in parallel */
14+
fullyParallel: true,
15+
/* Fail the build on CI if you accidentally left test.only in the source code. */
16+
forbidOnly: !!process.env.CI,
17+
/* Retry on CI only */
18+
retries: process.env.CI ? 2 : 0,
19+
/* Opt out of parallel tests on CI. */
20+
workers: process.env.CI ? 1 : undefined,
21+
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
22+
reporter: 'html',
23+
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
24+
use: {
25+
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
26+
trace: 'on-first-retry',
27+
/* Port to use for Playwright component endpoint. */
28+
ctPort: 3100,
29+
/* Vite configuration for Playwright component testing. */
30+
ctViteConfig: {
31+
resolve: {
32+
alias: {
33+
'@': resolve(__dirname, './src')
34+
}
35+
}
36+
}
37+
},
38+
39+
/* Configure projects for major browsers */
40+
projects: [
41+
{
42+
name: 'chromium',
43+
use: { ...devices['Desktop Chrome'] }
44+
},
45+
{
46+
name: 'firefox',
47+
use: { ...devices['Desktop Firefox'] }
48+
},
49+
{
50+
name: 'webkit',
51+
use: { ...devices['Desktop Safari'] }
52+
}
53+
]
54+
})

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

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
const { defineConfig, devices } = require('@playwright/experimental-ct-vue')
2+
const { resolve } = require('path')
3+
4+
/**
5+
* See https://playwright.dev/docs/test-configuration.
6+
*/
7+
module.exports = defineConfig({
8+
testDir: './',
9+
/* The base directory, relative to the config file, for snapshot files created with toMatchSnapshot and toHaveScreenshot. */
10+
snapshotDir: './__snapshots__',
11+
/* Maximum time one test can run for. */
12+
timeout: 10 * 1000,
13+
/* Run tests in files in parallel */
14+
fullyParallel: true,
15+
/* Fail the build on CI if you accidentally left test.only in the source code. */
16+
forbidOnly: !!process.env.CI,
17+
/* Retry on CI only */
18+
retries: process.env.CI ? 2 : 0,
19+
/* Opt out of parallel tests on CI. */
20+
workers: process.env.CI ? 1 : undefined,
21+
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
22+
reporter: 'html',
23+
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
24+
use: {
25+
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
26+
trace: 'on-first-retry',
27+
/* Port to use for Playwright component endpoint. */
28+
ctPort: 3100,
29+
/* Vite configuration for Playwright component testing. */
30+
ctViteConfig: {
31+
resolve: {
32+
alias: {
33+
'@': resolve(__dirname, './src')
34+
}
35+
}
36+
}
37+
},
38+
39+
/* Configure projects for major browsers */
40+
projects: [
41+
{
42+
name: 'chromium',
43+
use: { ...devices['Desktop Chrome'] }
44+
},
45+
{
46+
name: 'firefox',
47+
use: { ...devices['Desktop Firefox'] }
48+
},
49+
{
50+
name: 'webkit',
51+
use: { ...devices['Desktop Safari'] }
52+
}
53+
]
54+
})

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Testing Page</title>
7+
</head>
8+
<body>
9+
<div id="root"></div>
10+
<script type="module" src="./index.ts"></script>
11+
</body>
12+
</html>

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
// Import styles, initialize component theme here.
2+
// import '../src/common.css';

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { expect, test } from '@playwright/experimental-ct-vue'
2+
import HelloWorld from '../HelloWorld.vue'
3+
4+
5+
test('playground', async ({ mount }) => {
6+
await mount(HelloWorld, {
7+
props: { msg: 'Hello Playwright' }
8+
})
9+
})
10+
11+
test('renders properly', async ({ mount }) => {
12+
const component = await mount(HelloWorld, {
13+
props: { msg: 'Hello Playwright' }
14+
})
15+
await expect(component.getByRole('heading', { level: 1 })).toContainText('Hello Playwright')
16+
})

‎utils/generateReadme.ts‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ export default function generateReadme({
2222
needsCypress,
2323
needsCypressCT,
2424
needsPlaywright,
25+
needsPlaywrightCT,
2526
needsVitest,
2627
needsEslint
2728
}) {
@@ -124,6 +125,26 @@ ${commandFor('test:e2e', '--debug')}
124125
`
125126
}
126127

128+
if (needsCypressCT) {
129+
npmScriptsDescriptions += `
130+
### Run Component Tests with [Playwright](https://playwright.dev/docs/test-components)
131+
132+
\`\`\`sh
133+
# Install browsers for the first run
134+
npx playwright install
135+
136+
# Runs the component tests
137+
${commandFor('test:unit')}
138+
# Runs the tests only on Chromium
139+
${commandFor('test:unit', '--project=chromium')}
140+
# Runs the tests of a specific file
141+
${commandFor('test:unit', 'tests/example.spec.ts')}
142+
# Runs the tests in debug mode
143+
${commandFor('test:unit', '--debug')}
144+
\`\`\`
145+
`
146+
}
147+
127148
if (needsEslint) {
128149
npmScriptsDescriptions += `
129150
### Lint with [ESLint](https://eslint.org/)

0 commit comments

Comments
 (0)