Movatterモバイル変換

[0]ホーム
URL:

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

Commit0d60b4e

Browse files
committed
feat: playwright component testing
1 parenta263d8a commit0d60b4e

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
constneedsCypress=argv.cypress||argv.tests||needsE2eTesting==='cypress'
285288
constneedsCypressCT=needsCypress&&!needsVitest
286289
constneedsPlaywright=argv.playwright||needsE2eTesting==='playwright'
290+
constneedsPlaywrightCT=needsPlaywright&&!needsVitest
287291

288292
constroot=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 aboutcustomizing how changed files appear on GitHub.
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{resolve}from'path'
3+
4+
/**
5+
* See https://playwright.dev/docs/test-configuration.
6+
*/
7+
exportdefaultdefineConfig({
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+
})
Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
const{ defineConfig, defices}=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+
})
Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<htmllang="en">
3+
<head>
4+
<metacharset="UTF-8"/>
5+
<metaname="viewport"content="width=device-width, initial-scale=1.0"/>
6+
<title>Testing Page</title>
7+
</head>
8+
<body>
9+
<divid="root"></div>
10+
<scripttype="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+
importHelloWorldfrom'../HelloWorld.vue'
3+
4+
5+
test('playground',async({ mount})=>{
6+
awaitmount(HelloWorld,{
7+
props:{msg:'Hello Playwright'}
8+
})
9+
})
10+
11+
test('renders properly',async({ mount})=>{
12+
constcomponent=awaitmount(HelloWorld,{
13+
props:{msg:'Hello Playwright'}
14+
})
15+
awaitexpect(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)
[8]ページ先頭
©2009-2025 Movatter.jp