fix(nextjs): Playwright should work with workspace libs (#20933)

e2e/next-extensions/src/next-playwright.test.ts

@@ -0,0 +1,63 @@
+import {
+  runCLI,
+  runE2ETests,
+  cleanupProject,
+  newProject,
+  uniq,
+  updateFile,
+} from '@nx/e2e/utils';
+
+describe('Next Playwright e2e tests', () => {
+  let projectName;
+  const appName = uniq('pw-next-app');
+  const usedInAppLibName = uniq('pw-next-lib');
+
+  beforeAll(async () => {
+    projectName = newProject({
+      name: uniq('pw-next'),
+      packages: ['@nx/next'],
+    });
+    runCLI(
+      `generate @nx/next:app ${appName} --e2eTestRunner=playwright --projectNameAndRootFormat=as-provided --no-interactive`
+    );
+  });
+
+  afterAll(() => cleanupProject());
+
+  it('should execute e2e tests using playwright', () => {
+    if (runE2ETests()) {
+      const result = runCLI(`e2e ${appName}-e2e --no-watch --verbose`);
+      expect(result).toContain(
+        `Successfully ran target e2e for project ${appName}-e2e`
+      );
+    }
+  });
+
+  it('should execute e2e tests using playwright with a library used in the app', () => {
+    runCLI(
+      `generate @nx/js:library ${usedInAppLibName} --unitTestRunner=none --importPath=@mylib --projectNameAndRootFormat=as-provided --no-interactive`
+    );
+
+    updateFile(
+      `${appName}-e2e/src/example.spec.ts`,
+      `
+      import { test, expect } from '@playwright/test';
+      import * as mylib from '@mylib'
+  
+      test('has title', async ({ page }) => {
+        await page.goto('/');
+  
+        // Expect h1 to contain a substring.
+        expect(await page.locator('h1').innerText()).toContain('Welcome');
+      });
+      `
+    );
+
+    if (runE2ETests()) {
+      const result = runCLI(`e2e ${appName}-e2e --no-watch --verbose`);
+      expect(result).toContain(
+        `Successfully ran target e2e for project ${appName}-e2e`
+      );
+    }
+  });
+});

e2e/react-extensions/src/playwright.test.ts

@@ -0,0 +1,63 @@
+import {
+  runCLI,
+  runE2ETests,
+  cleanupProject,
+  newProject,
+  uniq,
+  updateFile,
+} from '@nx/e2e/utils';
+
+describe('React Playwright e2e tests', () => {
+  let projectName;
+  const appName = uniq('pw-react-app');
+  const usedInAppLibName = uniq('pw-react-lib');
+
+  beforeAll(async () => {
+    projectName = newProject({
+      name: uniq('pw-react'),
+      packages: ['@nx/react'],
+    });
+    runCLI(
+      `generate @nx/react:app ${appName} --e2eTestRunner=playwright --projectNameAndRootFormat=as-provided --no-interactive`
+    );
+  });
+
+  afterAll(() => cleanupProject());
+
+  it('should execute e2e tests using playwright', () => {
+    if (runE2ETests()) {
+      const result = runCLI(`e2e ${appName}-e2e --no-watch --verbose`);
+      expect(result).toContain(
+        `Successfully ran target e2e for project ${appName}-e2e`
+      );
+    }
+  });
+
+  it('should execute e2e tests using playwright with a library used in the app', () => {
+    runCLI(
+      `generate @nx/js:library ${usedInAppLibName} --unitTestRunner=none --importPath=@mylib --projectNameAndRootFormat=as-provided --no-interactive`
+    );
+
+    updateFile(
+      `${appName}-e2e/src/example.spec.ts`,
+      `
+    import { test, expect } from '@playwright/test';
+    import * as mylib from '@mylib'
+
+    test('has title', async ({ page }) => {
+      await page.goto('/');
+
+      // Expect h1 to contain a substring.
+      expect(await page.locator('h1').innerText()).toContain('Welcome');
+    });
+    `
+    );
+
+    if (runE2ETests()) {
+      const result = runCLI(`e2e ${appName}-e2e --no-watch --verbose`);
+      expect(result).toContain(
+        `Successfully ran target e2e for project ${appName}-e2e`
+      );
+    }
+  });
+});

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

@@ -3,6 +3,7 @@ import {
   formatFiles,
   generateFiles,
   GeneratorCallback,
+  joinPathFragments,
   offsetFromRoot,
   readNxJson,
   readProjectConfiguration,
@@ -17,6 +18,7 @@ import { ConfigurationGeneratorSchema } from './schema';
 import initGenerator from '../init/init';
 import { addLinterToPlaywrightProject } from '../../utils/add-linter';
 import { typescriptVersion } from '@nx/js/src/utils/versions';
+import { getRelativePathToRootTsConfig } from '@nx/js';
 
 export async function configurationGenerator(
   tree: Tree,
@@ -30,14 +32,48 @@ export async function configurationGenerator(
     })
   );
   const projectConfig = readProjectConfiguration(tree, options.project);
+
+  const hasTsConfig = tree.exists(
+    joinPathFragments(projectConfig.root, 'tsconfig.json')
+  );
+
+  const offsetFromProjectRoot = offsetFromRoot(projectConfig.root);
+
   generateFiles(tree, path.join(__dirname, 'files'), projectConfig.root, {
-    offsetFromRoot: offsetFromRoot(projectConfig.root),
+    offsetFromRoot: offsetFromProjectRoot,
     projectRoot: projectConfig.root,
     webServerCommand: options.webServerCommand ?? null,
     webServerAddress: options.webServerAddress ?? null,
     ...options,
   });
 
+  if (!hasTsConfig) {
+    tree.write(
+      `${projectConfig.root}/tsconfig.json`,
+      JSON.stringify(
+        {
+          extends: '${getRelativePathToRootTsConfig(tree, projectConfig.root)}',
+          compilerOptions: {
+            allowJs: true,
+            outDir: '${offsetFromProjectRoot}dist/out-tsc',
+            module: 'commonjs',
+            sourceMap: false,
+          },
+          include: [
+            '**/*.ts',
+            '**/*.js',
+            '${offsetFromProjectRoot}playwright.config.ts',
+            '${offsetFromProjectRoot}**/*.spec.ts',
+            '${offsetFromProjectRoot}**/*.spec.js',
+            '${offsetFromProjectRoot}**/*.d.ts',
+          ],
+        },
+        null,
+        2
+      )
+    );
+  }
+
   const hasPlugin = readNxJson(tree).plugins?.some((p) =>
     typeof p === 'string'
       ? p === '@nx/playwright/plugin'