feat: add back selector playground #33073

jennifer-shehane · 2025-12-05T21:32:10Z

Additional details

Related services change: https://github.com/cypress-io/cypress-services/pull/12320

Add back Selector Playground for all users in open mode
Selector Playground button should be disabled while tests are running.
The 'hand' button removed to toggle Selector Playground on/off (redundant - now opening/closing Selector Playground is the way to enable/disable)
When active, button now displays with purple background.
Turn off recording any actions in Studio (and show recording as off) when the Selector Playground is open with Studio panel open. Switch back to Studio recording when they close the Selector Playground panel.
Turning on recording in Studio with the Selector Playground open will close selector playground. (They shouldn't be able to both be on at the same time).
Opening the Selector Playground will close any Assertion dropdowns that are currently open.

Note

Restores the Selector Playground for all users in open mode with a new button/UI, automatic enablement/highlighting, Studio-aware behavior, refactored utilities, updated tests, and minor dependency bumps.

UI/Runner – Selector Playground
- Re-adds the Playground toggle in SpecRunnerHeaderOpenMode.vue using @cypress-design/vue-button; disabled while tests are running/loading and shows active (purple) state.
- Renders SelectorPlayground panel when selectorPlaygroundStore.show is true; input UX refined (prefix length calc, anti-autocomplete attributes).
Selector Playground core utilities
- Introduces selector-playground/utils.ts with openPlayground, closePlayground, togglePlayground, SELECTOR_METHODS, and prefix helpers; removes legacy toggle from runner/utils.ts.
- Ensures opening enables interactive mode and highlighting; closing turns them off; closes assertions menu when Studio is active.
- Closes Playground on spec change via unifiedRunner.ts.
Studio integration
- StudioPanel.vue passes isSelectorPlaygroundOpen and onCloseSelectorPlayground to Studio; Studio can close Playground when recording starts.
- Header always shows Playground activator; Studio button visibility unchanged by Playground.
Tests
- Adds/updates component tests for header behavior and Selector Playground lifecycle, highlighting, method switching, input attrs, and utils (utils.cy.ts).
Changelog
- Notes feature: Playground available for all users in open mode; auto-enables interactive mode.
Dependencies
- Bumps design system button packages in packages/app and packages/reporter.

^{Written by Cursor Bugbot for commit 58ae592. This will update automatically on new commits. Configure here.}

Steps to test

Check Percy snapshots
Open any e2e / ct test to see it with this PR watching in services: https://github.com/cypress-io/cypress-services/pull/12320

How has the user experience changed?

Before

Selector Playground only available when Studio was not available (during CT tests)

After

Selector Playground always available in open mode

Screen.Recording.2025-12-05.at.4.33.04.PM.mov

Selector Playground + Studio state works together

Screen.Recording.2025-12-10.at.1.04.06.PM.mov

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?

packages/app/src/runner/selector-playground/SelectorPlayground.cy.tsx

jennifer-shehane · 2025-12-05T21:38:41Z

packages/app/src/runner/SpecRunnerHeaderOpenMode.vue

+/* Apply outline-dark hover styles to purple-dark button */
+.playground-button-purple:hover {
+  border-color: rgba(255, 255, 255, 0.6) !important; /* hocus:border-white/60 */
+  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2) !important; /* hocus:shadow-white/20 */
+}
+
+.playground-button-purple:focus {
+  border-color: rgba(255, 255, 255, 0.6) !important; /* hocus:border-white/60 */
+  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2) !important; /* hocus:shadow-white/20 */
+}


The purple-dark button variant in the design system doesn't have the hover/focus style that's in the Figma.

jennifer-shehane · 2025-12-05T21:38:54Z

packages/app/src/runner/SpecRunnerOpenMode.vue

-const studioBetaAvailable = computed(() => {
-  return !!cloudStudioRequested.value
-})
-


This isn't used anywhere else in this component

jennifer-shehane · 2025-12-05T21:39:20Z

packages/app/src/runner/selector-playground/SelectorPlayground.vue

-    <SelectorPlaygroundTooltip
-      color="light"
-      placement="top"
-      :hover-text="t('runner.selectorPlayground.playgroundTooltip')"
-      class="flex h-full"
-    >
-      <button
-        class="border rounded-md flex h-full outline-solid outline-indigo-500 transition w-[40px] duration-150 items-center justify-center hover:bg-gray-800"
-        :aria-label="selectorPlaygroundStore.isEnabled ? 'click to interact with the application and build test cases' : 'click to exit interactive test building mode'"
-        data-cy="playground-toggle"
-        :class="{ 'bg-gray-800 border-gray-700': selectorPlaygroundStore.isEnabled, 'bg-gray-900 border-gray-800': !selectorPlaygroundStore.isEnabled }"
-        @click="toggleEnabled"
-      >
-        <i-cy-selector_x16 class="icon-dark-gray-300" />
-      </button>
-    </SelectorPlaygroundTooltip>


We talked about removing this button as its redundant. The work wasn't done since the assumption was we were getting rid of it.

cypress · 2025-12-05T22:19:04Z

cypress Run #68005

Run Properties: Failed #68005 • 58ae592c5f: update to use design-system purple-dark-mode button

Project	`cypress`
Branch Review	`add-back-selector-playground`
Run status	`Failed #68005`
Run duration	`19m 15s`
Commit	`58ae592c5f: update to use design-system purple-dark-mode button`
Committer	`Jennifer Shehane`
View all properties for this run ↗︎

Test results
Failures	`1`
Flaky	`9`
Pending	`1098`
Skipped	`4`
Passing	`26750`
View all changes introduced in this branch ↗︎

Warning

Partial Report: The results for the Application Quality reports may be incomplete.

UI Coverage `45.18%`
Untested elements	`194`
Tested elements	`164`

Accessibility `98%`
Failed rules	`4 critical` `8 serious` `2 moderate` `2 minor`
Failed elements	`101`

Tests for review

cypress/e2e/commands/files.cy.js • 1 failed test • 5x-driver-firefox

View Output

Test Artifacts

src/cy/commands/files > #readFile > retries to read when ENOENT

    </td>
  </tr></table>

issues/28527.cy.ts • 1 flaky test • 5x-driver-electron

View Output

Test		Artifacts
issue 28527 > fails and then retries and verifies about:blank is not displayed		`Test Replay` `Screenshots`

e2e/origin/config_env.cy.ts • 1 flaky test • 5x-driver-inject-document-domain-chrome

View Output

Test		Artifacts
cy.origin- Cypress.config() > serializable > overwrites different values in secondary if one exists in the primary		`Test Replay`

commands/net_stubbing.cy.ts • 1 flaky test • 5x-driver-firefox

View Output

Test Artifacts

... > stops waiting when an xhr request is canceled

    </td>
  </tr></table>

e2e/origin/cookie_misc.cy.ts • 1 flaky test • 5x-driver-firefox

View Output

Test Artifacts

misc cookie tests > cookies are not set for XHR sync requests

    </td>
  </tr></table>

issues/28527.cy.ts • 1 flaky test • 5x-driver-firefox

View Output

Test		Artifacts
issue 28527 > fails and then retries and verifies about:blank is not displayed		`Screenshots`

The first 5 flaky specs are shown, see all 9 specs in Cypress Cloud.

packages/app/src/runner/selector-playground/SelectorPlayground.vue

jennifer-shehane · 2025-12-08T15:32:46Z

packages/app/src/runner/selector-playground/SelectorPlayground.cy.tsx

+
+  it('triggers highlight on mouseover', () => {


just added some CT coverage that was never there

jennifer-shehane · 2025-12-08T20:48:07Z

Need to implement how this works with Studio:

Disable the recording button and disable recording any actions in Studio when the Selector Playground is open with Studio panel open. Switch back to Studio recording when they close the Selector Playground panel.
Possibly handle the Selector Playground button on a test is showing the default 'cy' background (like an errored test file + new Studio test).

packages/app/src/runner/selector-playground/SelectorPlayground.vue

…date tests

packages/app/src/studio/StudioPanel.vue

mabela416 · 2025-12-11T22:27:04Z

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

    },

    _shouldRecordEvent (event, $el) {
+      if (this._isRecordingDisabled) {


Just fyi, I don't think we're using this function anymore. The logic we use for studio to determine if should record an event is here in the useCommandRecorder hook

Thank you! This was very not obvious to me. I'm going to remove a bunch of this unused code in a new PR also so this mistake doesn't occur again.

Addressed here: 8ed399f

mabela416

I think we should also close the assertions menu when the selector playground is opened

Screen.Recording.2025-12-11.at.5.42.17.PM.mov

mabela416 · 2025-12-12T14:31:32Z

The disabled style is weird when the selector playground is open and then you go inside studio

Screen.Recording.2025-12-12.at.9.27.49.AM.mov

I also think the disabled style should be more like the Record button. At first glance, it doesn't look like it's disabled until you hover over it and see the little icon

jennifer-shehane · 2025-12-12T18:59:39Z

@mabela416 Addressed a couple comments

Close Assertions menu when selector playground is opened: f97372f
Add disabled style: b3d2b05 This is really gnarly right now because this button isn't in the design system. PR for design system here: Purple dark mode button cypress-design#637

mabela416

The selector playground should also be disabled while tests are loading

Screen.Recording.2025-12-12.at.4.03.31.PM.mov

Other than that it looks great

feat: add back selector playground

4dde570

jennifer-shehane self-assigned this Dec 5, 2025

cursor bot reviewed Dec 5, 2025

View reviewed changes

packages/app/src/runner/selector-playground/SelectorPlayground.cy.tsx Show resolved Hide resolved

update test

5fd84e8

jennifer-shehane commented Dec 5, 2025

View reviewed changes

jennifer-shehane added 2 commits December 5, 2025 16:43

changelog entry

8be53d2

add Studio qualifier

07e4d7a

jennifer-shehane mentioned this pull request Dec 5, 2025

Selector playground - would like this same functionality in 15.4.0+ #32672

Closed

add snapshot for when the Studio playground is open

2db4e0e

cursor bot reviewed Dec 8, 2025

View reviewed changes

packages/app/src/runner/selector-playground/SelectorPlayground.vue Show resolved Hide resolved

add a few more component tests

cd9f84a

jennifer-shehane requested a review from mabela416 December 8, 2025 14:56

jennifer-shehane commented Dec 8, 2025

View reviewed changes

jennifer-shehane added 3 commits December 8, 2025 10:36

update show highlight

5708b23

add defensive cleanup

2dc26bf

rename test

9836add

mabela416 approved these changes Dec 8, 2025

View reviewed changes

jennifer-shehane marked this pull request as draft December 8, 2025 20:48

disable studio recording when selectorplayground is shown

92571ca

jennifer-shehane marked this pull request as ready for review December 8, 2025 22:04

Merge branch 'develop' into add-back-selector-playground

2f0fbbb

cursor bot reviewed Dec 8, 2025

View reviewed changes

packages/app/src/runner/selector-playground/SelectorPlayground.vue Show resolved Hide resolved

jennifer-shehane and others added 4 commits December 9, 2025 10:34

add code to open/close selector playground

e733947

Merge branch 'develop' into add-back-selector-playground

82af734

add callback, etc for selector playground to interact with panel + up…

5bb0135

…date tests

removing some tests that are redundant

f39e19c

cursor bot reviewed Dec 10, 2025

View reviewed changes

packages/app/src/studio/StudioPanel.vue Show resolved Hide resolved

jennifer-shehane requested a review from mabela416 December 11, 2025 14:06

mabela416 reviewed Dec 11, 2025

View reviewed changes

jennifer-shehane added 4 commits December 12, 2025 10:04

add try catch around autIframe initialization

b3db65b

remove disabledRecording calls since they're unused

8ed399f

close assertions dropdown when selector playground is opened

f97372f

add a disabled style that is closer to the other disabled styles

b3d2b05

Merge branch 'develop' into add-back-selector-playground

72f2b06

mabela416 reviewed Dec 12, 2025

View reviewed changes

jennifer-shehane added 2 commits December 15, 2025 12:38

Merge branch 'develop' into add-back-selector-playground

cc20775

update to use design-system purple-dark-mode button

58ae592

jennifer-shehane merged commit 9d4e9cf into develop Dec 15, 2025
87 of 93 checks passed

jennifer-shehane deleted the add-back-selector-playground branch December 15, 2025 19:22

feat: add back selector playground #33073

feat: add back selector playground #33073

Uh oh!

Conversation

jennifer-shehane commented Dec 5, 2025 • edited by cursor bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Additional details

Steps to test

How has the user experience changed?

Before

After

PR Tasks

Uh oh!

Uh oh!

jennifer-shehane Dec 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jennifer-shehane Dec 5, 2025

Choose a reason for hiding this comment

Uh oh!

jennifer-shehane Dec 5, 2025

Choose a reason for hiding this comment

Uh oh!

cypress bot commented Dec 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

cypress Run #68005

Tests for review

Uh oh!

Uh oh!

jennifer-shehane Dec 8, 2025

Choose a reason for hiding this comment

Uh oh!

jennifer-shehane commented Dec 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mabela416 Dec 11, 2025

Choose a reason for hiding this comment

Uh oh!

jennifer-shehane Dec 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jennifer-shehane Dec 12, 2025

Choose a reason for hiding this comment

Uh oh!

mabela416 left a comment

Choose a reason for hiding this comment

Uh oh!

mabela416 commented Dec 12, 2025

Uh oh!

jennifer-shehane commented Dec 12, 2025

Uh oh!

mabela416 left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

jennifer-shehane commented Dec 5, 2025 •

edited by cursor bot

Loading

jennifer-shehane Dec 5, 2025 •

edited

Loading

cypress bot commented Dec 5, 2025 •

edited

Loading

jennifer-shehane commented Dec 8, 2025 •

edited

Loading

jennifer-shehane Dec 12, 2025 •

edited

Loading

mabela416 left a comment •

edited

Loading