Merge branch 'develop' into docs/ts-upgrade-guide

Author: cacieprins

.circleci/workflows.yml

@@ -1,4 +1,13 @@
 <!-- See the ../guides/writing-the-cypress-changelog.md for details on writing the changelog. -->
+## 14.2.1
+
+_Released 3/25/2025 (PENDING)_
+
+**Dependency Updates:**
+
+- Upgraded `@cypress/request` from `3.0.7` to `3.0.8`. Addressed in [#31311](https://github.com/cypress-io/cypress/pull/31311).
+- Upgraded `systeminformation` from `5.21.7` to `5.22.8`. Addressed in [#31281](https://github.com/cypress-io/cypress/pull/31281).
+
 ## 14.2.0
 
 _Released 3/12/2025_

cli/CHANGELOG.md

@@ -20,7 +20,7 @@
     "unit": "cross-env BLUEBIRD_DEBUG=1 NODE_ENV=test mocha --reporter mocha-multi-reporters --reporter-options configFile=../mocha-reporter-config.json"
   },
   "dependencies": {
-    "@cypress/request": "^3.0.7",
+    "@cypress/request": "^3.0.8",
     "@cypress/xvfb": "^1.2.4",
     "@types/sinonjs__fake-timers": "8.1.1",
     "@types/sizzle": "^2.3.2",

cli/package.json

@@ -49,6 +49,7 @@
     "prepare": "husky install",
     "prepare-release-artifacts": "node ./scripts/prepare-release-artifacts.js",
     "pretest-e2e": "yarn ensure-deps",
+    "sanitize:mocha:results": "node ./scripts/sanitize-mocha-results.js",
     "prestart": "yarn ensure-deps",
     "start": "cypress open --dev --global",
     "stop-only": "npx stop-only --skip .cy,.publish,.projects,node_modules,dist,dist-test,fixtures,lib,bower_components,src,__snapshots__ --exclude cypress-tests.ts,*only.cy.js",
@@ -67,14 +68,14 @@
     "pretest-watch": "yarn ensure-deps",
     "test-watch": "lerna exec yarn test-watch --ignore=@packages/{driver,root,static,web-config}",
     "type-check": "yarn lerna exec yarn type-check --scope=@tooling/system-tests && node scripts/type_check",
-    "verify:mocha:results": "node ./scripts/verify-mocha-results",
+    "verify:mocha:results": "node ./scripts/verify-mocha-results.js",
     "watch": "yarn gulp watch"
   },
   "devDependencies": {
     "@aws-sdk/client-s3": "3.485.0",
     "@aws-sdk/credential-providers": "3.53.0",
     "@babel/eslint-parser": "7.25.1",
-    "@cypress/request": "^3.0.7",
+    "@cypress/request": "^3.0.8",
     "@cypress/request-promise": "^5.0.0",
     "@electron/fuses": "1.8.0",
     "@electron/notarize": "^2.5.0",

package.json

@@ -351,7 +351,7 @@ describe('App: Specs', () => {
         cy.findByTestId('spec-pattern').should('contain', 'src/**/*.{cy,spec}.{js,jsx}')
 
         cy.contains('button', defaultMessages.createSpec.updateSpecPattern)
-        cy.findByRole('button', { name: 'New spec', exact: false })
+        cy.findByRole('button', { name: 'New spec' })
       })
 
       it('opens config file in ide from SpecPattern', () => {
@@ -391,7 +391,7 @@ describe('App: Specs', () => {
       })
 
       it('shows new spec button to start creation workflow', () => {
-        cy.findByRole('button', { name: 'New spec', exact: false }).click()
+        cy.findByRole('button', { name: 'New spec' }).click()
 
         cy.findByRole('dialog', { name: defaultMessages.createSpec.newSpecModalTitle }).within(() => {
           cy.findAllByTestId('card').eq(0)
@@ -404,7 +404,7 @@ describe('App: Specs', () => {
 
       context('scaffold starter spec', () => {
         it('should generate template spec', () => {
-          cy.findByRole('button', { name: 'New spec', exact: false }).click()
+          cy.findByRole('button', { name: 'New spec' }).click()
 
           cy.findByRole('dialog', { name: defaultMessages.createSpec.newSpecModalTitle }).within(() => {
             cy.findAllByTestId('card').eq(0)
@@ -484,7 +484,7 @@ describe('App: Specs', () => {
       })
 
       it('shows extension warning', () => {
-        cy.findByRole('button', { name: 'New spec', exact: false }).click()
+        cy.findByRole('button', { name: 'New spec' }).click()
 
         cy.findByRole('dialog', { name: defaultMessages.createSpec.newSpecModalTitle }).within(() => {
           cy.findAllByTestId('card').eq(0)
@@ -699,7 +699,7 @@ describe('App: Specs', () => {
         cy.findByTestId('spec-pattern').should('contain', 'src/specs-folder/*.cy.{js,jsx}')
 
         cy.contains('button', defaultMessages.createSpec.updateSpecPattern)
-        cy.findByRole('button', { name: 'New spec', exact: false })
+        cy.findByRole('button', { name: 'New spec' })
       })
 
       it('opens config file in ide from SpecPattern', () => {
@@ -727,15 +727,15 @@ describe('App: Specs', () => {
       })
 
       it('shows new spec button to start creation workflow', () => {
-        cy.findByRole('button', { name: 'New spec', exact: false }).click()
+        cy.findByRole('button', { name: 'New spec' }).click()
 
         selectTemplateSpecCard()
 
         cy.findByRole('dialog', { name: 'Enter the path for your new spec' }).should('be.visible')
       })
 
       it('shows create first spec page with create template spec option and goes back if it is cancel', () => {
-        cy.findByRole('button', { name: 'New spec', exact: false }).click()
+        cy.findByRole('button', { name: 'New spec' }).click()
 
         selectTemplateSpecCard()
 

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

@@ -1,4 +1,5 @@
 import { launchStudio } from './helper'
+import pDefer from 'p-defer'
 
 describe('Cypress Studio', () => {
   function incrementCounter (initialCount: number) {
@@ -21,13 +22,59 @@ describe('Cypress Studio', () => {
     })
   }
 
-  it('loads the cloud studio page', () => {
-    launchStudio({ specName: 'spec.cy.js', enableCloudStudio: true })
+  context('cloud studio', () => {
+    it('loads the studio page', () => {
+      launchStudio({ enableCloudStudio: true })
 
-    cy.window().then((win) => {
-      expect(win.Cypress.config('isDefaultProtocolEnabled')).to.be.false
-      expect(win.Cypress.config('isStudioProtocolEnabled')).to.be.true
-      expect(win.Cypress.state('isProtocolEnabled')).to.be.true
+      cy.window().then((win) => {
+        expect(win.Cypress.config('isDefaultProtocolEnabled')).to.be.false
+        expect(win.Cypress.config('isStudioProtocolEnabled')).to.be.true
+        expect(win.Cypress.state('isProtocolEnabled')).to.be.true
+      })
+    })
+
+    it('immediately loads the studio panel', () => {
+      const deferred = pDefer()
+
+      cy.scaffoldProject('experimental-studio')
+      cy.openProject('experimental-studio', [], {
+        cloudStudio: true,
+      })
+
+      cy.startAppServer('e2e')
+      cy.visitApp()
+      cy.specsPageIsVisible()
+      cy.get('[data-cy-row="spec.cy.js"]').click()
+
+      cy.waitForSpecToFinish()
+
+      cy.intercept('/cypress/e2e/index.html', () => {
+        // wait for the promise to resolve before responding
+        // this will ensure the studio panel is loaded before the test finishes
+        return deferred.promise
+      }).as('indexHtml')
+
+      cy.contains('visits a basic html page')
+      .closest('.runnable-wrapper')
+      .findByTestId('launch-studio')
+      .click()
+
+      // regular studio is not loaded until after the test finishes
+      cy.get('[data-cy="hook-name-studio commands"]').should('not.exist')
+      // cloud studio is loaded immediately
+      cy.findByTestId('studio-panel').should('exist').then(() => {
+        // we've verified the studio panel is loaded, now resolve the promise so the test can finish
+        deferred.resolve()
+      })
+
+      cy.wait('@indexHtml')
+
+      // Studio re-executes spec before waiting for commands - wait for the spec to finish executing.
+      cy.waitForSpecToFinish()
+
+      // Verify the studio panel is still open
+      cy.findByTestId('studio-panel').should('exist')
+      cy.get('[data-cy="hook-name-studio commands"]').should('exist')
     })
   })
 

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

@@ -29,10 +29,10 @@
     "@cypress-design/vue-tabs": "^1.2.2",
     "@cypress-design/vue-tag": "^1.0.1",
     "@cypress/mount-utils": "0.0.0-development",
-    "@faker-js/faker": "8.4.1",
+    "@faker-js/faker": "9.6.0",
     "@graphql-typed-document-node/core": "^3.1.0",
     "@headlessui/vue": "1.4.0",
-    "@iconify-json/mdi": "1.1.63",
+    "@iconify-json/mdi": "^1.2.3",
     "@intlify/unplugin-vue-i18n": "4.0.0",
     "@module-federation/runtime": "^0.8.11",
     "@packages/data-context": "0.0.0-development",
@@ -44,7 +44,7 @@
     "@packages/types": "0.0.0-development",
     "@percy/cypress": "^3.1.3",
     "@popperjs/core": "2.11.6",
-    "@testing-library/cypress": "9.0.0",
+    "@testing-library/cypress": "10.0.3",
     "@tooling/system-tests": "0.0.0-development",
     "@urql/core": "2.4.4",
     "@urql/vue": "0.6.2",

packages/app/package.json

@@ -98,7 +98,10 @@
         <ScreenshotHelperPixels />
       </template>
       <template #panel4>
-        <StudioPanel v-show="shouldShowStudioPanel" />
+        <StudioPanel
+          v-show="shouldShowStudioPanel"
+          :can-access-studio-a-i="studioStore.canAccessStudioAI"
+        />
       </template>
     </ResizablePanels>
   </AdjustRunnerStyleDuringScreenshot>
@@ -239,7 +242,7 @@ const studioStatus = computed(() => {
 })
 
 const shouldShowStudioPanel = computed(() => {
-  return studioStatus.value === 'INITIALIZED' && studioStore.isActive
+  return studioStatus.value === 'INITIALIZED' && (studioStore.isLoading || studioStore.isActive)
 })
 
 const hideCommandLog = runnerUiStore.hideCommandLog

packages/app/src/runner/SpecRunnerOpenMode.vue

@@ -281,31 +281,33 @@ export class EventManager {
     this.reporterBus.on('studio:init:test', (testId) => {
       this.studioStore.setTestId(testId)
 
-      this.ws.emit('studio:init', (error) => {
+      this.ws.emit('studio:init', ({ canAccessStudioAI, error }) => {
         if (error) {
           // eslint-disable-next-line no-console
           console.error(error)
         }
 
+        this.studioStore.setCanAccessStudioAI(canAccessStudioAI)
         studioInit()
       })
     })
 
     this.reporterBus.on('studio:init:suite', (suiteId) => {
       this.studioStore.setSuiteId(suiteId)
 
-      this.ws.emit('studio:init', (error) => {
+      this.ws.emit('studio:init', ({ canAccessStudioAI, error }) => {
         if (error) {
           // eslint-disable-next-line no-console
           console.error(error)
         }
 
+        this.studioStore.setCanAccessStudioAI(canAccessStudioAI)
         studioInit()
       })
     })
 
     this.reporterBus.on('studio:cancel', () => {
-      this.ws.emit('studio:destroy', (error) => {
+      this.ws.emit('studio:destroy', ({ error }) => {
         if (error) {
           // eslint-disable-next-line no-console
           console.error(error)
@@ -338,7 +340,7 @@ export class EventManager {
         if (err) {
           this.reporterBus.emit('test:set:state', this.studioStore.saveError(err), noop)
         } else {
-          this.ws.emit('studio:destroy', (error) => {
+          this.ws.emit('studio:destroy', ({ error }) => {
             if (error) {
               // eslint-disable-next-line no-console
               console.error(error)
@@ -353,7 +355,7 @@ export class EventManager {
     })
 
     this.localBus.on('studio:cancel', () => {
-      this.ws.emit('studio:destroy', (error) => {
+      this.ws.emit('studio:destroy', ({ error }) => {
         if (error) {
           // eslint-disable-next-line no-console
           console.error(error)

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

@@ -119,6 +119,8 @@ interface StudioRecorderState {
   }
   _body?: Element
   _currentId: number
+
+  canAccessStudioAI: boolean
 }
 
 export const useStudioStore = defineStore('studioRecorder', {
@@ -133,6 +135,7 @@ export const useStudioStore = defineStore('studioRecorder', {
       isFailed: false,
       _hasStarted: false,
       _currentId: 1,
+      canAccessStudioAI: false,
     }
   },
 
@@ -148,6 +151,10 @@ export const useStudioStore = defineStore('studioRecorder', {
       this._updateUrlParams(['testId', 'suiteId'])
     },
 
+    setCanAccessStudioAI (canAccessStudioAI: boolean) {
+      this.canAccessStudioAI = canAccessStudioAI
+    },
+
     clearRunnableIds () {
       this.testId = undefined
       this.suiteId = undefined

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

@@ -10,32 +10,47 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
 import { init, loadRemote } from '@module-federation/runtime'
 import type { StudioAppDefaultShape, StudioPanelShape } from './studio-app-types'
 
+// Mirrors the ReactDOM.Root type since incorporating those types
+// messes up vue typing elsewhere
+interface Root {
+  render: (element: JSX.Element) => void
+  unmount: () => void
+}
+
+const props = defineProps<{
+  canAccessStudioAI: boolean
+}>()
+
 interface StudioApp { default: StudioAppDefaultShape }
 
 const root = ref<HTMLElement | null>(null)
 const error = ref<string | null>(null)
 const Panel = ref<StudioPanelShape | null>(null)
+const reactRoot = ref<Root | null>(null)
 
 const maybeRenderReactComponent = () => {
   if (!Panel.value || !!error.value) {
     return
   }
 
-  const panel = window.UnifiedRunner.React.createElement(Panel.value)
+  const panel = window.UnifiedRunner.React.createElement(Panel.value, { canAccessStudioAI: props.canAccessStudioAI })
 
-  window.UnifiedRunner.ReactDOM.createRoot(root.value).render(panel)
+  reactRoot.value = window.UnifiedRunner.ReactDOM.createRoot(root.value)
+  reactRoot.value?.render(panel)
 }
 
+watch(() => props.canAccessStudioAI, maybeRenderReactComponent)
+
 const unmountReactComponent = () => {
   if (!Panel.value || !root.value) {
     return
   }
 
-  window.UnifiedRunner.ReactDOM.unmountComponentAtNode(root.value)
+  reactRoot.value?.unmount()
 }
 
 init({

packages/app/src/studio/StudioPanel.vue

@@ -1,7 +1,11 @@
-export interface StudioPanelShape {
-  (): JSX.Element
+export interface StudioPanelProps {
+  canAccessStudioAI: boolean
 }
 
+export type StudioPanelShape = (props: StudioPanelProps) => JSX.Element
+
 export interface StudioAppDefaultShape {
+  // Purposefully do not use React in this signature to avoid conflicts when this type gets
+  // transferred to the Cypress app
   StudioPanel: StudioPanelShape
 }

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

@@ -102,7 +102,7 @@ export class CloudDataSource {
     return this.params.getUser()
   }
 
-  async #additionalHeaders () {
+  async additionalHeaders () {
     return {
       'Authorization': this.#user ? `bearer ${this.#user.authToken}` : '',
       'x-cypress-version': pkg.version,
@@ -160,7 +160,7 @@ export class CloudDataSource {
           ...init,
           headers: {
             ...init?.headers,
-            ...await this.#additionalHeaders(),
+            ...await this.additionalHeaders(),
           },
         })
       },