cleanup(misc): increase cypress web server timeout in flaky e2e tests (#22069)

e2e/angular-core/src/projects.test.ts

@@ -13,6 +13,7 @@ import {
   runCLI,
   runCommandUntil,
   runE2ETests,
+  setCypressWebServerTimeout,
   tmpProjPath,
   uniq,
   updateFile,
@@ -127,6 +128,7 @@ describe('Angular Projects', () => {
 
     // check e2e tests
     if (runE2ETests('cypress')) {
+      setCypressWebServerTimeout(`${app1}-e2e/cypress.config.ts`);
       const e2eResults = runCLI(`e2e ${app1}-e2e`);
       expect(e2eResults).toContain('All specs passed!');
       expect(await killPort(4200)).toBeTruthy();

e2e/angular-module-federation/src/module-federation.test.ts

@@ -4,11 +4,11 @@ import {
   cleanupProject,
   killProcessAndPorts,
   newProject,
-  readFile,
   readJson,
   runCLI,
   runCommandUntil,
   runE2ETests,
+  setCypressWebServerTimeout,
   uniq,
   updateFile,
 } from '@nx/e2e/utils';
@@ -377,20 +377,8 @@ describe('Angular Module Federation', () => {
     const buildRemoteOutput = runCLI(`build ${remote}`);
     expect(buildRemoteOutput).toContain('Successfully ran target build');
 
-    // increase default timeout for the Cypress web server, MF apps can take longer to start
-    const cypressConfig = readFile(`${host}-e2e/cypress.config.ts`);
-    updateFile(
-      `${host}-e2e/cypress.config.ts`,
-      cypressConfig.replace(
-        `nxE2EPreset(__filename, {`,
-        `nxE2EPreset(__filename, {
-          webServerConfig: {
-            timeout: 60000,
-          },`
-      )
-    );
-
     if (runE2ETests('cypress')) {
+      setCypressWebServerTimeout(`${host}-e2e/cypress.config.ts`);
       const e2eProcess = await runCommandUntil(`e2e ${host}-e2e`, (output) =>
         output.includes('All specs passed!')
       );
@@ -481,20 +469,8 @@ describe('Angular Module Federation', () => {
     const buildRemoteOutput = runCLI(`build ${remote}`);
     expect(buildRemoteOutput).toContain('Successfully ran target build');
 
-    // increase default timeout for the Cypress web server, MF apps can take longer to start
-    const cypressConfig = readFile(`${host}-e2e/cypress.config.ts`);
-    updateFile(
-      `${host}-e2e/cypress.config.ts`,
-      cypressConfig.replace(
-        `nxE2EPreset(__filename, {`,
-        `nxE2EPreset(__filename, {
-          webServerConfig: {
-            timeout: 60000,
-          },`
-      )
-    );
-
     if (runE2ETests('cypress')) {
+      setCypressWebServerTimeout(`${host}-e2e/cypress.config.ts`);
       const e2eProcess = await runCommandUntil(`e2e ${host}-e2e`, (output) =>
         output.includes('All specs passed!')
       );

e2e/cypress/src/cypress.test.ts

@@ -7,6 +7,7 @@ import {
   readJson,
   runCLI,
   runE2ETests,
+  setCypressWebServerTimeout,
   uniq,
   updateFile,
 } from '@nx/e2e/utils';
@@ -76,6 +77,7 @@ describe('env vars', () => {
       );
 
       if (runE2ETests('cypress')) {
+        setCypressWebServerTimeout(`apps/${myapp}-e2e/cypress.config.ts`);
         // contains the correct output and works
         const run1 = runCLI(
           `e2e ${myapp}-e2e --config \\'{\\"env\\":{\\"cliArg\\":\\"i am from the cli args\\"}}\\'`
@@ -98,6 +100,9 @@ export default defineConfig({
         production: 'nx run ${myapp}:preview',
       },
       ciWebServerCommand: 'nx run ${myapp}:serve-static',
+      webServerConfig: {
+        timeout: 60_000,
+      },
     }),
     baseUrl: 'http://localhost:4200',
   },
@@ -164,6 +169,7 @@ export default defineConfig({
       );
 
       if (runE2ETests('cypress')) {
+        setCypressWebServerTimeout(`apps/${appName}/cypress.config.ts`);
         expect(runCLI(`run ${appName}:component-test`)).toContain(
           'All specs passed!'
         );
@@ -192,6 +198,7 @@ export default defineConfig({
       );
 
       if (runE2ETests('cypress')) {
+        setCypressWebServerTimeout(`apps/${appName}/cypress.config.ts`);
         expect(runCLI(`run ${appName}:component-test`)).toContain(
           'All specs passed!'
         );

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

@@ -6,6 +6,7 @@ import {
   readFile,
   runCLI,
   runE2ETests,
+  setCypressWebServerTimeout,
   uniq,
   updateFile,
 } from '@nx/e2e/utils';
@@ -192,28 +193,8 @@ describe('Next.js Applications', () => {
       `generate @nx/next:app ${appName} --no-interactive --style=css --project-name-and-root-format=as-provided`
     );
 
-    // Update the cypress timeout to 25 seconds since we need to build and wait for the server to start
+    if (runE2ETests('cypress')) {
-    updateFile(`${appName}-e2e/cypress.config.ts`, (_) => {
+      setCypressWebServerTimeout(`${appName}-e2e/cypress.config.ts`);
-      return `import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset';
-
-      import { defineConfig } from 'cypress';
-      
-      export default defineConfig({
-        e2e: {
-          ...nxE2EPreset(__filename, {
-            cypressDir: 'src',
-            webServerCommands: { default: 'nx run ${appName}:start' },
-            webServerConfig: { timeout: 25_000 },
-            ciWebServerCommand: 'nx run ${appName}:serve-static',
-          }),
-          baseUrl: 'http://localhost:3000',
-        },
-      });
-      
-      `;
-    });
-
-    if (runE2ETests()) {
       const e2eResults = runCLI(`e2e-ci ${appName}-e2e --verbose`, {
         verbose: true,
       });

e2e/utils/test-utils.ts

@@ -6,7 +6,7 @@ import {
   runCommand,
 } from './command-utils';
 import { uniq } from './create-project-utils';
-import { readFile } from './file-utils';
+import { readFile, updateFile } from './file-utils';
 
 type GeneratorsWithDefaultTests =
   | '@nx/js:lib'
@@ -57,3 +57,20 @@ export function expectNoTsJestInJestConfig(appName: string) {
 export function expectCodeIsFormatted() {
   expect(() => runCLI(`format:check`)).not.toThrow();
 }
+
+export function setCypressWebServerTimeout(
+  cypressConfigPath: string,
+  timeout = 60_000
+) {
+  const cypressConfig = readFile(cypressConfigPath);
+  updateFile(
+    cypressConfigPath,
+    cypressConfig.replace(
+      `nxE2EPreset(__filename, {`,
+      `nxE2EPreset(__filename, {
+        webServerConfig: {
+          timeout: ${timeout},
+        },`
+    )
+  );
+}