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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy