chore(create-playwright): enhance UX follow-ups and add more verbose Playwright Test config (#8942)

.eslintignore

@@ -13,4 +13,3 @@ browser_patches/chromium/output/
 **/*.d.ts
 output/
 /test-results/
-packages/create-playwright/assets/**

packages/create-playwright/.npmignore

@@ -5,3 +5,4 @@
 /tests/**/*
 /playwright.config.ts
 /tsconfig.json
+/assets/.eslintrc.js

packages/create-playwright/assets/.eslintrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+    "extends": "../../../.eslintrc.js",
+    "rules": {
+        "notice/notice": 0
+    }
+};

packages/create-playwright/assets/github-actions.yml

@@ -5,7 +5,7 @@ on:
   pull_request:
     branches: [ main, master ]
 jobs:
-  build:
+  test:
     timeout-minutes: 60
     runs-on: ubuntu-latest
     steps:
@@ -19,3 +19,8 @@ jobs:
       run: npx playwright install --with-deps
     - name: Run Playwright tests
       run: {{runTestsCommand}}
+    - uses: actions/upload-artifact@v2
+      if: failure()
+      with:
+        name: playwright-test-results
+        path: test-results/

packages/create-playwright/assets/playwright.config.js

@@ -5,10 +5,16 @@ const path = require('path')
 /**
  * @see https://playwright.dev/docs/test-configuration
  * @type{import('@playwright/test').PlaywrightTestConfig}
- * */
+ */
 const config = {
+  // Timeout per test
   timeout: 30 * 1000,
+  // Test directory
   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:
   // https://playwright.dev/docs/test-advanced#launching-a-development-web-server-during-the-tests
@@ -17,37 +23,48 @@ const config = {
   //   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: [
     {
       name: 'Desktop Chrome',
       use: {
         ...devices['Desktop Chrome'],
+
+      },
+    },
+    {
+      name: 'Desktop Firefox',
+      use: {
+        ...devices['Desktop Firefox'],
       },
     },
     {
       name: 'Desktop Safari',
       use: {
-        browserName: 'webkit',
+        ...devices['Desktop Safari'],
-        viewport: { width: 1200, height: 750 },
+      },
-      }
     },
     // Test against mobile viewports.
     {
       name: 'Mobile Chrome',
-      use: devices['Pixel 5'],
+      use: {
+        ...devices['Pixel 5'],
+      },
     },
     {
       name: 'Mobile Safari',
       use: devices['iPhone 12'],
     },
-    {
-      name: 'Desktop Firefox',
-      use: {
-        browserName: 'firefox',
-        viewport: { width: 800, height: 600 },
-      }
-    },
   ],
 };
-
 module.exports = config;

packages/create-playwright/assets/playwright.config.ts

@@ -3,8 +3,14 @@ import path from 'path';
 
 // Reference: https://playwright.dev/docs/test-configuration
 const config: PlaywrightTestConfig = {
+  // Timeout per test
   timeout: 30 * 1000,
+  // Test directory
   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:
   // https://playwright.dev/docs/test-advanced#launching-a-development-web-server-during-the-tests
@@ -13,36 +19,48 @@ const config: PlaywrightTestConfig = {
   //   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: [
     {
       name: 'Desktop Chrome',
       use: {
         ...devices['Desktop Chrome'],
+
+      },
+    },
+    {
+      name: 'Desktop Firefox',
+      use: {
+        ...devices['Desktop Firefox'],
       },
     },
     {
       name: 'Desktop Safari',
       use: {
-        browserName: 'webkit',
+        ...devices['Desktop Safari'],
-        viewport: { width: 1200, height: 750 },
+      },
-      }
     },
     // Test against mobile viewports.
     {
       name: 'Mobile Chrome',
-      use: devices['Pixel 5'],
+      use: {
+        ...devices['Pixel 5'],
+      },
     },
     {
       name: 'Mobile Safari',
       use: devices['iPhone 12'],
     },
-    {
-      name: 'Desktop Firefox',
-      use: {
-        browserName: 'firefox',
-        viewport: { width: 800, height: 600 },
-      }
-    },
   ],
 };
 export default config;

packages/create-playwright/src/index.ts

@@ -43,6 +43,7 @@ class Generator {
     const { files, commands } = await this._identifyChanges(answers);
     executeCommands(this.rootDir, commands);
     await createFiles(this.rootDir, files);
+    this._patchGitIgnore();
     await this._patchPackageJSON();
     this._printOutro(answers);
   }
@@ -116,19 +117,18 @@ class Generator {
       command: 'npx playwright install --with-deps',
     });
 
-    files.set('.gitignore', this._buildGitIgnore());
-
     return { files, commands };
   }
 
-  private _buildGitIgnore(): string {
+  private _patchGitIgnore() {
+    const gitIgnorePath = path.join(this.rootDir, '.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'))
       gitIgnore += 'node_modules/\n';
     gitIgnore += 'test-results/\n';
-    return gitIgnore;
+    fs.writeFileSync(gitIgnorePath, gitIgnore);
   }
 
   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}`));
     const pathToNavigate = path.relative(process.cwd(), this.rootDir);
     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:
 
   ${colors.cyan(commandToRunTests(this.packageManager))}
     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.
 
-  ${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.
   
-  ${colors.cyan((this.packageManager === 'npm' ? 'npx' : 'yarn') + ' playwright debug ' + commandToRunTests(this.packageManager))}
+  ${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))}
 
+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. ✨
 
 Happy hacking! 🎭`);