chore: create-playwright enhancements (#10221)

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

@@ -7,63 +7,53 @@ const path = require('path');
  * @type {import('@playwright/test').PlaywrightTestConfig}
  */
 const config = {
-  // Timeout per test
+  testDir: path.join(__dirname, '{{testDir}}'), /* Test directory */
-  timeout: 30 * 1000,
+  // timeout: 30 * 1000,                        /* Timeout per test */
-  // Test directory
+  // retries: process.env.CI ? 2 : 0,           /* If a test fails on CI, retry it additional 2 times */ 
-  testDir: path.join(__dirname, '{{testDir}}'),
+  // outputDir: 'test-results/',                /* Artifacts folder where screenshots, videos, and traces are stored. */
-  // If a test fails on CI, retry it additional 2 times
-  retries: process.env.CI ? 2 : 0,
-  // Artifacts folder where screenshots, videos, and traces are stored.
-  outputDir: 'test-results/',
 
-  // Run your local dev server before starting the tests:
+  // webServer: {                               /* Run your local dev server before starting the tests: */
-  // https://playwright.dev/docs/test-advanced#launching-a-development-web-server-during-the-tests
+  //   command: 'npm run start',                /* https://playwright.dev/docs/test-advanced#launching-a-development-web-server-during-the-tests */
-  // webServer: {
-  //   command: 'npm run start',
   //   port: 3000,
   // },
 
   use: {
-    // Retry a test if its failing with enabled tracing. This allows you to analyse the DOM, console logs, network traffic etc.
+    trace: 'on-first-retry',                    /* 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
+    contextOptions: {                           /* All available context options: https://playwright.dev/docs/api/class-browser#browser-new-context */
-    trace: 'on-first-retry',
-
-    // All available context options: https://playwright.dev/docs/api/class-browser#browser-new-context
-    contextOptions: {
       ignoreHTTPSErrors: true,
     },
   },
 
   projects: [
     {
-      name: 'Desktop Chrome',
+      name: 'chromium',
       use: {
         ...devices['Desktop Chrome'],
       },
     },
     {
-      name: 'Desktop Firefox',
+      name: 'firefox',
       use: {
         ...devices['Desktop Firefox'],
       },
     },
     {
-      name: 'Desktop Safari',
+      name: 'webkit',
       use: {
         ...devices['Desktop Safari'],
       },
     },
-    // Test against mobile viewports.
+    /* Test against mobile viewports. */
-    {
+    // {
-      name: 'Mobile Chrome',
+    //   name: 'Mobile Chrome',
-      use: {
+    //   use: {
-        ...devices['Pixel 5'],
+    //     ...devices['Pixel 5'],
-      },
+    //   },
-    },
+    // },
-    {
+    // {
-      name: 'Mobile Safari',
+    //   name: 'Mobile Safari',
-      use: devices['iPhone 12'],
+    //   use: devices['iPhone 12'],
-    },
+    // },
   ],
 };
 module.exports = config;

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

@@ -3,63 +3,53 @@ import path from 'path';
 
 // Reference: https://playwright.dev/docs/test-configuration
 const config: PlaywrightTestConfig = {
-  // Timeout per test
+  testDir: path.join(__dirname, '{{testDir}}'), /* Test directory */
-  timeout: 30 * 1000,
+  // timeout: 30 * 1000,                        /* Timeout per test */
-  // Test directory
+  // retries: process.env.CI ? 2 : 0,           /* If a test fails on CI, retry it additional 2 times */
-  testDir: path.join(__dirname, '{{testDir}}'),
+  // outputDir: 'test-results/',                /* Artifacts folder where screenshots, videos, and traces are stored. */
-  // If a test fails on CI, retry it additional 2 times
-  retries: process.env.CI ? 2 : 0,
-  // Artifacts folder where screenshots, videos, and traces are stored.
-  outputDir: 'test-results/',
 
-  // Run your local dev server before starting the tests:
+  // webServer: {                               /* Run your local dev server before starting the tests: */
-  // https://playwright.dev/docs/test-advanced#launching-a-development-web-server-during-the-tests
+  //   command: 'npm run start',                /* https://playwright.dev/docs/test-advanced#launching-a-development-web-server-during-the-tests */
-  // webServer: {
-  //   command: 'npm run start',
   //   port: 3000,
   // },
 
   use: {
-    // Retry a test if its failing with enabled tracing. This allows you to analyse the DOM, console logs, network traffic etc.
+    trace: 'on-first-retry',                    /* Retry a test if its failing with enabled tracing (analyse the DOM, console logs, network traffic): https://playwright.dev/docs/trace-viewer */
-    // More information: https://playwright.dev/docs/trace-viewer
+    contextOptions: {                           /* All available context options: https://playwright.dev/docs/api/class-browser#browser-new-context */
-    trace: 'on-first-retry',
-
-    // All available context options: https://playwright.dev/docs/api/class-browser#browser-new-context
-    contextOptions: {
       ignoreHTTPSErrors: true,
     },
   },
 
   projects: [
     {
-      name: 'Desktop Chrome',
+      name: 'chromium',
       use: {
         ...devices['Desktop Chrome'],
       },
     },
     {
-      name: 'Desktop Firefox',
+      name: 'firefox',
       use: {
         ...devices['Desktop Firefox'],
       },
     },
     {
-      name: 'Desktop Safari',
+      name: 'webkit',
       use: {
         ...devices['Desktop Safari'],
       },
     },
-    // Test against mobile viewports.
+    /* Test against mobile viewports. */
-    {
+    // {
-      name: 'Mobile Chrome',
+    //   name: 'Mobile Chrome',
-      use: {
+    //   use: {
-        ...devices['Pixel 5'],
+    //     ...devices['Pixel 5'],
-      },
+    //   },
-    },
+    // },
-    {
+    // {
-      name: 'Mobile Safari',
+    //   name: 'Mobile Safari',
-      use: devices['iPhone 12'],
+    //   use: devices['iPhone 12'],
-    },
+    // },
   ],
 };
 export default config;

packages/create-playwright/src/generator.ts

@@ -26,6 +26,7 @@ export type PromptOptions = {
   installGitHubActions: boolean,
   language: 'JavaScript' | 'TypeScript'
   addExamples: boolean,
+  installPlaywrightDependencies: boolean,
 };
 
 const assetsDir = path.join(__dirname, '..', 'assets');
@@ -72,7 +73,7 @@ export class Generator {
         type: 'text',
         name: 'testDir',
         message: 'Where to put your end-to-end tests?',
-        initial: 'e2e'
+        initial: fs.existsSync(path.join(this.rootDir, 'tests')) ? 'e2e' : 'tests',
       },
       {
         type: 'confirm',
@@ -81,11 +82,19 @@ export class Generator {
         initial: true,
       },
       {
+        type: 'confirm',
+        name: 'installPlaywrightDependencies',
+        message: 'Install Playwright operating system dependencies (requires sudo / root - can be done manually via \sudo npx playwright install-deps\')?',
+        initial: true,
+      },
+      // Avoid installing dependencies on Windows (vast majority does not run create-playwright on Windows)
+      // Avoid installing dependencies on Mac (there are no dependencies)
+      ...(process.platform === 'linux' ? [{
         type: 'confirm',
         name: 'addExamples',
         message: 'Add common examples which demonstrate Playwright\'s capabilities?',
         initial: true,
-      },
+      }] : []),
     ]);
   }
 
