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

feat: playwright component testing#249

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Open
sand4rt wants to merge1 commit intovuejs:main
base:main
Choose a base branch
Loading
fromsand4rt:playwright-ct-description
Open
Show file tree
Hide file tree
Changes fromall commits
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletionindex.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -228,6 +228,9 @@ async function init() {
},
{
title: 'Playwright',
description: answers.needsVitest
? undefined
: 'also supports unit testing with Playwright Component Testing',
value: 'playwright'
}
]
Expand DownExpand Up@@ -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)

Expand DownExpand Up@@ -332,6 +336,9 @@ async function init() {
if (needsPlaywright) {
render('config/playwright')
}
if (needsPlaywrightCT) {
render('config/playwright-ct')
}
if (needsTypeScript) {
render('config/typescript')

Expand DownExpand Up@@ -437,8 +444,9 @@ async function init() {
needsTypeScript,
needsVitest,
needsCypress,
needsPlaywright,
needsCypressCT,
needsPlaywright,
needsPlaywrightCT,
needsEslint
})
)
Expand Down
49 changes: 44 additions & 5 deletionspnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more abouthow customized files appear on GitHub.

3 changes: 3 additions & 0 deletionstemplate/config/playwright-ct/_gitignore
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
test-results/
playwright-report/
/playwright/.cache/
9 changes: 9 additions & 0 deletionstemplate/config/playwright-ct/package.json
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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"
}
}
54 changes: 54 additions & 0 deletionstemplate/config/playwright-ct/playwright-ct.config.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
import { defineConfig, devices } from '@playwright/experimental-ct-vue'
import { resolve } from 'path'

/**
* 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: {
'@': resolve(__dirname, './src')
}
}
}
},

/* Configure projects for major browsers */
projects: [
{
name: 'chromium',
use: { ...devices['Desktop Chrome'] }
},
{
name: 'firefox',
use: { ...devices['Desktop Firefox'] }
},
{
name: 'webkit',
use: { ...devices['Desktop Safari'] }
}
]
})
54 changes: 54 additions & 0 deletionstemplate/config/playwright-ct/playwright.config.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
const { defineConfig, devices } = require('@playwright/experimental-ct-vue')
const { resolve } = require('path')

/**
* 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: {
'@': resolve(__dirname, './src')
}
}
}
},

/* Configure projects for major browsers */
projects: [
{
name: 'chromium',
use: { ...devices['Desktop Chrome'] }
},
{
name: 'firefox',
use: { ...devices['Desktop Firefox'] }
},
{
name: 'webkit',
use: { ...devices['Desktop Safari'] }
}
]
})
12 changes: 12 additions & 0 deletionstemplate/config/playwright-ct/playwright/index.html
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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.js"></script>
</body>
</html>
2 changes: 2 additions & 0 deletionstemplate/config/playwright-ct/playwright/index.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
// Import styles, initialize component theme here.
// import '../src/common.css';
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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')
})
21 changes: 21 additions & 0 deletionsutils/generateReadme.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -22,6 +22,7 @@ export default function generateReadme({
needsCypress,
needsCypressCT,
needsPlaywright,
needsPlaywrightCT,
needsVitest,
needsEslint
}) {
Expand DownExpand Up@@ -124,6 +125,26 @@ ${commandFor('test:e2e', '--debug')}
`
}

if (needsCypressCT) {
npmScriptsDescriptions += `
### Run Component Tests with [Playwright](https://playwright.dev/docs/test-components)

\`\`\`sh
# Install browsers for the first run
npx playwright install

# Runs the component tests
${commandFor('test:unit')}
# Runs the tests only on Chromium
${commandFor('test:unit', '--project=chromium')}
# Runs the tests of a specific file
${commandFor('test:unit', 'tests/example.spec.ts')}
# Runs the tests in debug mode
${commandFor('test:unit', '--debug')}
\`\`\`
`
}

if (needsEslint) {
npmScriptsDescriptions += `
### Lint with [ESLint](https://eslint.org/)
Expand Down
[8]ページ先頭
©2009-2025 Movatter.jp