mirror of
https://github.com/microsoft/playwright.git
synced 2024-09-11 20:37:54 +03:00
chore(create-playwright): enhance UX follow-ups and add more verbose Playwright Test config (#8942)
This commit is contained in:
parent
d82cb9a2ff
commit
f68ae4a2e0
@ -13,4 +13,3 @@ browser_patches/chromium/output/
|
|||||||
**/*.d.ts
|
**/*.d.ts
|
||||||
output/
|
output/
|
||||||
/test-results/
|
/test-results/
|
||||||
packages/create-playwright/assets/**
|
|
||||||
|
@ -5,3 +5,4 @@
|
|||||||
/tests/**/*
|
/tests/**/*
|
||||||
/playwright.config.ts
|
/playwright.config.ts
|
||||||
/tsconfig.json
|
/tsconfig.json
|
||||||
|
/assets/.eslintrc.js
|
||||||
|
6
packages/create-playwright/assets/.eslintrc.js
Normal file
6
packages/create-playwright/assets/.eslintrc.js
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
module.exports = {
|
||||||
|
"extends": "../../../.eslintrc.js",
|
||||||
|
"rules": {
|
||||||
|
"notice/notice": 0
|
||||||
|
}
|
||||||
|
};
|
@ -5,7 +5,7 @@ on:
|
|||||||
pull_request:
|
pull_request:
|
||||||
branches: [ main, master ]
|
branches: [ main, master ]
|
||||||
jobs:
|
jobs:
|
||||||
build:
|
test:
|
||||||
timeout-minutes: 60
|
timeout-minutes: 60
|
||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
steps:
|
steps:
|
||||||
@ -19,3 +19,8 @@ jobs:
|
|||||||
run: npx playwright install --with-deps
|
run: npx playwright install --with-deps
|
||||||
- name: Run Playwright tests
|
- name: Run Playwright tests
|
||||||
run: {{runTestsCommand}}
|
run: {{runTestsCommand}}
|
||||||
|
- uses: actions/upload-artifact@v2
|
||||||
|
if: failure()
|
||||||
|
with:
|
||||||
|
name: playwright-test-results
|
||||||
|
path: test-results/
|
||||||
|
@ -5,10 +5,16 @@ const path = require('path')
|
|||||||
/**
|
/**
|
||||||
* @see https://playwright.dev/docs/test-configuration
|
* @see https://playwright.dev/docs/test-configuration
|
||||||
* @type{import('@playwright/test').PlaywrightTestConfig}
|
* @type{import('@playwright/test').PlaywrightTestConfig}
|
||||||
* */
|
*/
|
||||||
const config = {
|
const config = {
|
||||||
|
// Timeout per test
|
||||||
timeout: 30 * 1000,
|
timeout: 30 * 1000,
|
||||||
|
// Test directory
|
||||||
testDir: path.join(__dirname, '{{testDir}}'),
|
testDir: path.join(__dirname, '{{testDir}}'),
|
||||||
|
// If a test fails, retry it additional 2 times
|
||||||
|
retries: 2,
|
||||||
|
// Artifacts folder where screenshots, videos, and traces are stored.
|
||||||
|
outputDir: 'test-results/',
|
||||||
|
|
||||||
// Run your local dev server before starting the tests:
|
// Run your local dev server before starting the tests:
|
||||||
// https://playwright.dev/docs/test-advanced#launching-a-development-web-server-during-the-tests
|
// https://playwright.dev/docs/test-advanced#launching-a-development-web-server-during-the-tests
|
||||||
@ -17,37 +23,48 @@ const config = {
|
|||||||
// port: 3000,
|
// port: 3000,
|
||||||
// },
|
// },
|
||||||
|
|
||||||
|
use: {
|
||||||
|
// Retry a test if its failing with enabled tracing. This allows you to analyse the DOM, console logs, network traffic etc.
|
||||||
|
// More information: https://playwright.dev/docs/trace-viewer
|
||||||
|
trace: 'retry-with-trace',
|
||||||
|
|
||||||
|
// All available context options: https://playwright.dev/docs/api/class-browser#browser-new-context
|
||||||
|
contextOptions: {
|
||||||
|
ignoreHTTPSErrors: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
projects: [
|
projects: [
|
||||||
{
|
{
|
||||||
name: 'Desktop Chrome',
|
name: 'Desktop Chrome',
|
||||||
use: {
|
use: {
|
||||||
...devices['Desktop Chrome'],
|
...devices['Desktop Chrome'],
|
||||||
|
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Desktop Firefox',
|
||||||
|
use: {
|
||||||
|
...devices['Desktop Firefox'],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'Desktop Safari',
|
name: 'Desktop Safari',
|
||||||
use: {
|
use: {
|
||||||
browserName: 'webkit',
|
...devices['Desktop Safari'],
|
||||||
viewport: { width: 1200, height: 750 },
|
},
|
||||||
}
|
|
||||||
},
|
},
|
||||||
// Test against mobile viewports.
|
// Test against mobile viewports.
|
||||||
{
|
{
|
||||||
name: 'Mobile Chrome',
|
name: 'Mobile Chrome',
|
||||||
use: devices['Pixel 5'],
|
use: {
|
||||||
|
...devices['Pixel 5'],
|
||||||
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'Mobile Safari',
|
name: 'Mobile Safari',
|
||||||
use: devices['iPhone 12'],
|
use: devices['iPhone 12'],
|
||||||
},
|
},
|
||||||
{
|
|
||||||
name: 'Desktop Firefox',
|
|
||||||
use: {
|
|
||||||
browserName: 'firefox',
|
|
||||||
viewport: { width: 800, height: 600 },
|
|
||||||
}
|
|
||||||
},
|
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
|
||||||
module.exports = config;
|
module.exports = config;
|
||||||
|
@ -3,8 +3,14 @@ import path from 'path';
|
|||||||
|
|
||||||
// Reference: https://playwright.dev/docs/test-configuration
|
// Reference: https://playwright.dev/docs/test-configuration
|
||||||
const config: PlaywrightTestConfig = {
|
const config: PlaywrightTestConfig = {
|
||||||
|
// Timeout per test
|
||||||
timeout: 30 * 1000,
|
timeout: 30 * 1000,
|
||||||
|
// Test directory
|
||||||
testDir: path.join(__dirname, '{{testDir}}'),
|
testDir: path.join(__dirname, '{{testDir}}'),
|
||||||
|
// If a test fails, retry it additional 2 times
|
||||||
|
retries: 2,
|
||||||
|
// Artifacts folder where screenshots, videos, and traces are stored.
|
||||||
|
outputDir: 'test-results/',
|
||||||
|
|
||||||
// Run your local dev server before starting the tests:
|
// Run your local dev server before starting the tests:
|
||||||
// https://playwright.dev/docs/test-advanced#launching-a-development-web-server-during-the-tests
|
// https://playwright.dev/docs/test-advanced#launching-a-development-web-server-during-the-tests
|
||||||
@ -13,36 +19,48 @@ const config: PlaywrightTestConfig = {
|
|||||||
// port: 3000,
|
// port: 3000,
|
||||||
// },
|
// },
|
||||||
|
|
||||||
|
use: {
|
||||||
|
// Retry a test if its failing with enabled tracing. This allows you to analyse the DOM, console logs, network traffic etc.
|
||||||
|
// More information: https://playwright.dev/docs/trace-viewer
|
||||||
|
trace: 'retry-with-trace',
|
||||||
|
|
||||||
|
// All available context options: https://playwright.dev/docs/api/class-browser#browser-new-context
|
||||||
|
contextOptions: {
|
||||||
|
ignoreHTTPSErrors: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
projects: [
|
projects: [
|
||||||
{
|
{
|
||||||
name: 'Desktop Chrome',
|
name: 'Desktop Chrome',
|
||||||
use: {
|
use: {
|
||||||
...devices['Desktop Chrome'],
|
...devices['Desktop Chrome'],
|
||||||
|
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Desktop Firefox',
|
||||||
|
use: {
|
||||||
|
...devices['Desktop Firefox'],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'Desktop Safari',
|
name: 'Desktop Safari',
|
||||||
use: {
|
use: {
|
||||||
browserName: 'webkit',
|
...devices['Desktop Safari'],
|
||||||
viewport: { width: 1200, height: 750 },
|
},
|
||||||
}
|
|
||||||
},
|
},
|
||||||
// Test against mobile viewports.
|
// Test against mobile viewports.
|
||||||
{
|
{
|
||||||
name: 'Mobile Chrome',
|
name: 'Mobile Chrome',
|
||||||
use: devices['Pixel 5'],
|
use: {
|
||||||
|
...devices['Pixel 5'],
|
||||||
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'Mobile Safari',
|
name: 'Mobile Safari',
|
||||||
use: devices['iPhone 12'],
|
use: devices['iPhone 12'],
|
||||||
},
|
},
|
||||||
{
|
|
||||||
name: 'Desktop Firefox',
|
|
||||||
use: {
|
|
||||||
browserName: 'firefox',
|
|
||||||
viewport: { width: 800, height: 600 },
|
|
||||||
}
|
|
||||||
},
|
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
export default config;
|
export default config;
|
||||||
|
@ -43,6 +43,7 @@ class Generator {
|
|||||||
const { files, commands } = await this._identifyChanges(answers);
|
const { files, commands } = await this._identifyChanges(answers);
|
||||||
executeCommands(this.rootDir, commands);
|
executeCommands(this.rootDir, commands);
|
||||||
await createFiles(this.rootDir, files);
|
await createFiles(this.rootDir, files);
|
||||||
|
this._patchGitIgnore();
|
||||||
await this._patchPackageJSON();
|
await this._patchPackageJSON();
|
||||||
this._printOutro(answers);
|
this._printOutro(answers);
|
||||||
}
|
}
|
||||||
@ -116,19 +117,18 @@ class Generator {
|
|||||||
command: 'npx playwright install --with-deps',
|
command: 'npx playwright install --with-deps',
|
||||||
});
|
});
|
||||||
|
|
||||||
files.set('.gitignore', this._buildGitIgnore());
|
|
||||||
|
|
||||||
return { files, commands };
|
return { files, commands };
|
||||||
}
|
}
|
||||||
|
|
||||||
private _buildGitIgnore(): string {
|
private _patchGitIgnore() {
|
||||||
|
const gitIgnorePath = path.join(this.rootDir, '.gitignore');
|
||||||
let gitIgnore = '';
|
let gitIgnore = '';
|
||||||
if (fs.existsSync(path.join(this.rootDir, '.gitignore')))
|
if (fs.existsSync(gitIgnorePath))
|
||||||
gitIgnore = fs.readFileSync(path.join(this.rootDir, '.gitignore'), 'utf-8').trimEnd() + '\n';
|
gitIgnore = fs.readFileSync(gitIgnorePath, 'utf-8').trimEnd() + '\n';
|
||||||
if (!gitIgnore.includes('node_modules'))
|
if (!gitIgnore.includes('node_modules'))
|
||||||
gitIgnore += 'node_modules/\n';
|
gitIgnore += 'node_modules/\n';
|
||||||
gitIgnore += 'test-results/\n';
|
gitIgnore += 'test-results/\n';
|
||||||
return gitIgnore;
|
fs.writeFileSync(gitIgnorePath, gitIgnore);
|
||||||
}
|
}
|
||||||
|
|
||||||
private _readAsset(asset: string): string {
|
private _readAsset(asset: string): string {
|
||||||
@ -153,24 +153,29 @@ class Generator {
|
|||||||
console.log(colors.green('✔ Success!') + ' ' + colors.bold(`Created a Playwright Test project at ${this.rootDir}`));
|
console.log(colors.green('✔ Success!') + ' ' + colors.bold(`Created a Playwright Test project at ${this.rootDir}`));
|
||||||
const pathToNavigate = path.relative(process.cwd(), this.rootDir);
|
const pathToNavigate = path.relative(process.cwd(), this.rootDir);
|
||||||
const prefix = pathToNavigate !== '' ? ` cd ${pathToNavigate}\n` : '';
|
const prefix = pathToNavigate !== '' ? ` cd ${pathToNavigate}\n` : '';
|
||||||
|
const exampleSpecPath = `${answers.testDir}${path.sep}example.spec.${languagetoFileExtension(answers.language)}`;
|
||||||
console.log(`Inside that directory, you can run several commands:
|
console.log(`Inside that directory, you can run several commands:
|
||||||
|
|
||||||
${colors.cyan(commandToRunTests(this.packageManager))}
|
${colors.cyan(commandToRunTests(this.packageManager))}
|
||||||
Runs the end-to-end tests.
|
Runs the end-to-end tests.
|
||||||
|
|
||||||
${colors.cyan(commandToRunTests(this.packageManager) + ' -- --project=Desktop Chrome')}
|
${colors.cyan(commandToRunTests(this.packageManager) + ' -- --project="Desktop Chrome"')}
|
||||||
Runs the tests only on Desktop Chrome.
|
Runs the tests only on Desktop Chrome.
|
||||||
|
|
||||||
${colors.cyan(commandToRunTests(this.packageManager) + ` -- ${answers.testDir}${path.sep}example.spec.${languagetoFileExtension(answers.language)}`)}
|
${colors.cyan(commandToRunTests(this.packageManager) + ` -- ${exampleSpecPath}`)}
|
||||||
Runs the tests of a specific file.
|
Runs the tests of a specific file.
|
||||||
|
|
||||||
${colors.cyan((this.packageManager === 'npm' ? 'npx' : 'yarn') + ' playwright debug ' + commandToRunTests(this.packageManager))}
|
${colors.cyan(`${commandToRunTests(this.packageManager)} --debug`)}
|
||||||
Runs the tests in debug mode.
|
Runs the tests in debug mode.
|
||||||
|
|
||||||
We suggest that you begin by typing:
|
We suggest that you begin by typing:
|
||||||
|
|
||||||
${colors.cyan(prefix + ' ' + commandToRunTests(this.packageManager))}
|
${colors.cyan(prefix + ' ' + commandToRunTests(this.packageManager))}
|
||||||
|
|
||||||
|
And check out the following files:
|
||||||
|
- ./${pathToNavigate ? pathToNavigate + '/' : ''}${exampleSpecPath} - Example end-to-end test
|
||||||
|
- ./${pathToNavigate ? pathToNavigate + '/' : ''}playwright.config.${languagetoFileExtension(answers.language)} - Playwright Test configuration
|
||||||
|
|
||||||
Visit https://playwright.dev/docs/intro for more information. ✨
|
Visit https://playwright.dev/docs/intro for more information. ✨
|
||||||
|
|
||||||
Happy hacking! 🎭`);
|
Happy hacking! 🎭`);
|
||||||
|
Loading…
Reference in New Issue
Block a user