Merge branch 'develop' into feat/cy-prompt

Author: ryanthemanuel

.circleci/workflows.yml

@@ -1,11 +1,11 @@
 version: 2.1
 
-chrome-stable-version: &chrome-stable-version "137.0.7151.68"
-chrome-beta-version: &chrome-beta-version "138.0.7204.15"
+chrome-stable-version: &chrome-stable-version "137.0.7151.103"
+chrome-beta-version: &chrome-beta-version "138.0.7204.23"
 firefox-stable-version: &firefox-stable-version "137.0"
 
 orbs:
-  browser-tools: circleci/browser-tools@2.0.0
+  browser-tools: circleci/browser-tools@2.1.1
 
 defaults: &defaults
   parallelism: 1
@@ -582,11 +582,6 @@ commands:
         description: whether or not to install google chrome for testing
         type: boolean
         default: false
-      google-chrome-for-testing-channel:
-        description: Google Chrome for Testing channel to install
-        type: string
-        # can be stable, beta, dev, or canary
-        default: stable
       google-chrome-for-testing-version:
         description: Google Chrome for Testing version to install
         type: string
@@ -639,13 +634,13 @@ commands:
                   equal: [ true, << parameters.install-chrome-for-testing >> ]
                 steps:
                   - run:
-                      name: Install Chrome for Testing and link it to google-chrome
+                      name: Install unzip
                       command: |
-                        INSTALL_OUTPUT=$(npx @puppeteer/browsers install chrome@<<parameters.google-chrome-version>> --path /tmp/chrome-for-testing)
-                        DOWNLOAD_DIR=$(echo "$INSTALL_OUTPUT" | grep -o '\/.*\/chrome-linux64')
-                        mv $DOWNLOAD_DIR /opt/chrome-for-testing
-                        ln -fs /opt/chrome-for-testing/chrome /usr/local/bin/chrome
-                        rm -rf /tmp/chrome-for-testing
+                        apt-get update && apt-get install -y unzip
+                  - browser-tools/install_chrome_for_testing:
+                      version: << parameters.google-chrome-for-testing-version >>
+                      install_chromedriver: false
+
   # This code builds better-sqlite3 on Debian 10 (Buster). This is necessary because Debian 10 has the oldest glibc version (2.28) that we support.
   #
   # Since this is running Docker remote (because the job running the command may not be using an executor with the appropriate glibc version), we need to 

npm/vite-dev-server/package.json

@@ -22,6 +22,7 @@
   },
   "devDependencies": {
     "chai": "^4.3.6",
+    "cross-env": "7.0.3",
     "decache": "^4.6.2",
     "dedent": "^0.7.0",
     "mocha": "^9.2.2",

npm/webpack-dev-server/package.json

@@ -35,6 +35,7 @@
     "@types/speed-measure-webpack-plugin": "^1.3.4",
     "@types/webpack-bundle-analyzer": "4.7.0",
     "chai": "^4.3.6",
+    "cross-env": "7.0.3",
     "dedent": "^0.7.0",
     "mocha": "^9.2.2",
     "proxyquire": "2.1.3",

package.json

@@ -166,7 +166,6 @@
     "gulp-debug": "4.0.0",
     "gulp-rename": "1.4.0",
     "hasha": "5.0.0",
-    "http-server": "0.12.3",
     "human-interval": "1.0.0",
     "husky": "7.0.2",
     "inquirer": "8.2.4",

packages/app/README.md

@@ -17,7 +17,7 @@ This is the front-end for the Cypress App.
 Cypress has two modes: `run` and `open`. We want run mode to be as light and fast as possible, since this is the mode used to run on CI machines, etc. Run mode has minimal UI showing only what is necessary. Open mode is the interactive experience.
 
 - **`open`** mode is driven using GraphQL and urql. It shows the full Cypress app, include the top nav, side nav, spec list, etc. You can change between testing types, check your latest runs on Cypress Cloud, update settings, etc.
-- **`run`** mode is does not rely on GraphQL. This is so we can be as performant as possible. It only renders the "runner" part of the UI, which is comprised of the command log, Spec Runner header, and AUT iframe.
+- **`run`** mode does not rely on GraphQL. This is so we can be as performant as possible. It only renders the "runner" part of the UI, which is comprised of the command log, Spec Runner header, and AUT iframe.
 
 The two modes are composed using the same logic, but have slightly different components. You can see where the differences are in `Runner.vue`(src/pages/Specs/Runner.vue). Notice that `<SpecRunnerOpenMode>` receives a `gql` prop, since it uses GraphQL, and `<SpecRunnerRunMode>` does not.
 

packages/app/cypress/e2e/runs.cy.ts

@@ -564,8 +564,9 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
       })
 
       cy.visitApp('/runs')
+      cy.findByText(defaultMessages.runs.errors.unauthorized.button).should('be.visible')
       cy.findByText(defaultMessages.runs.errors.unauthorized.button).click()
-      cy.findByText(defaultMessages.runs.errors.unauthorizedRequested.button).should('exist')
+      cy.findByText(defaultMessages.runs.errors.unauthorizedRequested.button).should('be.visible')
     })
   })
 

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/package.json

@@ -58,7 +58,7 @@
     "classnames": "^2.5.1",
     "combine-properties": "0.1.0",
     "concurrently": "^6.2.0",
-    "cross-env": "6.0.3",
+    "cross-env": "7.0.3",
     "cypress-plugin-tab": "1.0.5",
     "cypress-real-events": "1.14.0",
     "dayjs": "^1.9.3",

packages/app/src/runner/SpecRunnerOpenMode.vue

@@ -102,6 +102,7 @@
           <StudioPanel
             v-if="shouldShowStudioPanel"
             data-cy="studio-panel"
+            :cloud-studio-session-id="studioStore.cloudStudioSessionId"
             :can-access-studio-a-i="studioStore.canAccessStudioAI"
             :on-studio-panel-close="handleStudioPanelClose"
             :event-manager="eventManager"
@@ -269,6 +270,8 @@ useSubscription({ query: StudioStatus_ChangeDocument }, (_, data) => {
 })
 
 const cloudStudioRequested = computed(() => {
+  studioStore.setCloudStudioRequested(props.gql.cloudStudioRequested || false)
+
   return props.gql.cloudStudioRequested
 })
 

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

@@ -283,27 +283,29 @@ export class EventManager {
       this.studioStore.setSuiteId(suiteId)
       this.studioStore.setShowUrlPrompt(showUrlPrompt)
 
-      this.ws.emit('studio:init', ({ canAccessStudioAI, error }) => {
+      this.ws.emit('studio:init', ({ canAccessStudioAI, cloudStudioSessionId, error }) => {
         if (error) {
           // eslint-disable-next-line no-console
           console.error(error)
         }
 
         this.studioStore.setCanAccessStudioAI(canAccessStudioAI)
+        this.studioStore.setCloudStudioSessionId(cloudStudioSessionId)
         studioInit()
       })
     }
 
     this.reporterBus.on('studio:init:test', (testId) => {
       this.studioStore.setTestId(testId)
 
-      this.ws.emit('studio:init', ({ canAccessStudioAI, error }) => {
+      this.ws.emit('studio:init', ({ canAccessStudioAI, cloudStudioSessionId, error }) => {
         if (error) {
           // eslint-disable-next-line no-console
           console.error(error)
         }
 
         this.studioStore.setCanAccessStudioAI(canAccessStudioAI)
+        this.studioStore.setCloudStudioSessionId(cloudStudioSessionId)
         studioInit()
       })
     })