feat: add experimentalStudio flag back

cli/types/cypress.d.ts

@@ -2866,10 +2866,15 @@ declare namespace Cypress {
      */
     experimentalModifyObstructiveThirdPartyCode: boolean
     /**
-     * Generate and save commands directly to your test suite by interacting with your app as an end user would.
+     * Enables AST-based JS/HTML rewriting. This may fix issues caused by the existing regex-based JS/HTML replacement algorithm.
      * @default false
      */
     experimentalSourceRewriting: boolean
+    /**
+     * Generate and save commands directly to your test suite by interacting with your app as an end user would.
+     * @default false
+     */
+    experimentalStudio: boolean
     /**
      * Number of times to retry a failed test.
      * If a number is set, tests will retry in both runMode and openMode.
@@ -3059,7 +3064,7 @@ declare namespace Cypress {
     viteConfig?: Omit<Exclude<PickConfigOpt<'viteConfig'>, undefined>, 'base' | 'root'>
   }
 
-  interface ComponentConfigOptions<ComponentDevServerOpts = any> extends Omit<CoreConfigOptions, 'baseUrl' | 'experimentalSessionAndOrigin'> {
+  interface ComponentConfigOptions<ComponentDevServerOpts = any> extends Omit<CoreConfigOptions, 'baseUrl' | 'experimentalSessionAndOrigin' | 'experimentalStudio'> {
     devServer: DevServerFn<ComponentDevServerOpts> | DevServerConfigOptions
     devServerConfig?: ComponentDevServerOpts
     /**

packages/config/src/options.ts

@@ -23,7 +23,6 @@ const BREAKING_OPTION_ERROR_KEY: Readonly<AllCypressErrorNames[]> = [
   'EXPERIMENTAL_SESSION_SUPPORT_REMOVED',
   'EXPERIMENTAL_SINGLE_TAB_RUN_MODE',
   'EXPERIMENTAL_SHADOW_DOM_REMOVED',
-  'EXPERIMENTAL_STUDIO_REMOVED',
   'FIREFOX_GC_INTERVAL_REMOVED',
   'NODE_VERSION_DEPRECATION_SYSTEM',
   'NODE_VERSION_DEPRECATION_BUNDLED',
@@ -222,6 +221,12 @@ const driverConfigOptions: Array<DriverConfigOption> = [
     validation: validate.isBoolean,
     isExperimental: true,
     requireRestartOnChange: 'server',
+  }, {
+    name: 'experimentalStudio',
+    defaultValue: false,
+    validation: validate.isBoolean,
+    isExperimental: true,
+    requireRestartOnChange: 'server',
   }, {
     name: 'fileServerFolder',
     defaultValue: '',
@@ -669,6 +674,12 @@ export const testingTypeBreakingOptions: { e2e: Array<BreakingOption>, component
       errorKey: 'CONFIG_FILE_INVALID_TESTING_TYPE_CONFIG_COMPONENT',
       isWarning: false,
     },
+    {
+      name: 'experimentalStudio',
+      errorKey: 'EXPERIMENTAL_STUDIO_E2E_ONLY',
+      isWarning: false,
+      testingTypes: ['component'],
+    },
     {
       name: 'testIsolation',
       errorKey: 'CONFIG_FILE_INVALID_TESTING_TYPE_CONFIG_COMPONENT',

packages/driver/cypress.config.ts

@@ -2,7 +2,6 @@ import { defineConfig } from 'cypress'
 
 export default defineConfig({
   'projectId': 'ypt4pf',
-  // @ts-ignore - https://github.com/cypress-io/cypress/issues/23338
   'experimentalStudio': true,
   'hosts': {
     '*.foobar.com': '127.0.0.1',

packages/errors/src/errors.ts

@@ -1091,6 +1091,12 @@ export const AllCypressErrors = {
 
         If you have feedback about the experiment, please join the discussion here: http://on.cypress.io/single-tab-run-mode`
   },
+  EXPERIMENTAL_STUDIO_E2E_ONLY: () => {
+    return errTemplate`\
+        The ${fmt.highlight(`experimentalStudio`)} experiment is currently only supported for End to End Testing.
+
+        If you have feedback about the experiment, please join the discussion here: http://on.cypress.io/studio-beta`
+  },
   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

@@ -1200,5 +1200,11 @@ describe('visual error templates', () => {
         default: [],
       }
     },
+
+    EXPERIMENTAL_STUDIO_E2E_ONLY: () => {
+      return {
+        default: [],
+      }
+    },
   })
 })

packages/launchpad/cypress/e2e/config-warning.cy.ts

@@ -88,50 +88,36 @@ describe('experimentalSingleTabRunMode', () => {
   })
 })
 
-// TODO: Figure out this. experimentalStudio is back, but must be nested under E2E? Or, does
-// a top level experimentalStudio get applied, but only to E2E?
-describe.skip('experimentalStudio', () => {
-  it('should show experimentalStudio warning if Cypress detects experimentalStudio config has been set', () => {
-    cy.scaffoldProject('experimental-studio')
-    cy.openProject('experimental-studio')
-    cy.visitLaunchpad()
-
-    cy.get('[data-cy="warning-alert"]').contains('Warning: Experimental Studio Removed')
-    cy.get('[data-cy-testingtype="e2e"]').click()
-    cy.get('[data-cy="warning-alert"]').contains('Warning: Experimental Studio Removed')
-  })
-
-  it('should not continually show experimentalStudio warning in the same project', () => {
-    cy.scaffoldProject('experimental-studio')
-    cy.openProject('experimental-studio')
+describe('experimentalStudio', () => {
+  // TODO: fix flaky test https://github.com/cypress-io/cypress/issues/23158
+  it('is not a valid config for component testing', () => {
+    cy.scaffoldProject('experimentalSingleTabRunMode')
+    cy.openProject('experimentalSingleTabRunMode')
     cy.visitLaunchpad()
-
-    cy.get('[data-cy="warning-alert"]').contains('Warning: Experimental Studio Removed')
-    cy.findAllByLabelText(cy.i18n.components.modal.dismiss).first().click()
-    cy.get('[data-cy="warning-alert"]').should('not.exist')
     cy.withCtx(async (ctx) => {
-      await ctx.actions.file.writeFileInProject('cypress.config.js', await ctx.actions.file.readFileInProject('cypress.config.js'))
+      await ctx.actions.file.writeFileInProject('cypress.config.js', `
+        const { defineConfig } = require('cypress')
+
+        module.exports = defineConfig({
+          component: {
+            experimentalStudio: true,
+            devServer: {
+              bundler: 'webpack',
+            },
+          },
+        })`)
     })
 
-    cy.get('[data-cy="loading-spinner"]')
-    cy.get('h1').should('contain', 'Welcome to Cypress!')
-    cy.get('[data-cy="warning-alert"]').should('not.exist')
+    cy.get('[data-cy-testingtype="component"]').click()
+    cy.findByTestId('alert-body').contains('The experimentalStudio experiment is currently only supported for End to End Testing.')
   })
 
-  it('should show experimentalStudio warning when opening project and going back', () => {
-    cy.scaffoldProject('experimental-studio')
-    cy.addProject('experimental-studio')
-    cy.openGlobalMode()
+  it('is a valid config for e2e testing', () => {
+    cy.scaffoldProject('e2e')
+    cy.openProject('e2e')
     cy.visitLaunchpad()
-    cy.contains('experimental-studio').click()
-    cy.get('[data-cy="warning-alert"]').contains('Warning: Experimental Studio Removed')
-    cy.findAllByLabelText(cy.i18n.components.modal.dismiss).first().click()
-    cy.get('[data-cy="warning-alert"]').should('not.exist')
-    cy.get('a').contains('Projects').click()
-    cy.contains('[data-cy="project-card"]', 'experimental-studio').click()
-
     cy.get('[data-cy-testingtype="e2e"]').click()
-    cy.get('[data-cy="warning-alert"]').contains('Warning: Experimental Studio Removed')
+    cy.get('h1').contains('Choose a Browser')
   })
 })
 

system-tests/projects/e2e/cypress.config.js

@@ -4,6 +4,7 @@ const plugin = require('./cypress/plugins')
 module.exports = defineConfig({
   retries: null,
   e2e: {
+    experimentalStudio: true,
     specPattern: 'cypress/e2e/**/*.{js,jsx,mjs,ts,tsx,coffee}',
     setupNodeEvents (on, config) {
       return plugin(on, config)