Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit b98a4b9

Browse files
committed
feat: playwright component testing
1 parent ca59ce9 commit b98a4b9

File tree

8 files changed

+160
-1
lines changed

8 files changed

+160
-1
lines changed

‎index.ts

Lines changed: 10 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

@@ -333,6 +337,9 @@ async function init() {
333337
if (needsPlaywright) {
334338
render('config/playwright')
335339
}
340+
if (needsPlaywrightCT) {
341+
render('config/playwright-ct')
342+
}
336343
if (needsTypeScript) {
337344
render('config/typescript')
338345

@@ -447,7 +454,9 @@ async function init() {
447454
console.log(`\nDone. Now run:\n`)
448455
if (root !== cwd) {
449456
const cdProjectName = path.relative(cwd, root)
450-
console.log(` ${bold(green(`cd ${cdProjectName.includes(' ') ? `"${cdProjectName}"` : cdProjectName}`))}`)
457+
console.log(
458+
` ${bold(green(`cd ${cdProjectName.includes(' ') ? `"${cdProjectName}"` : cdProjectName}`))}`
459+
)
451460
}
452461
console.log(` ${bold(green(getCommand(packageManager, 'install')))}`)
453462
if (needsPrettier) {
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/
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+
}
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 { fileURLToPath, URL } from 'url'
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+
'@': fileURLToPath(new URL('./src', import.meta.url))
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+
})
Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
const { defineConfig } = require('@playwright/experimental-ct-vue')
2+
const { fileURLToPath, URL } = require('url')
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+
'@': fileURLToPath(new URL('./src', import.meta.url))
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+
})
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>
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';
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+
})

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /