Skip to content

Commit 35b66f9

Browse files
pavelfeldmanpavelfeldman
authored
chore: split e2e and ct configs (#24)
1 parent 5d390ea commit 35b66f9

File tree

7 files changed

+169
-38
lines changed

7 files changed

+169
-38
lines changed

‎assets/playwright-ct.config.js‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
// @ts-check
2+
const { devices } = require('{{ctPackageName}}');
3+
4+
/**
5+
* @see https://playwright.dev/docs/test-configuration
6+
* @type {import('{{ctPackageName}}').PlaywrightTestConfig}
7+
*/
8+
const config = {
9+
testDir: './{{testDir}}',
10+
/* Maximum time one test can run for. */
11+
timeout: 10 * 1000,
12+
/* Fail the build on CI if you accidentally left test.only in the source code. */
13+
forbidOnly: !!process.env.CI,
14+
/* Retry on CI only */
15+
retries: process.env.CI ? 2 : 0,
16+
/* Opt out of parallel tests on CI. */
17+
workers: process.env.CI ? 1 : undefined,
18+
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
19+
reporter: 'html',
20+
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
21+
use: {
22+
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
23+
trace: 'on-first-retry',
24+
25+
/* Port to use for Playwright component endpoint. */
26+
vitePort: 3100,
27+
},
28+
29+
/* Configure projects for major browsers */
30+
projects: [
31+
{
32+
name: 'chromium',
33+
use: {
34+
...devices['Desktop Chrome'],
35+
},
36+
},
37+
{
38+
name: 'firefox',
39+
use: {
40+
...devices['Desktop Firefox'],
41+
},
42+
},
43+
{
44+
name: 'webkit',
45+
use: {
46+
...devices['Desktop Safari'],
47+
},
48+
},
49+
],
50+
};
51+
52+
module.exports = config;

‎assets/playwright-ct.config.ts‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import type { PlaywrightTestConfig } from '{{ctPackageName}}';
2+
import { devices } from '{{ctPackageName}}';
3+
4+
/**
5+
* See https://playwright.dev/docs/test-configuration.
6+
*/
7+
const config: PlaywrightTestConfig = {
8+
testDir: './{{testDir}}',
9+
/* Maximum time one test can run for. */
10+
timeout: 10 * 1000,
11+
/* Fail the build on CI if you accidentally left test.only in the source code. */
12+
forbidOnly: !!process.env.CI,
13+
/* Retry on CI only */
14+
retries: process.env.CI ? 2 : 0,
15+
/* Opt out of parallel tests on CI. */
16+
workers: process.env.CI ? 1 : undefined,
17+
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
18+
reporter: 'html',
19+
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
20+
use: {
21+
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
22+
trace: 'on-first-retry',
23+
24+
/* Port to use for Playwright component endpoint. */
25+
vitePort: 3100,
26+
},
27+
28+
/* Configure projects for major browsers */
29+
projects: [
30+
{
31+
name: 'chromium',
32+
use: {
33+
...devices['Desktop Chrome'],
34+
},
35+
},
36+
{
37+
name: 'firefox',
38+
use: {
39+
...devices['Desktop Firefox'],
40+
},
41+
},
42+
{
43+
name: 'webkit',
44+
use: {
45+
...devices['Desktop Safari'],
46+
},
47+
},
48+
],
49+
};
50+
51+
export default config;

‎assets/playwright.config.js‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// @ts-check
2-
const { devices } = require('{{testRunnerImport}}');
2+
const { devices } = require('@playwright/test');
33

44
/**
55
* Read environment variables from file.
@@ -40,11 +40,6 @@ const config = {
4040

4141
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
4242
trace: 'on-first-retry',
43-
//--begin-ct
44-
45-
/* Port to use for Playwright component endpoint. */
46-
vitePort: 3100,
47-
//--end-ct
4843
},
4944

5045
/* Configure projects for major browsers */

‎assets/playwright.config.ts‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import type { PlaywrightTestConfig } from '{{testRunnerImport}}';
2-
import { devices } from '{{testRunnerImport}}';
1+
import type { PlaywrightTestConfig } from '@playwright/test';
2+
import { devices } from '@playwright/test';
33

44
/**
55
* Read environment variables from file.
@@ -38,11 +38,6 @@ const config: PlaywrightTestConfig = {
3838

3939
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
4040
trace: 'on-first-retry',
41-
//--begin-ct
42-
43-
/* Port to use for Playwright component endpoint. */
44-
vitePort: 3100,
45-
//--end-ct
4641
},
4742

4843
/* Configure projects for major browsers */

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "create-playwright",
3-
"version": "1.17.113",
3+
"version": "1.17.114",
44
"description": "Getting started with writing end-to-end tests with Playwright.",
55
"repository": "github:Microsoft/playwright",
66
"homepage": "https://playwright.dev",

‎src/generator.ts‎

Lines changed: 60 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,10 @@ export class Generator {
4747
await createFiles(this.rootDir, files);
4848
this._patchGitIgnore();
4949
await this._patchPackageJSON(answers);
50-
this._printEpilogue(answers);
50+
if (answers.framework)
51+
this._printEpilogueCT(answers);
52+
else
53+
this._printEpilogue(answers);
5154
}
5255

5356
private _printPrologue() {
@@ -126,21 +129,21 @@ export class Generator {
126129
for (const browserName of ['chromium', 'firefox', 'webkit'])
127130
sections.set(browserName, !this.options.browser || this.options.browser.includes(browserName) ? 'show' : 'comment');
128131

132+
let ctPackageName;
129133
let installExamples = true;
130-
let ctPackageName = '';
131134
if (answers.framework) {
132135
ctPackageName = `@playwright/experimental-ct-${answers.framework}`;
133136
installExamples = false;
134-
sections.set('ct', 'show');
137+
files.set(`playwright-ct.config.${fileExtension}`, executeTemplate(this._readAsset(`playwright-ct.config.${fileExtension}`), {
138+
testDir: answers.testDir || '',
139+
ctPackageName,
140+
}, sections));
135141
} else {
136-
sections.set('ct', 'hide');
142+
files.set(`playwright.config.${fileExtension}`, executeTemplate(this._readAsset(`playwright.config.${fileExtension}`), {
143+
testDir: answers.testDir || '',
144+
}, sections));
137145
}
138146

139-
files.set(`playwright.config.${fileExtension}`, executeTemplate(this._readAsset(`playwright.config.${fileExtension}`), {
140-
testDir: answers.testDir || '',
141-
testRunnerImport: ctPackageName || '@playwright/test',
142-
}, sections));
143-
144147
if (answers.installGitHubActions) {
145148
const githubActionsScript = executeTemplate(this._readAsset('github-actions.yml'), {
146149
installDepsCommand: this.packageManager === 'npm' ? 'npm ci' : 'yarn',
@@ -159,20 +162,24 @@ export class Generator {
159162
});
160163
}
161164

162-
let packageName = '@playwright/test';
165+
let packageLine = '';
166+
const packageName = '@playwright/test';
163167
if (this.options.beta)
164-
packageName = '@playwright/test@beta';
168+
packageLine = '@beta';
165169
if (this.options.next)
166-
packageName = '@playwright/test@next';
167-
commands.push({
168-
name: 'Installing Playwright Test',
169-
command: this.packageManager === 'yarn' ? `yarn add --dev ${packageName}` : `npm install --save-dev ${packageName}`,
170-
});
170+
packageLine = '@next';
171+
172+
if (!this.options.ct) {
173+
commands.push({
174+
name: 'Installing Playwright Test',
175+
command: this.packageManager === 'yarn' ? `yarn add --dev ${packageName}${packageLine}` : `npm install --save-dev ${packageName}${packageLine}`,
176+
});
177+
}
171178

172-
if (ctPackageName) {
179+
if (this.options.ct) {
173180
commands.push({
174181
name: 'Installing Playwright Component Testing',
175-
command: this.packageManager === 'yarn' ? `yarn add --dev ${ctPackageName}@latest` : `npm install --save-dev ${ctPackageName}@latest`,
182+
command: this.packageManager === 'yarn' ? `yarn add --dev ${ctPackageName}${packageLine}` : `npm install --save-dev ${ctPackageName}${packageLine}`,
176183
});
177184

178185
const extension = languageToFileExtension(answers.language);
@@ -201,7 +208,7 @@ export class Generator {
201208
gitIgnore += 'node_modules/\n';
202209
gitIgnore += '/test-results/\n';
203210
gitIgnore += '/playwright-report/\n';
204-
gitIgnore += '/dist-pw/\n';
211+
gitIgnore += '/playwright/.cache/\n';
205212
fs.writeFileSync(gitIgnorePath, gitIgnore);
206213
}
207214

@@ -216,6 +223,10 @@ export class Generator {
216223
if (packageJSON.scripts['test']?.includes('no test specified'))
217224
delete packageJSON.scripts['test'];
218225

226+
const extension = languageToFileExtension(answers.language);
227+
if (answers.framework)
228+
packageJSON.scripts['test-ct'] = `playwright test -c playwright-ct.config.${extension}`;
229+
219230
const files = new Map<string, string>();
220231
files.set('package.json', JSON.stringify(packageJSON, null, 2) + '\n'); // NPM keeps a trailing new-line
221232
await createFiles(this.rootDir, files, true);
@@ -227,7 +238,8 @@ export class Generator {
227238
const prefix = pathToNavigate !== '' ? ` cd ${pathToNavigate}\n` : '';
228239
const exampleSpecPath = `example.spec.${languageToFileExtension(answers.language)}`;
229240
const playwrightConfigPath = `playwright.config.${languageToFileExtension(answers.language)}`;
230-
console.log(`Inside that directory, you can run several commands:
241+
console.log(`
242+
Inside that directory, you can run several commands:
231243
232244
${colors.cyan(commandToRunTests(this.packageManager))}
233245
Runs the end-to-end tests.
@@ -236,21 +248,47 @@ export class Generator {
236248
Runs the tests only on Desktop Chrome.
237249
238250
${colors.cyan(commandToRunTests(this.packageManager, exampleSpecPath))}
239-
Runs the tests of a specific file.
251+
Runs the tests in the specific file.
240252
241253
${colors.cyan(`${commandToRunTests(this.packageManager, '--debug')}`)}
242254
Runs the tests in debug mode.
243255
244256
We suggest that you begin by typing:
245257
246-
${colors.cyan(prefix + ' ' + commandToRunTests(this.packageManager))}
258+
${colors.cyan(prefix + ' ' + commandToRunTests(this.packageManager))}
247259
248260
And check out the following files:
249261
- .${path.sep}${pathToNavigate ? path.join(pathToNavigate, exampleSpecPath) : exampleSpecPath} - Example end-to-end test
250262
- .${path.sep}${pathToNavigate ? path.join(pathToNavigate, playwrightConfigPath) : playwrightConfigPath} - Playwright Test configuration
251263
252264
Visit https://playwright.dev/docs/intro for more information. ✨
253265
266+
Happy hacking! 🎭`);
267+
}
268+
269+
private _printEpilogueCT(answers: PromptOptions) {
270+
console.log(colors.green('✔ Success!') + ' ' + colors.bold(`Created a Playwright Test project at ${this.rootDir}`));
271+
console.log(`
272+
Inside that directory, you can run several commands:
273+
274+
${colors.cyan(`${this.packageManager} run test-ct`)}
275+
Runs the component tests.
276+
277+
${colors.cyan(`${this.packageManager} run test-ct -- --project=chromium`)}
278+
Runs the tests only on Desktop Chrome.
279+
280+
${colors.cyan(`${this.packageManager} run test-ct App.test.ts`)}
281+
Runs the tests in the specific file.
282+
283+
${colors.cyan(`${this.packageManager} run test-ct -- --debug`)}
284+
Runs the tests in debug mode.
285+
286+
We suggest that you begin by typing:
287+
288+
${colors.cyan(`${this.packageManager} run test-ct`)}
289+
290+
Visit https://playwright.dev/docs/intro for more information. ✨
291+
254292
Happy hacking! 🎭`);
255293
}
256294
}

0 commit comments

Comments
 (0)