chore: split e2e and ct configs (#24)

pavelfeldman · web-flow · commit 35b66f9ad3e8 · 2022-05-10T12:39:14.000-07:00
diff --git a/assets/playwright-ct.config.js b/assets/playwright-ct.config.js
@@ -0,0 +1,52 @@
+// @ts-check
+const { devices } = require('{{ctPackageName}}');
+
+/**
+ * @see https://playwright.dev/docs/test-configuration
+ * @type {import('{{ctPackageName}}').PlaywrightTestConfig}
+ */
+const config = {
+  testDir: './{{testDir}}',
+  /* Maximum time one test can run for. */
+  timeout: 10 * 1000,
+  /* 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. */
+    vitePort: 3100,
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: {
+        ...devices['Desktop Chrome'],
+      },
+    },
+    {
+      name: 'firefox',
+      use: {
+        ...devices['Desktop Firefox'],
+      },
+    },
+    {
+      name: 'webkit',
+      use: {
+        ...devices['Desktop Safari'],
+      },
+    },
+  ],
+};
+
+module.exports = config;
diff --git a/assets/playwright-ct.config.ts b/assets/playwright-ct.config.ts
@@ -0,0 +1,51 @@
+import type { PlaywrightTestConfig } from '{{ctPackageName}}';
+import { devices } from '{{ctPackageName}}';
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+const config: PlaywrightTestConfig = {
+  testDir: './{{testDir}}',
+  /* Maximum time one test can run for. */
+  timeout: 10 * 1000,
+  /* 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. */
+    vitePort: 3100,
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: {
+        ...devices['Desktop Chrome'],
+      },
+    },
+    {
+      name: 'firefox',
+      use: {
+        ...devices['Desktop Firefox'],
+      },
+    },
+    {
+      name: 'webkit',
+      use: {
+        ...devices['Desktop Safari'],
+      },
+    },
+  ],
+};
+
+export default config;
diff --git a/assets/playwright.config.js b/assets/playwright.config.js
@@ -1,5 +1,5 @@
 // @ts-check
-const { devices } = require('{{testRunnerImport}}');
+const { devices } = require('@playwright/test');
 
 /**
  * Read environment variables from file.
@@ -40,11 +40,6 @@ const config = {
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
-    //--begin-ct
-
-    /* Port to use for Playwright component endpoint. */
-    vitePort: 3100,
-    //--end-ct
   },
 
   /* Configure projects for major browsers */
diff --git a/assets/playwright.config.ts b/assets/playwright.config.ts
@@ -1,5 +1,5 @@
-import type { PlaywrightTestConfig } from '{{testRunnerImport}}';
-import { devices } from '{{testRunnerImport}}';
+import type { PlaywrightTestConfig } from '@playwright/test';
+import { devices } from '@playwright/test';
 
 /**
  * Read environment variables from file.
@@ -38,11 +38,6 @@ const config: PlaywrightTestConfig = {
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
-    //--begin-ct
-
-    /* Port to use for Playwright component endpoint. */
-    vitePort: 3100,
-    //--end-ct
   },
 
   /* Configure projects for major browsers */
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "create-playwright",
-  "version": "1.17.113",
+  "version": "1.17.114",
   "description": "Getting started with writing end-to-end tests with Playwright.",
   "repository": "github:Microsoft/playwright",
   "homepage": "https://playwright.dev",
