diff --git a/packages/app/cypress/e2e/studio/studio-cloud.cy.ts b/packages/app/cypress/e2e/studio/studio-cloud.cy.ts index 5018976290cf..d75a7651a56a 100644 --- a/packages/app/cypress/e2e/studio/studio-cloud.cy.ts +++ b/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') + }) }) diff --git a/packages/app/src/runner/SpecRunnerOpenMode.vue b/packages/app/src/runner/SpecRunnerOpenMode.vue index 884556b5f668..89f720f76651 100644 --- a/packages/app/src/runner/SpecRunnerOpenMode.vue +++ b/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 }) diff --git a/packages/app/src/store/studio-store.ts b/packages/app/src/store/studio-store.ts index 3eac0c78bfb8..fb57c0f7047e 100644 --- a/packages/app/src/store/studio-store.ts +++ b/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, ...args: AssertionArgs) => void, generatePossibleAssertions?: ($el: JQuery) => 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, }, })