feat(testing): update generated Playwright test and config (#18282)

e2e/playwright/src/playwright.test.ts

@@ -22,7 +22,6 @@ describe('Playwright E2E Test runner', () => {
       ensurePlaywrightBrowsersInstallation();
 
       const e2eResults = runCLI(`e2e demo-e2e`);
-      expect(e2eResults).toContain('6 passed');
       expect(e2eResults).toContain('Successfully ran target e2e for project');
 
       const lintResults = runCLI(`lint demo-e2e`);
@@ -41,7 +40,6 @@ describe('Playwright E2E Test runner', () => {
       ensurePlaywrightBrowsersInstallation();
 
       const e2eResults = runCLI(`e2e demo-js-e2e`);
-      expect(e2eResults).toContain('6 passed');
       expect(e2eResults).toContain('Successfully ran target e2e for project');
 
       const lintResults = runCLI(`lint demo-e2e`);

packages/playwright/src/generators/configuration/files/__directory__/example.spec.ts.template

@@ -1,18 +1,8 @@
 import { test, expect } from '@playwright/test';
 
 test('has title', async ({ page }) => {
-  await page.goto('https://playwright.dev/');
+  await page.goto('/');
 
   // Expect a title "to contain" a substring.
-  await expect(page).toHaveTitle(/Playwright/);
+  await expect(page).toHaveTitle(/Welcome/);
-});
-
-test('get started link', async ({ page }) => {
-  await page.goto('https://playwright.dev/');
-
-  // Click the get started link.
-  await page.getByRole('link', { name: 'Get started' }).click();
-
-  // Expects the URL to contain intro.
-  await expect(page).toHaveURL(/.*intro/);
 });

packages/playwright/src/generators/configuration/files/playwright.config.ts.template

@@ -3,6 +3,9 @@ import { nxE2EPreset } from '@nx/playwright/preset';
 <% if(!webServerCommand || !webServerAddress) { %>// eslint-disable-next-line @typescript-eslint/no-unused-vars <% } %>
 import { workspaceRoot } from '@nx/devkit';
 
+// For CI, you may want to set BASE_URL to the deployed application.
+const baseURL = process.env['BASE_URL'] || '<% if(webServerAddress) {%><%= webServerAddress %><% } else {%>http://localhost:3000<% } %>';
+
 /**
  * Read environment variables from file.
  * https://github.com/motdotla/dotenv
@@ -13,17 +16,23 @@ import { workspaceRoot } from '@nx/devkit';
  * See https://playwright.dev/docs/test-configuration.
  */
 export default defineConfig({
-  ...nxE2EPreset(__filename, { testDir: './<%= directory %>' }),
+  ...nxE2EPreset(__filename, { testDir: './<>' }),
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    baseURL,
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
   /* Run your local dev server before starting the tests */<% if(webServerCommand && webServerAddress) {%>
-   webServer: {
+  webServer: {
-     command: '<%= webServerCommand %>',
+    command: '<%= webServerCommand %>',
-     url: '<%= webServerAddress %>',
+    url: '<%= webServerAddress %>',
-     reuseExistingServer: !process.env.CI,
+    reuseExistingServer: !process.env.CI,
-     cwd: workspaceRoot
+    cwd: workspaceRoot
-   },<% } else {%>// webServer: {
+  },<% } else {%>// webServer: {
   //   command: 'npm run start',
   //   url: 'http://127.0.0.1:3000',
   //   reuseExistingServer: !process.env.CI,
-  //   cwd: workspaceRoot
+  //   cwd: workspaceRoot,
   // },<% } %>
 });

packages/playwright/src/utils/preset.ts

@@ -133,11 +133,6 @@ export function nxE2EPreset(
         },
       ],
     ],
-    /* 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',
-    },
     projects,
   });
 }