fix(testing): make the default react playwright test to pass (#18559)

e2e/next/src/next-appdir.test.ts

@@ -23,7 +23,9 @@ describe('Next.js App Router', () => {
     const appName = uniq('app');
     const jsLib = uniq('tslib');
 
-    runCLI(`generate @nx/next:app ${appName} --e2eTestRunner=playwright`);
+    runCLI(
+      `generate @nx/next:app ${appName} --e2eTestRunner=playwright --appDir=true`
+    );
     runCLI(`generate @nx/js:lib ${jsLib} --no-interactive`);
 
     updateFile(
@@ -40,6 +42,20 @@ describe('Next.js App Router', () => {
       `
     );
 
+    updateFile(
+      `apps/${appName}-e2e/src/example.spec.ts`,
+      `
+      import { test, expect } from '@playwright/test';
+
+      test('has ${jsLib}', async ({ page }) => {
+        await page.goto('/');
+
+        // Expect h1 to contain a substring.
+        expect(await page.locator('p').innerText()).toContain('${jsLib}');
+      });
+      `
+    );
+
     await checkApp(appName, {
       checkUnitTest: false,
       checkLint: true,

e2e/playwright/src/playwright.test.ts

@@ -4,10 +4,16 @@ import {
   uniq,
   runCLI,
   ensurePlaywrightBrowsersInstallation,
+  getPackageManagerCommand,
+  getSelectedPackageManager,
 } from '@nx/e2e/utils';
 
 const TEN_MINS_MS = 600_000;
 describe('Playwright E2E Test runner', () => {
+  const pmc = getPackageManagerCommand({
+    packageManager: getSelectedPackageManager(),
+  });
+
   beforeAll(() => {
     newProject({ name: uniq('playwright') });
   });
@@ -17,8 +23,12 @@ describe('Playwright E2E Test runner', () => {
   it(
     'should test and lint example app',
     () => {
-      runCLI(`g @nx/js:lib demo-e2e --unitTestRunner none --bundler none`);
+      runCLI(
-      runCLI(`g @nx/playwright:configuration --project demo-e2e`);
+        `g @nx/web:app demo-e2e --unitTestRunner=none --bundler=vite --e2eTestRunner=none --style=css --no-interactive`
+      );
+      runCLI(
+        `g @nx/playwright:configuration --project demo-e2e --webServerCommand="${pmc.runNx} serve demo-e2e" --webServerAddress="http://localhost:4200"`
+      );
       ensurePlaywrightBrowsersInstallation();
 
       const e2eResults = runCLI(`e2e demo-e2e`);
@@ -34,9 +44,11 @@ describe('Playwright E2E Test runner', () => {
     'should test and lint example app with js',
     () => {
       runCLI(
-        `g @nx/js:lib demo-js-e2e --unitTestRunner none --bundler none --js`
+        `g @nx/web:app demo-js-e2e --unitTestRunner=none --bundler=vite --e2eTestRunner=none --style=css --no-interactive`
+      );
+      runCLI(
+        `g @nx/playwright:configuration --project demo-js-e2e --js  --webServerCommand="${pmc.runNx} serve demo-e2e" --webServerAddress="http://localhost:4200"`
       );
-      runCLI(`g @nx/playwright:configuration --project demo-js-e2e --js`);
       ensurePlaywrightBrowsersInstallation();
 
       const e2eResults = runCLI(`e2e demo-js-e2e`);

e2e/web/src/web.test.ts

@@ -6,7 +6,6 @@ import {
   ensurePlaywrightBrowsersInstallation,
   isNotWindows,
   killPorts,
-  listFiles,
   newProject,
   readFile,
   rmDist,

packages/playwright/src/executors/playwright/playwright.ts

@@ -81,6 +81,12 @@ export async function playwrightExecutor(
 
   const args = createArgs(options);
   const p = runPlaywright(args, context.root);
+  p.stdout.on('data', (message) => {
+    process.stdout.write(message);
+  });
+  p.stderr.on('data', (message) => {
+    process.stderr.write(message);
+  });
 
   return new Promise<{ success: boolean }>((resolve) => {
     p.on('close', (code) => {
@@ -117,7 +123,7 @@ function runPlaywright(args: string[], cwd: string) {
     const cli = require.resolve('@playwright/test/cli');
 
     return fork(cli, ['test', ...args], {
-      stdio: 'inherit',
+      stdio: ['pipe', 'pipe', 'pipe', 'ipc'],
       cwd,
     });
   } catch (e) {

packages/playwright/src/generators/configuration/configuration.ts

@@ -90,7 +90,7 @@ Rename or remove the existing e2e target.`);
   projectConfig.targets ??= {};
   projectConfig.targets.e2e = {
     executor: '@nx/playwright:playwright',
-    outputs: [`dist/.playwright/${projectConfig.root}`],
+    outputs: [`{workspaceRoot}/dist/.playwright/${projectConfig.root}`],
     options: {
       config: `${projectConfig.root}/playwright.config.${
         options.js ? 'js' : 'ts'

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

@@ -3,6 +3,6 @@ import { test, expect } from '@playwright/test';
 test('has title', async ({ page }) => {
   await page.goto('/');
 
-  // Expect a title "to contain" a substring.
+  // Expect h1 to contain a substring.
-  await expect(page).toHaveTitle(/Welcome/);
+  expect(await page.locator('h1').innerText()).toContain('Welcome');
 });

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

@@ -16,7 +16,7 @@ const baseURL = process.env['BASE_URL'] || '<% if(webServerAddress) {%><%= webSe
  * See https://playwright.dev/docs/test-configuration.
  */
 export default defineConfig({
-  ...nxE2EPreset(__filename, { testDir: './<>' }),
+  ...nxE2EPreset(__filename, { testDir: './<%= directory %>' }),
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     baseURL,

packages/react/src/generators/application/lib/add-e2e.ts

@@ -55,6 +55,7 @@ export async function addE2e(
         webServerCommand: `${getPackageManagerCommand().exec} nx serve ${
           options.name
         }`,
+        webServerAddress: 'http://localhost:4200',
       });
     case 'none':
     default:

packages/web/src/generators/application/application.spec.ts

@@ -156,7 +156,7 @@ describe('app', () => {
             "config": "apps/cool-app-e2e/playwright.config.ts",
           },
           "outputs": [
-            "dist/.playwright/apps/cool-app-e2e",
+            "{workspaceRoot}/dist/.playwright/apps/cool-app-e2e",
           ],
         }
       `);

packages/web/src/generators/application/application.ts

@@ -8,6 +8,7 @@ import {
   formatFiles,
   generateFiles,
   GeneratorCallback,
+  getPackageManagerCommand,
   getWorkspaceLayout,
   joinPathFragments,
   names,
@@ -288,6 +289,10 @@ export async function applicationGenerator(host: Tree, schema: Schema) {
       js: false,
       linter: options.linter,
       setParserOptionsProject: options.setParserOptionsProject,
+      webServerCommand: `${getPackageManagerCommand().exec} nx serve ${
+        options.name
+      }`,
+      webServerAddress: 'http://localhost:4200',
     });
     tasks.push(playwrightTask);
   }