feat: experimental single tab run mode for component testing

circle.yml

@@ -36,6 +36,7 @@ macWorkflowFilters: &darwin-workflow-filters
   when:
     or:
     - equal: [ develop, << pipeline.git.branch >> ]
+    - equal: [ "lmiller/experimental-single-tab-component-testing", << pipeline.git.branch >> ]
     - matches:
           pattern: "-release$"
           value: << pipeline.git.branch >>
@@ -44,6 +45,7 @@ linuxArm64WorkflowFilters: &linux-arm64-workflow-filters
   when:
     or:
     - equal: [ develop, << pipeline.git.branch >> ]
+    - equal: [ "lmiller/experimental-single-tab-component-testing", << pipeline.git.branch >> ]
     - matches:
           pattern: "-release$"
           value: << pipeline.git.branch >>

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
+    /**
+     * Runs all component specs in a single tab, trading spec isolation for faster run mode execution.
+     * @default false
+     */
+    experimentalSingleTabRunMode?: boolean
   }
 
   /**

packages/app/src/runner/aut-iframe.ts

@@ -35,6 +35,14 @@ export class AutIframe {
     return $iframe
   }
 
+  destroy () {
+    if (!this.$iframe) {
+      throw Error(`Cannot call #remove without first calling #create`)
+    }
+
+    this.$iframe.remove()
+  }
+
   showInitialBlankContents () {
     this._showContents(blankContents.initial())
   }

packages/app/src/runner/event-manager.ts

@@ -11,6 +11,7 @@ import type { Socket } from '@packages/socket/lib/browser'
 import * as cors from '@packages/network/lib/cors'
 import { automation, useRunnerUiStore } from '../store'
 import { useScreenshotStore } from '../store/screenshot-store'
+import { getAutIframeModel } from '.'
 
 export type CypressInCypressMochaEvent = Array<Array<string | Record<string, any>>>
 
@@ -54,6 +55,8 @@ export class EventManager {
   studioRecorder: any
   selectorPlaygroundModel: any
   cypressInCypressMochaEvents: CypressInCypressMochaEvent[] = []
+  // Used for testing the experimentalSingleTabRunMode experiment. Ensures AUT is correctly destroyed between specs.
+  autDestroyedCount = 0
 
   constructor (
     // import '@packages/driver'
@@ -337,6 +340,14 @@ export class EventManager {
       rerun()
     })
 
+    this.ws.on('aut:destroy:init', () => {
+      const autIframe = getAutIframeModel()
+
+      autIframe.destroy()
+      this.ws.emit('aut:destroy:complete')
+      this.autDestroyedCount++
+    })
+
     // @ts-ignore
     const $window = this.$CypressDriver.$(window)
 

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/browser.ts

@@ -57,7 +57,7 @@ export function resetIssuedWarnings () {
   issuedWarnings.clear()
 }
 
-const validateNoBreakingOptions = (breakingCfgOptions: BreakingOption[], cfg: any, onWarning: ErrorHandler, onErr: ErrorHandler, testingType?: TestingType) => {
+const validateNoBreakingOptions = (breakingCfgOptions: Readonly<BreakingOption[]>, cfg: any, onWarning: ErrorHandler, onErr: ErrorHandler, testingType?: TestingType) => {
   breakingCfgOptions.forEach(({ name, errorKey, newName, isWarning, value }) => {
     if (_.has(cfg, name)) {
       if (value && cfg[name] !== value) {

packages/config/src/options.ts

@@ -4,28 +4,34 @@ import path from 'path'
 import * as validate from './validation'
 // @ts-ignore
 import pkg from '@packages/root'
+import type { AllCypressErrorNames } from '@packages/errors'
 
-export type BreakingOptionErrorKey =
-  | 'COMPONENT_FOLDER_REMOVED'
-  | 'INTEGRATION_FOLDER_REMOVED'
-  | 'CONFIG_FILE_INVALID_ROOT_CONFIG'
-  | 'CONFIG_FILE_INVALID_ROOT_CONFIG_E2E'
-  | 'CONFIG_FILE_INVALID_ROOT_CONFIG_COMPONENT'
-  | 'CONFIG_FILE_INVALID_TESTING_TYPE_CONFIG_COMPONENT'
-  | 'CONFIG_FILE_INVALID_TESTING_TYPE_CONFIG_E2E'
-  | 'EXPERIMENTAL_COMPONENT_TESTING_REMOVED'
-  | 'EXPERIMENTAL_SAMESITE_REMOVED'
-  | 'EXPERIMENTAL_NETWORK_STUBBING_REMOVED'
-  | 'EXPERIMENTAL_RUN_EVENTS_REMOVED'
-  | 'EXPERIMENTAL_SESSION_SUPPORT_REMOVED'
-  | 'EXPERIMENTAL_SHADOW_DOM_REMOVED'
-  | 'EXPERIMENTAL_STUDIO_REMOVED'
-  | 'FIREFOX_GC_INTERVAL_REMOVED'
-  | 'NODE_VERSION_DEPRECATION_SYSTEM'
-  | 'NODE_VERSION_DEPRECATION_BUNDLED'
-  | 'PLUGINS_FILE_CONFIG_OPTION_REMOVED'
-  | 'RENAMED_CONFIG_OPTION'
-  | 'TEST_FILES_RENAMED'
+const BREAKING_OPTION_ERROR_KEY: Readonly<AllCypressErrorNames[]> = [
+  'COMPONENT_FOLDER_REMOVED',
+  'INTEGRATION_FOLDER_REMOVED',
+  'CONFIG_FILE_INVALID_ROOT_CONFIG',
+  'CONFIG_FILE_INVALID_ROOT_CONFIG_E2E',
+  'CONFIG_FILE_INVALID_ROOT_CONFIG_COMPONENT',
+  'CONFIG_FILE_INVALID_TESTING_TYPE_CONFIG_COMPONENT',
+  'CONFIG_FILE_INVALID_TESTING_TYPE_CONFIG_E2E',
+  'EXPERIMENTAL_COMPONENT_TESTING_REMOVED',
+  'EXPERIMENTAL_SAMESITE_REMOVED',
+  'EXPERIMENTAL_NETWORK_STUBBING_REMOVED',
+  'EXPERIMENTAL_RUN_EVENTS_REMOVED',
+  'EXPERIMENTAL_SESSION_SUPPORT_REMOVED',
+  'EXPERIMENTAL_SINGLE_TAB_RUN_MODE',
+  'EXPERIMENTAL_SHADOW_DOM_REMOVED',
+  'EXPERIMENTAL_STUDIO_REMOVED',
+  'EXPERIMENTAL_STUDIO_REMOVED',
+  'FIREFOX_GC_INTERVAL_REMOVED',
+  'NODE_VERSION_DEPRECATION_SYSTEM',
+  'NODE_VERSION_DEPRECATION_BUNDLED',
+  'PLUGINS_FILE_CONFIG_OPTION_REMOVED',
+  'RENAMED_CONFIG_OPTION',
+  'TEST_FILES_RENAMED',
+] as const
+
+export type BreakingOptionErrorKey = typeof BREAKING_OPTION_ERROR_KEY[number]
 
 type TestingType = 'e2e' | 'component'
 
@@ -224,6 +230,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: '',
@@ -569,7 +582,7 @@ export const additionalOptionsToResolveConfig = [
 /**
  * Values not allowed in 10.X+ in the root, e2e and component config
  */