@@ -125,7 +134,7 @@ export class Generator {
 
     commands.push({
       name: 'Downloading browsers',
-      command: 'npx playwright install --with-deps',
+      command: 'npx playwright install' + (answers.installPlaywrightDependencies ? ' --with-deps' : ''),
     });
 
     return { files, commands };

packages/create-playwright/tests/integration.spec.ts

@@ -22,9 +22,9 @@ for (const packageManager of ['npm', 'yarn'] as ('npm' | 'yarn')[]) {
     test.use({ packageManager });
 
     test('should generate a project in the current directory', async ({ run }) => {
-      const { exitCode, dir, stdout } = await run([], { installGitHubActions: true, testDir: 'e2e', language: 'TypeScript', addExamples: false });
+      const { exitCode, dir, stdout } = await run([], { installGitHubActions: true, testDir: 'tests', language: 'TypeScript', addExamples: false, installPlaywrightDependencies: true });
       expect(exitCode).toBe(0);
-      expect(fs.existsSync(path.join(dir, 'e2e/example.spec.ts'))).toBeTruthy();
+      expect(fs.existsSync(path.join(dir, 'tests/example.spec.ts'))).toBeTruthy();
       expect(fs.existsSync(path.join(dir, 'package.json'))).toBeTruthy();
       if (packageManager === 'npm')
         expect(fs.existsSync(path.join(dir, 'package-lock.json'))).toBeTruthy();
@@ -32,7 +32,7 @@ for (const packageManager of ['npm', 'yarn'] as ('npm' | 'yarn')[]) {
         expect(fs.existsSync(path.join(dir, 'yarn.lock'))).toBeTruthy();
       expect(fs.existsSync(path.join(dir, 'playwright.config.ts'))).toBeTruthy();
       const playwrightConfigContent = fs.readFileSync(path.join(dir, 'playwright.config.ts'), 'utf8');
-      expect(playwrightConfigContent).toContain('e2e');
+      expect(playwrightConfigContent).toContain('tests');
       expect(fs.existsSync(path.join(dir, '.github/workflows/playwright.yml'))).toBeTruthy();
       expect(fs.existsSync(path.join(dir, '.gitignore'))).toBeTruthy();
       if (packageManager === 'npm') {
@@ -42,13 +42,13 @@ for (const packageManager of ['npm', 'yarn'] as ('npm' | 'yarn')[]) {
         expect(stdout).toContain('Initializing Yarn project (yarn init -y)…');
         expect(stdout).toContain('Installing Playwright Test (yarn add --dev @playwright/test)…');
       }
-      expect(stdout).toContain('npx playwright install --with-deps');
+      expect(stdout).toContain('npx playwright install' + process.platform === 'linux' ? ' --with-deps' : '');
     });
 
     test('should generate a project in a given directory', async ({ run }) => {
-      const { exitCode, dir } = await run(['foobar'], { installGitHubActions: true, testDir: 'e2e', language: 'TypeScript', addExamples: false });
+      const { exitCode, dir } = await run(['foobar'], { installGitHubActions: true, testDir: 'tests', language: 'TypeScript', addExamples: false, installPlaywrightDependencies: true });
       expect(exitCode).toBe(0);
-      expect(fs.existsSync(path.join(dir, 'foobar/e2e/example.spec.ts'))).toBeTruthy();
+      expect(fs.existsSync(path.join(dir, 'foobar/tests/example.spec.ts'))).toBeTruthy();
       expect(fs.existsSync(path.join(dir, 'foobar/package.json'))).toBeTruthy();
       if (packageManager === 'npm')
         expect(fs.existsSync(path.join(dir, 'foobar/package-lock.json'))).toBeTruthy();
@@ -59,7 +59,7 @@ for (const packageManager of ['npm', 'yarn'] as ('npm' | 'yarn')[]) {
     });
 
     test('should generate a project with JavaScript and without GHA', async ({ run }) => {
-      const { exitCode, dir } = await run([], { installGitHubActions: false, testDir: 'tests', language: 'JavaScript', addExamples: false });
+      const { exitCode, dir } = await run([], { installGitHubActions: false, testDir: 'tests', language: 'JavaScript', addExamples: false, installPlaywrightDependencies: true });
       expect(exitCode).toBe(0);
       expect(fs.existsSync(path.join(dir, 'tests/example.spec.js'))).toBeTruthy();
       expect(fs.existsSync(path.join(dir, 'package.json'))).toBeTruthy();
@@ -72,7 +72,7 @@ for (const packageManager of ['npm', 'yarn'] as ('npm' | 'yarn')[]) {
     });
 
     test('should generate be able to run the examples successfully', async ({ run }) => {
-      const { exitCode, dir, exec } = await run([], { installGitHubActions: false, testDir: 'tests', language: 'TypeScript', addExamples: true });
+      const { exitCode, dir, exec } = await run([], { installGitHubActions: false, testDir: 'tests', language: 'TypeScript', addExamples: true, installPlaywrightDependencies: true });
       expect(exitCode).toBe(0);
       expect(fs.existsSync(path.join(dir, 'tests/example.spec.ts'))).toBeTruthy();
       expect(fs.existsSync(path.join(dir, 'package.json'))).toBeTruthy();