internal: (studio) do not record events if cloud studio is enabled (#31858)

packages/app/cypress/e2e/studio/studio-cloud.cy.ts

@@ -227,4 +227,35 @@ describe('studio functionality', () => {
     // verify studio is still open
     cy.findByTestId('studio-panel').should('be.visible')
   })
+
+  it('does not record studio commands when cloud studio is enabled', () => {
+    launchStudio({ enableCloudStudio: true })
+
+    cy.findByTestId('studio-panel').should('be.visible')
+
+    // Attempt to perform actions that would normally be recorded in regular studio
+    // but should NOT be recorded in when cloud studio is enabled because event listeners are not attached
+    cy.getAutIframe().within(() => {
+      cy.get('p').contains('Count is 0')
+
+      // Try to click the increment button - this should NOT be recorded
+      // because cloud studio event listeners should not be attached
+      cy.get('#increment').realClick().then(() => {
+        cy.get('p').contains('Count is 1')
+      })
+    })
+
+    // Verify that no legacy studio commands were recorded
+    cy.get('.command-is-studio').should('not.exist')
+
+    // Verify that the actual DOM interactions still work (button was clicked, counter incremented)
+    // but they just weren't recorded by the legacy studio event listeners
+    cy.getAutIframe().within(() => {
+      cy.get('p').should('contain', 'Count is 1')
+    })
+
+    cy.findByTestId('studio-panel').should('be.visible')
+
+    cy.get('[data-cy="studio-toolbar"]').should('not.exist')
+  })
 })

packages/app/src/runner/SpecRunnerOpenMode.vue

@@ -270,6 +270,8 @@ useSubscription({ query: StudioStatus_ChangeDocument }, (_, data) => {
 })
 
 const cloudStudioRequested = computed(() => {
+  studioStore.setCloudStudioRequested(props.gql.cloudStudioRequested || false)
+
   return props.gql.cloudStudioRequested
 })
 

packages/app/src/store/studio-store.ts

@@ -122,6 +122,7 @@ interface StudioRecorderState {
 
   canAccessStudioAI: boolean
   showUrlPrompt: boolean
+  cloudStudioRequested: boolean
   cloudStudioSessionId?: string
 }
 
@@ -139,11 +140,16 @@ export const useStudioStore = defineStore('studioRecorder', {
       _currentId: 1,
       canAccessStudioAI: false,
       showUrlPrompt: true,
+      cloudStudioRequested: false,
       cloudStudioSessionId: undefined,
     }
   },
 
   actions: {
+    setCloudStudioRequested (cloudStudioRequested: boolean) {
+      this.cloudStudioRequested = cloudStudioRequested
+    },
+
     setShowUrlPrompt (shouldShowUrlPrompt: boolean) {
       this.showUrlPrompt = shouldShowUrlPrompt
     },
@@ -504,6 +510,11 @@ export const useStudioStore = defineStore('studioRecorder', {
 
       this._body = body
 
+      // if we're in cloud studio, we shouldn't attach our own listeners - cloud studio will handle it
+      if (this.cloudStudioRequested) {
+        return
+      }
+
       for (const event of eventTypes) {
         this._body.addEventListener(event, this._recordEvent, {
           capture: true,
@@ -859,7 +870,7 @@ export const useStudioStore = defineStore('studioRecorder', {
       return $el.hasClass('__cypress-studio-assertions-menu')
     },
 
-    _openAssertionsMenu (event) {
+    _openAssertionsMenu (event, addAssertion?: ($el: HTMLElement | JQuery<HTMLElement>, ...args: AssertionArgs) => void, generatePossibleAssertions?: ($el: JQuery<Element>) => PossibleAssertions) {
       if (!this._body) {
         throw Error('this._body was not defined')
       }
@@ -879,8 +890,8 @@ export const useStudioStore = defineStore('studioRecorder', {
         $el,
         $body: window.UnifiedRunner.CypressJQuery(this._body),
         props: {
-          possibleAssertions: this._generatePossibleAssertions($el),
-          addAssertion: this._addAssertion,
+          possibleAssertions: generatePossibleAssertions ? generatePossibleAssertions($el) : this._generatePossibleAssertions($el),
+          addAssertion: addAssertion || this._addAssertion,
           closeMenu: this._closeAssertionsMenu,
         },
       })