-export const breakingOptions: Array<BreakingOption> = [
+export const breakingOptions: Readonly<BreakingOption[]> = [
   {
     name: 'blacklistHosts',
     errorKey: 'RENAMED_CONFIG_OPTION',
@@ -641,7 +654,7 @@ export const breakingOptions: Array<BreakingOption> = [
     newName: 'specPattern',
     isWarning: false,
   },
-]
+] as const
 
 export const breakingRootOptions: Array<BreakingOption> = [
   {
@@ -689,6 +702,12 @@ export const breakingRootOptions: Array<BreakingOption> = [
 
 export const testingTypeBreakingOptions: { e2e: Array<BreakingOption>, component: Array<BreakingOption> } = {
   e2e: [
+    {
+      name: 'experimentalSingleTabRunMode',
+      errorKey: 'EXPERIMENTAL_SINGLE_TAB_RUN_MODE',
+      isWarning: false,
+      testingTypes: ['e2e'],
+    },
     {
       name: 'indexHtmlFile',
       errorKey: 'CONFIG_FILE_INVALID_TESTING_TYPE_CONFIG_E2E',

packages/errors/src/errors.ts

@@ -1085,6 +1085,12 @@ export const AllCypressErrors = {
 
         You can safely remove the ${fmt.highlight(`experimentalStudio`)} configuration option from your config.`
   },
+  EXPERIMENTAL_SINGLE_TAB_RUN_MODE: () => {
+    return errTemplate`\
+        The ${fmt.highlight(`experimentalSingleTabRunMode`)} experiment is currently only supported for Component Testing.
+
+        If you are enjoying the experiment with Component Testing, please join the discussion here: http://on.cypress.io/experimental-single-tab-run-mode`
+  },
   FIREFOX_GC_INTERVAL_REMOVED: () => {
     return errTemplate`\
         The ${fmt.highlight(`firefoxGcInterval`)} configuration option was removed in ${fmt.cypressVersion(`8.0.0`)}. It was introduced to work around a bug in Firefox 79 and below.

packages/errors/test/unit/visualSnapshotErrors_spec.ts

@@ -1184,7 +1184,7 @@ describe('visual error templates', () => {
                 package: 'vite',
                 installer: 'vite',
                 description: 'Vite is dev server that serves your source files over native ES modules',
-                minVersion: '>=2.0.0',
+                minVersion: '^=2.0.0 || ^=3.0.0',
               },
               satisfied: false,
               detectedVersion: '1.0.0',
@@ -1194,5 +1194,11 @@ describe('visual error templates', () => {
         ],
       }
     },
+
+    EXPERIMENTAL_SINGLE_TAB_RUN_MODE: () => {
+      return {
+        default: [],
+      }
+    },
   })
 })

packages/frontend-shared/src/gql-components/error/BaseError.cy.tsx

@@ -4,7 +4,7 @@ import { BaseErrorFragmentDoc } from '../../../../launchpad/src/generated/graphq
 import dedent from 'dedent'
 
 // Selectors
-const headerSelector = 'h1[data-testid=error-header]'
+const headerSelector = 'h1[data-cy=error-header]'
 const messageSelector = '[data-testid=error-message]'
 const retryButtonSelector = 'button[data-testid=error-retry-button]'
 const docsButtonSelector = 'a[data-testid=error-docs-button]'

packages/frontend-shared/src/gql-components/error/BaseError.vue

@@ -8,7 +8,7 @@
         <h1
           v-if="baseError.title"
           class="font-medium leading-snug text-32px text-gray-900"
-          data-testid="error-header"
+          data-cy="error-header"
         >
           <slot name="header">
             {{ baseError.title }}

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/launchpad/cypress/e2e/config-warning.cy.ts

@@ -67,6 +67,26 @@ describe('baseUrl', () => {
   })
 })
 
+describe('experimentalSingleTabRunMode', () => {
+  it('is a valid config for component testing', () => {
+    cy.scaffoldProject('experimentalSingleTabRunMode')
+    cy.openProject('experimentalSingleTabRunMode')
+    cy.visitLaunchpad()
+    cy.get('[data-cy-testingtype="component"]').click()
+    cy.get('h1').contains('Initializing Config').should('not.exist')
+    cy.get('h1').contains('Choose a Browser')
+  })
+
+  it('is not a valid config for e2e testing', () => {
+    cy.scaffoldProject('experimentalSingleTabRunMode')
+    cy.openProject('experimentalSingleTabRunMode')
+    cy.visitLaunchpad()
+    cy.get('[data-cy-testingtype="e2e"]').click()
+    cy.findByTestId('error-header').contains('Cypress configuration error')
+    cy.findByTestId('alert-body').contains('The experimentalSingleTabRunMode experiment is currently only supported for Component Testing.')
+  })
+})
+
 describe('experimentalStudio', () => {
   it('should show experimentalStudio warning if Cypress detects experimentalStudio config has been set', () => {
     cy.scaffoldProject('experimental-studio')

packages/server/lib/experiments.ts

@@ -56,6 +56,7 @@ const _summaries: StringValues = {
   experimentalSessionAndOrigin: 'Enables cross-origin and improved session support, including the `cy.origin` and `cy.session` commands.',
   experimentalModifyObstructiveThirdPartyCode: 'Applies `modifyObstructiveCode` to third party `.html` and `.js`, removes subresource integrity, and modifies the user agent in Electron.',
   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 spec isolation for faster run mode execution.',
   experimentalStudio: 'Generate and save commands directly to your test suite by interacting with your app as an end user would.',
 }
 
@@ -74,6 +75,7 @@ const _names: StringValues = {
   experimentalInteractiveRunEvents: 'Interactive Mode Run Events',
   experimentalSessionAndOrigin: 'Cross-origin and Session',
   experimentalModifyObstructiveThirdPartyCode: 'Modify Obstructive Third Party Code',
+  experimentalSingleTabRunMode: 'Single Tab Run Mode',
   experimentalSourceRewriting: 'Improved Source Rewriting',
   experimentalStudio: 'Studio',
 }