diff --git a/src/generator.ts b/src/generator.ts
@@ -47,7 +47,10 @@ export class Generator {
     await createFiles(this.rootDir, files);
     this._patchGitIgnore();
     await this._patchPackageJSON(answers);
-    this._printEpilogue(answers);
+    if (answers.framework)
+      this._printEpilogueCT(answers);
+    else
+      this._printEpilogue(answers);
   }
 
   private _printPrologue() {
@@ -126,21 +129,21 @@ export class Generator {
     for (const browserName of ['chromium', 'firefox', 'webkit'])
       sections.set(browserName, !this.options.browser || this.options.browser.includes(browserName) ? 'show' : 'comment');
 
+    let ctPackageName;
     let installExamples = true;
-    let ctPackageName = '';
     if (answers.framework) {
       ctPackageName = `@playwright/experimental-ct-${answers.framework}`;
       installExamples = false;
-      sections.set('ct', 'show');
+      files.set(`playwright-ct.config.${fileExtension}`, executeTemplate(this._readAsset(`playwright-ct.config.${fileExtension}`), {
+        testDir: answers.testDir || '',
+        ctPackageName,
+      }, sections));
     } else {
-      sections.set('ct', 'hide');
+      files.set(`playwright.config.${fileExtension}`, executeTemplate(this._readAsset(`playwright.config.${fileExtension}`), {
+        testDir: answers.testDir || '',
+      }, sections));
     }
 
-    files.set(`playwright.config.${fileExtension}`, executeTemplate(this._readAsset(`playwright.config.${fileExtension}`), {
-      testDir: answers.testDir || '',
-      testRunnerImport: ctPackageName || '@playwright/test',
-    }, sections));
-
     if (answers.installGitHubActions) {
       const githubActionsScript = executeTemplate(this._readAsset('github-actions.yml'), {
         installDepsCommand: this.packageManager === 'npm' ? 'npm ci' : 'yarn',
@@ -159,20 +162,24 @@ export class Generator {
       });
     }
 
-    let packageName = '@playwright/test';
+    let packageLine = '';
+    const packageName = '@playwright/test';
     if (this.options.beta)
-      packageName = '@playwright/test@beta';
+      packageLine = '@beta';
     if (this.options.next)
-      packageName = '@playwright/test@next';
-    commands.push({
-      name: 'Installing Playwright Test',
-      command: this.packageManager === 'yarn' ? `yarn add --dev ${packageName}` : `npm install --save-dev ${packageName}`,
-    });
+      packageLine = '@next';
+
+    if (!this.options.ct) {
+      commands.push({
+        name: 'Installing Playwright Test',
+        command: this.packageManager === 'yarn' ? `yarn add --dev ${packageName}${packageLine}` : `npm install --save-dev ${packageName}${packageLine}`,
+      });
+    }
 
-    if (ctPackageName) {
+    if (this.options.ct) {
       commands.push({
         name: 'Installing Playwright Component Testing',
-        command: this.packageManager === 'yarn' ? `yarn add --dev ${ctPackageName}@latest` : `npm install --save-dev ${ctPackageName}@latest`,
+        command: this.packageManager === 'yarn' ? `yarn add --dev ${ctPackageName}${packageLine}` : `npm install --save-dev ${ctPackageName}${packageLine}`,
       });
 
       const extension = languageToFileExtension(answers.language);
@@ -201,7 +208,7 @@ export class Generator {
       gitIgnore += 'node_modules/\n';
     gitIgnore += '/test-results/\n';
     gitIgnore += '/playwright-report/\n';
-    gitIgnore += '/dist-pw/\n';
+    gitIgnore += '/playwright/.cache/\n';
     fs.writeFileSync(gitIgnorePath, gitIgnore);
   }
 
@@ -216,6 +223,10 @@ export class Generator {
     if (packageJSON.scripts['test']?.includes('no test specified'))
       delete packageJSON.scripts['test'];
 
+    const extension = languageToFileExtension(answers.language);
+    if (answers.framework)
+      packageJSON.scripts['test-ct'] = `playwright test -c playwright-ct.config.${extension}`;
+
     const files = new Map<string, string>();
     files.set('package.json', JSON.stringify(packageJSON, null, 2) + '\n'); // NPM keeps a trailing new-line
     await createFiles(this.rootDir, files, true);
@@ -227,7 +238,8 @@ export class Generator {
     const prefix = pathToNavigate !== '' ? `  cd ${pathToNavigate}\n` : '';
     const exampleSpecPath = `example.spec.${languageToFileExtension(answers.language)}`;
     const playwrightConfigPath = `playwright.config.${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))}
     Runs the end-to-end tests.
@@ -236,21 +248,47 @@ export class Generator {
     Runs the tests only on Desktop Chrome.
 
   ${colors.cyan(commandToRunTests(this.packageManager, exampleSpecPath))}
-    Runs the tests of a specific file.
+    Runs the tests in the specific file.
 
   ${colors.cyan(`${commandToRunTests(this.packageManager, '--debug')}`)}
     Runs the tests in debug mode.
 
 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:
   - .${path.sep}${pathToNavigate ? path.join(pathToNavigate, exampleSpecPath) : exampleSpecPath} - Example end-to-end test
   - .${path.sep}${pathToNavigate ? path.join(pathToNavigate, playwrightConfigPath) : playwrightConfigPath} - Playwright Test configuration
 
 Visit https://playwright.dev/docs/intro for more information. ✨
 
+Happy hacking! 🎭`);
+  }
+
+  private _printEpilogueCT(answers: PromptOptions) {
+    console.log(colors.green('✔ Success!') + ' ' + colors.bold(`Created a Playwright Test project at ${this.rootDir}`));
+    console.log(`
+Inside that directory, you can run several commands:
+
+  ${colors.cyan(`${this.packageManager} run test-ct`)}
+    Runs the component tests.
+
+  ${colors.cyan(`${this.packageManager} run test-ct -- --project=chromium`)}
+    Runs the tests only on Desktop Chrome.
+
+  ${colors.cyan(`${this.packageManager} run test-ct App.test.ts`)}
+    Runs the tests in the specific file.
+
+  ${colors.cyan(`${this.packageManager} run test-ct -- --debug`)}
+    Runs the tests in debug mode.
+
+We suggest that you begin by typing:
+
+  ${colors.cyan(`${this.packageManager} run test-ct`)}
+
+Visit https://playwright.dev/docs/intro for more information. ✨
+
 Happy hacking! 🎭`);
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "create-playwright",`
`3`		`- "version": "1.17.113",`
	`3`	`+ "version": "1.17.114",`
`4`	`4`	`"description": "Getting started with writing end-to-end tests with Playwright.",`
`5`	`5`	`"repository": "github:Microsoft/playwright",`
`6`	`6`	`"homepage": "https://playwright.dev",`