chore(repo): split e2e tasks for nx-dev-e2e (#22181)

.circleci/config.yml

@@ -162,7 +162,7 @@ jobs:
             pids+=($!)
 
             (pnpm nx affected --targets=lint,test,build --base=$NX_BASE --head=$NX_HEAD --parallel=3 &&
-            pnpm nx affected --target=e2e --base=$NX_BASE --head=$NX_HEAD --parallel=1) &
+            pnpm nx affected --targets=e2e,e2e-ci --base=$NX_BASE --head=$NX_HEAD --parallel=1) &
             pids+=($!)
 
             for pid in "${pids[@]}"; do

.nx/workflows/agents.yaml

@@ -19,6 +19,7 @@ launch-templates:
           PATHS: |
             node_modules
             ~/.cache/Cypress
+            ~/.cache/ms-playwright
             ~/.pnpm-store
             ~/.sdkman
             ~/.sdkman/candidates/gradle
@@ -35,8 +36,10 @@ launch-templates:
         script: |
           pnpm install --frozen-lockfile
 
-      - name: Install Cypress
-        script: pnpm exec cypress install
+      - name: Install Browsers
+        script: |
+          pnpm exec cypress install
+          pnpm exec playwright install
 
       - name: Install Rust
         script: |

nx-dev/nx-dev-e2e/playwright.config.ts

@@ -1,27 +1,46 @@
 import { defineConfig, devices } from '@playwright/test';
-import { nxE2EPreset } from '@nx/playwright/preset';
 
-// nx-ignore-next-line
-import { workspaceRoot } from '@nx/devkit';
+/*
+ * NOTE: We're not using the `nxE2EPreset` from `@nx/playwright` because there is an issue with `nx-ignore` + nx repo + crystal.
+ *
+ * The problem is specific to Nx repo, because of the following incompatible combination:
+ * 1. `nx-ignore` only installs nx + necessary plugins (as defined in nx.json).
+ * 2. `@nx/playwright/plugin` registers tsconfig-paths, thus `@nx/devkit` and `nx` packages are read from source
+ *    e.g. packages/devkit rather than node_modules/@nx/devkit
+ * 3. When `@nx/playwright/plugin` reads this config file (playwright.config.ts), it eventually loads `packages/devkit` instead of `node_modules/@nx/devkit`.
+ *
+ * Then, you will see an error like this:
+ * Unable to create nodes for nx-dev/nx-dev-e2e/playwright.config.ts using plugin @nx/playwright/plugin.
+ * 	 Inner Error: Error: Cannot find module 'fs-extra'
+ * Require stack:
+ * - /vercel/path0/packages/nx/src/project-graph/nx-deps-cache.ts
+ * - /vercel/path0/packages/nx/src/project-graph/project-graph.ts
+ * - /vercel/path0/packages/nx/src/config/workspaces.ts
+ * - /vercel/path0/packages/nx/src/devkit-exports.ts
+ * - /vercel/path0/packages/devkit/index.ts
+ *
+ * Again, this is specific to Nx repo only, because we both install nx + plugins to node_modules, but they are also mapped to source in tsconfig paths.
+ */
 
 // For CI, you may want to set BASE_URL to the deployed application.
 const baseURL = process.env['BASE_URL'] || 'http://localhost:4200';
 
-const preset = nxE2EPreset(__filename, { testDir: './src' });
-/**
- * Read environment variables from file.
- * https://github.com/motdotla/dotenv
- */
-// require('dotenv').config();
-
 /**
  * See https://playwright.dev/docs/test-configuration.
  */
 export default defineConfig({
-  ...preset,
-  // CI default is 'dot', which doesn't show error output in CI.
-  // use list so errors are visible in CI logs
-  reporter: process.env.CI ? 'list' : preset.reporter,
+  testDir: './src',
+  outputDir: '../../dist/.playwright/nx-dev-e2e/test-output',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'list',
   // how long the entire suite can run, prevent CI from timing out
   globalTimeout: process.env.CI ? 1_800_000 : undefined,
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
@@ -34,25 +53,14 @@ export default defineConfig({
   },
   /* Run your local dev server before starting the tests */
   webServer: {
-    command: 'pnpm exec nx run nx-dev:serve:production',
+    command: 'pnpm exec nx run nx-dev:start',
     url: 'http://localhost:4200',
     reuseExistingServer: !process.env.CI,
-    cwd: workspaceRoot,
   },
   projects: [
     {
       name: 'chromium',
       use: { ...devices['Desktop Chrome'] },
     },
-
-    {
-      name: 'firefox',
-      use: { ...devices['Desktop Firefox'] },
-    },
-
-    {
-      name: 'webkit',
-      use: { ...devices['Desktop Safari'] },
-    },
   ],
 });

nx-dev/nx-dev-e2e/project.json

@@ -4,21 +4,7 @@
   "sourceRoot": "nx-dev/nx-dev-e2e/src",
   "projectType": "application",
   "targets": {
-    "lint": {},
-    "e2e": {
-      "dependsOn": [
-        {
-          "target": "build-base",
-          "dependencies": true
-        }
-      ],
-      "executor": "@nx/playwright:playwright",
-      "outputs": ["{workspaceRoot}/dist/.playwright/nx-dev/nx-dev-e2e"],
-      "options": {
-        "config": "nx-dev/nx-dev-e2e/playwright.config.ts",
-        "project": ["chromium"]
-      }
-    }
+    "lint": {}
   },
   "tags": ["scope:nx-dev", "type:e2e"],
   "implicitDependencies": ["nx-dev"]

nx-dev/nx-dev/project.json

@@ -80,6 +80,10 @@
         "parallel": true
       }
     },
+    "start": {
+      "dependsOn": ["build-base"],
+      "command": "nx run nx-dev:serve:production"
+    },
     "serve": {
       "executor": "@nx/next:server",
       "dependsOn": ["copy-docs"],

nx.json

@@ -207,7 +207,16 @@
       }
     }
   },
-  "plugins": ["@monodon/rust"],
+  "plugins": [
+    "@monodon/rust",
+    {
+      "plugin": "@nx/playwright/plugin",
+      "options": {
+        "targetName": "pw-e2e",
+        "ciTargetName": "e2e-ci"
+      }
+    }
+  ],
   "nxCloudAccessToken": "YmZiOWQyNzctOThiZC00MjYwLWI3YTAtZDA3MDg4YWY1YTExfHJlYWQ=",
   "nxCloudUrl": "https://staging.nx.app",
   "parallel": 1,