feat: experimental single tab run mode for component testing

cli/types/cypress.d.ts

@@ -3055,6 +3055,11 @@ declare namespace Cypress {
   interface ComponentConfigOptions<ComponentDevServerOpts = any> extends Omit<CoreConfigOptions, 'baseUrl' | 'experimentalSessionAndOrigin'> {
     devServer: DevServerFn<ComponentDevServerOpts> | DevServerConfigOptions
     devServerConfig?: ComponentDevServerOpts
+    /**
+     * Enables running all specs in a single tab in run mode for faster run mode execution.
+     * @default false
+     */
+    experimentalSingleTabRunMode?: boolean
   }
 
   /**

packages/config/__snapshots__/index.spec.ts.js

@@ -39,6 +39,7 @@ exports['config/src/index .getDefaultValues returns list of public config keys 1
   "experimentalSessionAndOrigin": false,
   "experimentalModifyObstructiveThirdPartyCode": false,
   "experimentalSourceRewriting": false,
+  "experimentalSingleTabRunMode": false,
   "fileServerFolder": "",
   "fixturesFolder": "cypress/fixtures",
   "excludeSpecPattern": "*.hot-update.js",
@@ -118,6 +119,7 @@ exports['config/src/index .getDefaultValues returns list of public config keys f
   "experimentalSessionAndOrigin": false,
   "experimentalModifyObstructiveThirdPartyCode": false,
   "experimentalSourceRewriting": false,
+  "experimentalSingleTabRunMode": false,
   "fileServerFolder": "",
   "fixturesFolder": "cypress/fixtures",
   "excludeSpecPattern": "*.hot-update.js",
@@ -194,6 +196,7 @@ exports['config/src/index .getPublicConfigKeys returns list of public config key
   "experimentalSessionAndOrigin",
   "experimentalModifyObstructiveThirdPartyCode",
   "experimentalSourceRewriting",
+  "experimentalSingleTabRunMode",
   "fileServerFolder",
   "fixturesFolder",
   "excludeSpecPattern",

packages/config/src/options.ts

@@ -225,6 +225,13 @@ const resolvedOptions: Array<ResolvedConfigOption> = [
     isExperimental: true,
     canUpdateDuringTestTime: false,
     requireRestartOnChange: 'server',
+  }, {
+    name: 'experimentalSingleTabRunMode',
+    defaultValue: false,
+    validation: validate.isBoolean,
+    isExperimental: true,
+    canUpdateDuringTestTime: false,
+    requireRestartOnChange: 'server',
   }, {
     name: 'fileServerFolder',
     defaultValue: '',

packages/launchpad/cypress.config.ts

@@ -20,6 +20,7 @@ export default defineConfig({
     videoCompression: false, // turn off video compression for CI
   },
   component: {
+    experimentalSingleTabRunMode: true,
     supportFile: 'cypress/component/support/index.ts',
     devServer: {
       bundler: 'vite',

packages/server/lib/experiments.ts

@@ -55,6 +55,7 @@ const _summaries: StringValues = {
   experimentalInteractiveRunEvents: 'Allows listening to the `before:run`, `after:run`, `before:spec`, and `after:spec` events in the plugins file during interactive mode.',
   experimentalSessionAndOrigin: 'Enables cross-origin and improved session support, including the `cy.origin` and `cy.session` commands.',
   experimentalSourceRewriting: 'Enables AST-based JS/HTML rewriting. This may fix issues caused by the existing regex-based JS/HTML replacement algorithm.',
+  experimentalSingleTabRunMode: 'Runs all component specs in a single tab, trading performance for spec isolation.',
   experimentalStudio: 'Generate and save commands directly to your test suite by interacting with your app as an end user would.',
 }
 
@@ -72,6 +73,7 @@ const _names: StringValues = {
   experimentalFetchPolyfill: 'Fetch Polyfill',
   experimentalInteractiveRunEvents: 'Interactive Mode Run Events',
   experimentalSessionAndOrigin: 'Cross-origin and Session',
+  experimentalSingleTabRunMode: 'Single Tab Run Mode',
   experimentalSourceRewriting: 'Improved Source Rewriting',
   experimentalStudio: 'Studio',
 }

packages/server/lib/modes/run.js

@@ -776,6 +776,12 @@ module.exports = {
 
   displayRunStarting,
 
+  navigateToNextSpec (spec) {
+    debug('navigating to next spec')
+
+    return openProject.changeUrlToSpec(spec)
+  },
+
   exitEarly (err) {
     debug('set early exit error: %s', err.stack)
 
@@ -1105,6 +1111,16 @@ module.exports = {
       return this.currentSetScreenshotMetadata(data)
     }
 
+    if (options.experimentalSingleTabRunMode && options.testingType === 'component' && !options.isFirstSpec) {
+      // reset browser state to match e2e behavior when opening/closing a new tab
+      return openProject.resetBrowserState().then(() => {
+        // If we do not launch the browser,
+        // we tell it that we are ready
+        // to receive the next spec
+        return this.navigateToNextSpec(options.spec)
+      })
+    }
+
     const wait = () => {
       debug('waiting for socket to connect and browser to launch...')
 
@@ -1244,17 +1260,15 @@ module.exports = {
         }
       }
 
-      // Close the browser if the environment variable is set to do so
-      // if (process.env.CYPRESS_INTERNAL_FORCE_BROWSER_RELAUNCH) {
-      //   debug('attempting to close the browser')
-      //   await openProject.closeBrowser()
-      // } else {
-      debug('attempting to close the browser tab')
-      await openProject.resetBrowserTabsForNextTest(shouldKeepTabOpen)
-      // }
+      if (!config.experimentalSingleTabRunMode) {
+        debug('attempting to close the browser tab')
+
+        await openProject.resetBrowserTabsForNextTest(shouldKeepTabOpen)
 
-      debug('resetting server state')
-      openProject.projectBase.server.reset()
+        debug('resetting server state')
+
+        openProject.projectBase.server.reset()
+      }
 
       if (videoExists && !skippedSpec && endVideoCapture && !videoCaptureFailed) {
         const ffmpegChaptersConfig = videoCapture.generateFfmpegChaptersConfig(results.tests)
@@ -1496,8 +1510,10 @@ module.exports = {
           socketId: options.socketId,
           webSecurity: options.webSecurity,
           projectRoot: options.projectRoot,
+          testingType: options.testingType,
+          isFirstSpec,
+          experimentalSingleTabRunMode: config.experimentalSingleTabRunMode,
           shouldLaunchNewTab: !isFirstSpec, // !process.env.CYPRESS_INTERNAL_FORCE_BROWSER_RELAUNCH && !isFirstSpec,
-          // TODO(tim): investigate the socket disconnect
         }),
       })
     })

packages/server/lib/open_project.ts

@@ -223,6 +223,21 @@ export class OpenProject {
     this.closeOpenProjectAndBrowsers()
   }
 
+  changeUrlToSpec (spec: Cypress.Spec) {
+    if (!this.projectBase) {
+      return
+    }
+
+    const newSpecUrl = getSpecUrl({
+      projectRoot: this.projectBase.projectRoot,
+      spec,
+    })
+
+    debug(`New url is ${newSpecUrl}`)
+
+    this.projectBase.server._socket.changeToUrl(newSpecUrl)
+  }
+
   // close existing open project if it exists, for example
   // if you are switching from CT to E2E or vice versa.
   // used by launchpad

packages/server/lib/socket-base.ts

@@ -612,4 +612,8 @@ export class SocketBase {
   close () {
     return this._io?.close()
   }
+
+  changeToUrl (url: string) {
+    return this.toRunner('change:to:url', url)
+  }
 }

system-tests/__snapshots__/component_testing_spec.ts.js

@@ -564,3 +564,144 @@ exports['React major versions with Webpack executes all of the tests for React v
 
 
 `
+
+exports['experimentalSingleTabRunMode / executes all specs in a single tab'] = `
+We detected that you have versions of dependencies that are not officially supported:
+
+ - \`webpack\`. Expected >=4.0.0 || >=5.0.0 but dependency was not found.
+
+If you're experiencing problems, downgrade dependencies and restart Cypress.
+
+   28 modules
+
+====================================================================================================
+
+  (Run Starting)
+
+  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
+  │ Cypress:      1.2.3                                                                            │
+  │ Browser:      FooBrowser 88                                                                    │
+  │ Specs:        2 found (fails.spec.js, foo.spec.js)                                             │
+  │ Searched:     **/*.spec.js                                                                     │
+  │ Experiments:  experimentalSingleTabRunMode=true                                                │
+  └────────────────────────────────────────────────────────────────────────────────────────────────┘
+
+
+────────────────────────────────────────────────────────────────────────────────────────────────────
+
+  Running:  fails.spec.js                                                                   (1 of 2)
+
+
+  simple passing spec
+    1) fails
+    2) fails again
+
+
+  0 passing
+  2 failing
+
+  1) simple passing spec
+       fails:
+
+      AssertionError: expected 1 to equal 2
+      + expected - actual
+
+      -1
+      +2
+
+      [stack trace lines]
+
+  2) simple passing spec
+       fails again:
+
+      AssertionError: expected 1 to equal 3
+      + expected - actual
+
+      -1
+      +3
+
+      [stack trace lines]
+
+
+
+
+  (Results)
+
+  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
+  │ Tests:        2                                                                                │
+  │ Passing:      0                                                                                │
+  │ Failing:      2                                                                                │
+  │ Pending:      0                                                                                │
+  │ Skipped:      0                                                                                │
+  │ Screenshots:  2                                                                                │
+  │ Video:        true                                                                             │
+  │ Duration:     X seconds                                                                        │
+  │ Spec Ran:     fails.spec.js                                                                    │
+  └────────────────────────────────────────────────────────────────────────────────────────────────┘
+
+
+  (Screenshots)
+
+  -  /XXX/XXX/XXX/cypress/screenshots/fails.spec.js/simple passing spec -- fails (fai     (1280x720)
+     led).png                                                                                       
+  -  /XXX/XXX/XXX/cypress/screenshots/fails.spec.js/simple passing spec -- fails agai     (1280x720)
+     n (failed).png                                                                                 
+
+
+  (Video)
+
+  -  Started processing:  Compressing to 32 CRF                                                     
+  -  Finished processing: /XXX/XXX/XXX/cypress/videos/fails.spec.js.mp4                   (X second)
+
+
+────────────────────────────────────────────────────────────────────────────────────────────────────
+
+  Running:  foo.spec.js                                                                     (2 of 2)
+
+
+  component
+    ✓ has spec with window same as app window
+
+
+  1 passing
+
+
+
+  component
+
+  (Results)
+
+  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
+  │ Tests:        1                                                                                │
+  │ Passing:      1                                                                                │
+  │ Failing:      0                                                                                │
+  │ Pending:      0                                                                                │
+  │ Skipped:      0                                                                                │
+  │ Screenshots:  0                                                                                │
+  │ Video:        true                                                                             │
+  │ Duration:     X seconds                                                                        │
+  │ Spec Ran:     foo.spec.js                                                                      │
+  └────────────────────────────────────────────────────────────────────────────────────────────────┘
+
+
+  (Video)
+
+  -  Started processing:  Compressing to 32 CRF                                                     
+  -  Finished processing: /XXX/XXX/XXX/cypress/videos/foo.spec.js.mp4                     (X second)
+
+
+====================================================================================================
+
+  (Run Finished)
+
+
+       Spec                                              Tests  Passing  Failing  Pending  Skipped  
+  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
+  │ ✖  fails.spec.js                            XX:XX        2        -        2        -        - │
+  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
+  │ ✔  foo.spec.js                              XX:XX        1        1        -        -        - │
+  └────────────────────────────────────────────────────────────────────────────────────────────────┘
+    ✖  1 of 2 failed (50%)                      XX:XX        3        1        2        -        -  
+
+
+`

system-tests/test/component_testing_spec.ts

@@ -106,3 +106,21 @@ describe(`React major versions with Webpack`, function () {
     })
   }
 })
+
+describe('experimentalSingleTabRunMode', function () {
+  systemTests.setup()
+
+  systemTests.it('executes all specs in a single tab', {
+    project: 'component-tests',
+    testingType: 'component',
+    spec: '**/*.spec.js',
+    browser: 'chrome',
+    config: {
+      component: {
+        experimentalSingleTabRunMode: true,
+      },
+    },
+    snapshot: true,
+    expectedExitCode: 2,
+  })
+})