chore: unify e2e tests launchpad (#18314)

scripts/gulp/gulpConstants.ts

@@ -22,6 +22,7 @@ export const ENV_VARS = {
     CYPRESS_INTERNAL_GQL_PORT: `52300`,
     CYPRESS_INTERNAL_ENV: 'staging', // Different than DEV, which will default to "development". TODO: Make this do less things internall
     CYPRESS_INTERNAL_E2E_TESTING_SELF: `true`,
+    XVFB_DISPLAY_NUM: `44`,
   },
 
   // Uses the "built" vite assets, not the served ones

scripts/gulp/gulpfile.ts

@@ -9,7 +9,7 @@
 
 import gulp from 'gulp'
 import { autobarrelWatcher } from './tasks/gulpAutobarrel'
-import { startCypressWatch, startCypressForTest, openCypressLaunchpad, openCypressApp, runCypressLaunchpad, wrapRunWithExit, runCypressApp } from './tasks/gulpCypress'
+import { startCypressWatch, startCypressForTest, openCypressLaunchpad, openCypressApp, runCypressLaunchpad, wrapRunWithExit, runCypressApp, waitForTestGraphQLApi, killExistingCypress } from './tasks/gulpCypress'
 import { graphqlCodegen, graphqlCodegenWatch, nexusCodegen, nexusCodegenWatch, generateFrontendSchema, syncRemoteGraphQL } from './tasks/gulpGraphql'
 import { viteApp, viteBuildAndWatchLaunchpadForTest, viteBuildLaunchpadForTest, serveBuiltLaunchpadForTest, viteCleanApp, viteCleanLaunchpad, viteLaunchpad, serveBuiltAppForTest, viteBuildAppForTest, viteBuildAndWatchAppForTest, viteBuildApp, viteBuildLaunchpad } from './tasks/gulpVite'
 import { checkTs } from './tasks/gulpTsc'
@@ -59,6 +59,8 @@ gulp.task(
       viteLaunchpad,
     ),
 
+    killExistingCypress,
+
     // And we're finally ready for electron, watching for changes in
     // /graphql to auto-restart the server
     startCypressWatch,
@@ -139,10 +141,16 @@ gulp.task('cyRunLaunchpadE2E', gulp.series(
   // 3. Host the Launchpad on a static server for cy.visit.
   serveBuiltLaunchpadForTest,
 
+  // Ensure we have no existing cypress processes running
+  killExistingCypress,
+
   // 4. Start the TEST Cypress App, such that its ports and other globals
   //    don't conflict with the real Cypress App.
   startCypressForTest,
 
+  // Wait for the Test Cypress open to start
+  waitForTestGraphQLApi,
+
   // 5. Start the REAL Cypress App, which will execute the integration specs.
   async function _runCypressLaunchpad () {
     wrapRunWithExit(await runCypressLaunchpad())
@@ -162,10 +170,15 @@ gulp.task('cyRunAppE2E', gulp.series(
   // 3. Host the Launchpad on a static server for cy.visit.
   serveBuiltAppForTest,
 
+  killExistingCypress,
+
   // 4. Start the TEST Cypress App, such that its ports and other globals
   //    don't conflict with the real Cypress App.
   startCypressForTest,
 
+  // Wait for the Test Cypress open to start
+  waitForTestGraphQLApi,
+
   // 5. Start the REAL Cypress App, which will execute the integration specs.
   async function _runCypressApp () {
     wrapRunWithExit(await runCypressApp())
@@ -303,6 +316,7 @@ gulplog.warn = function (...args: string[]) {
 
 process.on('exit', () => {
   if (didntExitCorrectly) {
+    execSync('killall Cypress')
     execSync('killall node')
     process.exitCode = 1
   }

scripts/gulp/tasks/gulpCypress.ts

@@ -4,7 +4,8 @@
  *
  * @summary Gulp tasks to run the Cypress app.
  */
-
+// @ts-expect-error - no types
+import rp from '@cypress/request-promise'
 import chokidar from 'chokidar'
 import path from 'path'
 import pDefer from 'p-defer'
@@ -13,7 +14,7 @@ import { monorepoPaths } from '../monorepoPaths'
 import { ENV_VARS, getGulpGlobal } from '../gulpConstants'
 import { forked } from '../utils/childProcessUtils'
 import { exitAndRemoveProcess } from './gulpRegistry'
-import type { ChildProcess } from 'child_process'
+import { ChildProcess, exec } from 'child_process'
 
 const pathToCli = path.resolve(monorepoPaths.root, 'cli', 'bin', 'cypress')
 
@@ -24,6 +25,31 @@ const pathToCli = path.resolve(monorepoPaths.root, 'cli', 'bin', 'cypress')
  *  * runCypress - Normal `cypress run` command
  *------------------------------------------------------------------------**/
 
+export async function killExistingCypress () {
+  const dfd = pDefer()
+  const child = exec('killall Cypress')
+
+  child.on('error', dfd.resolve)
+  child.on('exit', dfd.resolve)
+}
+
+export async function waitForTestGraphQLApi () {
+  let i = 0
+
+  // eslint-disable-next-line no-constant-condition
+  while (true) {
+    try {
+      return await rp.get('http://localhost:52300/graphql?query={__typename}')
+    } catch (e) {
+      if (i++ > 10) {
+        throw e
+      }
+
+      await new Promise((resolve) => setTimeout(resolve, 2000))
+    }
+  }
+}
+
 export async function openCypressLaunchpad () {
   return spawnCypressWithMode('open', 'dev', ENV_VARS.DEV_OPEN, ['--project', monorepoPaths.pkgLaunchpad])
 }
@@ -103,6 +129,7 @@ async function spawnCypressWithMode (
   }
 
   return await forked(`cy:${mode}:${type}`, pathToCli, [mode, ...argv], {
+    cwd: monorepoPaths.root,
     env: finalEnv,
     waitForData: false,
   })