internal: Redesign single test view when studio is open

[mabela416]

• Closes
  https://github.com/cypress-io/cypress-services/issues/10425https://github.com/cypress-io/cypress-services/issues/10425https://github.com/cypress-io/cypress-services/issues/10425

Additional details

• Update view in single test mode in studio
• Clean up the purple line and the save commands/cancel buttons in the reporter when in studio mode

Steps to test

• Make sure you're experimentalStudio: true in your cypress.config.js
• On the test list, click on the wand icon to open single test mode and the header and content should be like the figma
  • Display specname and describes in top header with > between them.
  • Have tooltip that shows describes that don't fit in header.
  • Display 'back button' - when you click this, it should go back to the spec run
  • Do not show fail/pass status counter
  • Show name of test in secondary header
  • Move play/rerun/etc buttons into secondary header
  • Show icon for pass/fail etc in the test name
    

How has the user experience changed?

PR Tasks

• Have tests been added/updated?
• Has a PR for user-facing changes been opened in cypress-documentation?
• Have API changes been updated in the type definitions?

[cursor]

Bug: Studio Mode Detection Fails in Regular Tests

The waitForSpecToFinish utility attempts to detect Studio mode by checking win.state?.studioSingleTestActive. However, the window.state object, which contains studioSingleTestActive, is only populated in Cypress-in-Cypress test environments. In regular test execution, window.state is undefined, causing the Studio mode detection to always evaluate as falsy. This renders the Studio mode check ineffective, leading to incorrect behavior when Studio mode is active outside of Cypress-in-Cypress.

packages/app/cypress/e2e/support/execute-spec.ts#L27-L36

cypress/packages/app/cypress/e2e/support/execute-spec.ts

Lines 27 to 36 in 27ecd7c

	export const waitForSpecToFinish = (expectedResults, timeout?: number) => {
	// Check if we're in studio mode using URL hash parameters (same method as studio store)
	cy.window().then((win) => {
	const studioSingleTestActive = win.state?.studioSingleTestActive
	if (!studioSingleTestActive) {
	cy.get('.passed > .num').should('exist')
	cy.get('.failed > .num').should('exist')
	}
	})

Fix in Cursor • Fix in Web

---

Was this report helpful? Give feedback by reacting with 👍 or 👎

[mschile]

I believe these types are exposed to the user so I don't think we want to add these types.

[mschile]

If this is becoming too much of an issue, just pass in isStudioMode similar to what you were doing before.

[mschile]

Added a few comments.

[cursor]

Bug: Branch Hardcoding Causes CI Failures

The CircleCI configuration in .circleci/workflows.yml hardcodes the temporary development branch mabel/issue-10425-studio-redesign into mainBuildFilters and the setup_should_persist_artifacts command. This grants unintended CI behavior to a temporary branch and will lead to workflow failures once the branch is merged or deleted.

.circleci/workflows.yml#L40-L41

cypress/.circleci/workflows.yml

Lines 40 to 41 in 687d088

	- 'update-v8-snapshot-cache-on-develop'
	- 'mabel/issue-10425-studio-redesign'

Fix in Cursor • Fix in Web

---

Was this report helpful? Give feedback by reacting with 👍 or 👎

[cursor]

Bug: Cypress Assertion Timing Causes Flakiness

Adding .should('not.be.empty') to the getAutIframe function causes test flakiness. This strict assertion can fail if the iframe content is still loading, whereas previously Cypress would implicitly wait for the content to be ready. This introduces timing-related, intermittent test failures.

packages/frontend-shared/cypress/support/e2e.ts#L625-L626

cypress/packages/frontend-shared/cypress/support/e2e.ts

Lines 625 to 626 in 1e3e32d

	function getAutIframe () {
	return cy.get('iframe.aut-iframe').its('0.contentDocument.documentElement').should('not.be.empty').then(cy.wrap) as Cypress.Chainable<JQuery<HTMLIFrameElement>>

Fix in Cursor • Fix in Web

---

Was this report helpful? Give feedback by reacting with 👍 or 👎