cypress-io · jennifer-shehane · Oct 31, 2025 · Oct 31, 2025 · Oct 31, 2025
diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md
@@ -1735,7 +1735,7 @@ _Released 1/24/2023_
   configured to exclude files with those extensions. Addresses
   [#24495](https://github.com/cypress-io/cypress/issues/24495).
 - Added support for the `data-qa` selector in the
-  [Selector Playground](guides/core-concepts/cypress-app#Selector-Playground) in
+  [Selector Playground](guides/core-concepts/cypress-app) in
   addition to `data-cy`, `data-test` and `data-testid`. Addresses
   [#25305](https://github.com/cypress-io/cypress/issues/25305).
 

diff --git a/cli/types/cypress.d.ts b/cli/types/cypress.d.ts
@@ -713,7 +713,7 @@ declare namespace Cypress {
 
     /**
      * Element selector logic used for generating selectors for elements
-     * in the Selector Playground and Cypress Studio.
+     * in the Cypress Studio and cy.prompt().
      * @see https://on.cypress.io/element-selector-api
      */
     ElementSelector: {

diff --git a/packages/app/cypress/component/support/ctSupport.ts b/packages/app/cypress/component/support/ctSupport.ts
@@ -26,13 +26,11 @@ export const createEventManager = () => {
     null, // packages/driver, not needed for CT tests
     // @ts-ignore
     null, // MobX, also not needed in Vue CT tests,
-    null, // selectorPlaygroundModel,
     StubWebsocket,
   )
 }
 
 const mockDom = {
-  addOrUpdateSelectorPlaygroundHighlight: () => {},
   scrollIntoView: () => {},
   getElements: () => {},
 }

diff --git a/packages/app/cypress/e2e/cypress-in-cypress-run-mode.cy.ts b/packages/app/cypress/e2e/cypress-in-cypress-run-mode.cy.ts
@@ -12,7 +12,6 @@ describe('Cypress In Cypress - run mode', { viewportWidth: 1200 }, () => {
     cy.waitForSpecToFinish()
 
     cy.findByTestId('aut-url').should('be.visible')
-    cy.findByTestId('playground-activator').should('not.exist')
 
     cy.findByLabelText('Stats').within(() => {
       cy.get('.passed .num', { timeout: 10000 }).should('have.text', '1')
@@ -41,7 +40,6 @@ describe('Cypress In Cypress - run mode', { viewportWidth: 1200 }, () => {
 
     cy.waitForSpecToFinish()
     cy.findByTestId('aut-url').contains('URL navigation disabled in component testing').should('be.visible')
-    cy.findByTestId('playground-activator').should('not.exist')
 
     cy.findByLabelText('Stats').within(() => {
       cy.get('.passed .num', { timeout: 10000 }).should('have.text', '1')

diff --git a/packages/app/src/pages/Specs/Runner.vue b/packages/app/src/pages/Specs/Runner.vue
@@ -13,8 +13,6 @@
 
     <!--
       Open Mode is the full Cypress runner UI -
-      including things like the SpecList,
-      Side Nav, Selector Playground etc.
       It is driven by GraphQL and urql.
     -->
     <SpecRunnerContainerOpenMode

diff --git a/packages/app/src/runner/SpecRunnerHeaderOpenMode.cy.tsx b/packages/app/src/runner/SpecRunnerHeaderOpenMode.cy.tsx
@@ -39,70 +39,6 @@ describe('SpecRunnerHeaderOpenMode', { viewportHeight: 500 }, () => {
     cy.findByTestId('viewport-size').should('be.visible').contains('500x500')
   })
 
-  describe('selector playground button', () => {
-    it('is enabled by default', () => {
-      cy.mountFragment(SpecRunnerHeaderFragmentDoc, {
-        render: (gqlVal) => {
-          return renderWithGql(gqlVal)
-        },
-      })
-
-      cy.get('[data-cy="playground-activator"]').should('not.be.disabled')
-    })
-
-    it('is disabled when isRunning is true', () => {
-      const autStore = useAutStore()
-
-      autStore.setIsRunning(true)
-
-      cy.mountFragment(SpecRunnerHeaderFragmentDoc, {
-        render: (gqlVal) => {
-          return renderWithGql(gqlVal)
-        },
-      })
-
-      cy.get('[data-cy="playground-activator"]').should('be.disabled')
-    })
-
-    it('is disabled when isLoading is true', () => {
-      const autStore = useAutStore()
-
-      autStore.setIsLoading(true)
-
-      cy.mountFragment(SpecRunnerHeaderFragmentDoc, {
-        render: (gqlVal) => {
-          return renderWithGql(gqlVal)
-        },
-      })
-
-      cy.get('[data-cy="playground-activator"]').should('be.disabled')
-    })
-
-    it('is hidden when studio beta is available', () => {
-      cy.mountFragment(SpecRunnerHeaderFragmentDoc, {
-        render: (gqlVal) => {
-          return renderWithGql(gqlVal, true, true)
-        },
-      })
-
-      cy.get('[data-cy="playground-activator"]').should('not.exist')
-    })
-
-    it('opens and closes selector playground', () => {
-      cy.mountFragment(SpecRunnerHeaderFragmentDoc, {
-        render: (gqlVal) => {
-          return renderWithGql(gqlVal)
-        },
-      })
-
-      cy.findByTestId('playground-activator').click()
-      cy.get('#selector-playground').should('be.visible')
-
-      cy.findByTestId('playground-activator').click()
-      cy.get('#selector-playground').should('not.exist')
-    })
-  })
-
   describe('url input', () => {
     it('shows url if currentTestingType is e2e', () => {
       const autStore = useAutStore()
@@ -239,7 +175,6 @@ describe('SpecRunnerHeaderOpenMode', { viewportHeight: 500 }, () => {
         },
       })
 
-      cy.findByTestId('playground-activator').should('be.visible')
       cy.findByTestId('aut-url-input').should('have.prop', 'readOnly', true)
       cy.findByTestId('aut-url-input').should('have.prop', 'placeholder', 'URL navigation disabled in component testing')
       cy.findByTestId('viewport-size').should('be.visible').contains('500x500')

diff --git a/packages/app/src/runner/SpecRunnerHeaderOpenMode.vue b/packages/app/src/runner/SpecRunnerHeaderOpenMode.vue
@@ -4,18 +4,7 @@
     ref="autHeaderEl"
     class="h-full bg-gray-1100 border-l-[1px] border-gray-900 min-h-[64px] text-[14px]"
   >
-    <div class="flex flex-wrap grow p-[16px] gap-[12px] h-[64px] flex-nowrap">
-      <button
-        v-if="!studioBetaAvailable"
-        data-cy="playground-activator"
-        :disabled="isDisabled"
-        class="bg-gray-1100 border rounded-md flex h-full border-gray-800 outline-solid outline-indigo-500 transition w-[40px] duration-150 items-center justify-center hover:bg-gray-800"
-        :aria-label="t('runner.selectorPlayground.toggle')"
-        :class="[selectorPlaygroundStore.show ? 'bg-gray-800 border-gray-700' : 'bg-gray-1100']"
-        @click="togglePlayground"
-      >
-        <i-cy-crosshairs_x16 class="icon-dark-gray-300" />
-      </button>
+    <div class="flex grow p-[16px] gap-[12px] h-[64px] flex-nowrap">
       <div
         data-cy="aut-url"
         class="aut-url-container border rounded flex bg-gray-950 grow border-gray-800 h-[32px] align-middle"
@@ -85,11 +74,6 @@
       />
     </div>
 
-    <SelectorPlayground
-      v-if="selectorPlaygroundStore.show"
-      :get-aut-iframe="getAutIframe"
-      :event-manager="eventManager"
-    />
     <Alert
       v-model="showAlert"
       status="success"
@@ -109,16 +93,14 @@
 <script lang="ts" setup>
 import { computed, ref, watchEffect } from 'vue'
 import { useRoute } from 'vue-router'
-import { useAutStore, useSpecStore, useSelectorPlaygroundStore } from '../store'
+import { useAutStore, useSpecStore } from '../store'
 import { useAutHeader } from './useAutHeader'
 import { gql } from '@urql/vue'
 import { useI18n } from 'vue-i18n'
 import type { SpecRunnerHeaderFragment } from '../generated/graphql'
 import type { EventManager } from './event-manager'
 import type { AutIframe } from './aut-iframe'
-import { togglePlayground as _togglePlayground } from './utils'
 import Tag from '@cypress-design/vue-tag'
-import SelectorPlayground from './selector-playground/SelectorPlayground.vue'
 import ExternalLink from '@packages/frontend-shared/src/gql-components/ExternalLink.vue'
 import Alert from '@packages/frontend-shared/src/components/Alert.vue'
 
@@ -174,8 +156,6 @@ watchEffect(() => {
   showAlert.value = route.params.shouldShowTroubleRenderingAlert === 'true'
 })
 
-const autIframe = props.getAutIframe()
-
 const displayScale = computed(() => {
   return autStore.scale < 1 ? `${Math.round(autStore.scale * 100) }%` : 0
 })
@@ -184,17 +164,11 @@ const autUrl = computed(() => {
   return autStore.url
 })
 
-const selectorPlaygroundStore = useSelectorPlaygroundStore()
-
-const togglePlayground = () => _togglePlayground(autIframe)
-
 // Have to spread gql props since binding it to v-model causes error when testing
 const selectedBrowser = ref({ ...props.gql.activeBrowser })
 
 const activeSpecPath = specStore.activeSpec?.absolute
 
-const isDisabled = computed(() => autStore.isRunning || autStore.isLoading)
-
 const urlReadOnly = computed(() => {
   return !studioStore.needsUrl || props.gql.currentTestingType === 'component'
 })

diff --git a/packages/app/src/runner/SpecRunnerHeaderRunMode.cy.tsx b/packages/app/src/runner/SpecRunnerHeaderRunMode.cy.tsx
@@ -26,7 +26,6 @@ describe('SpecRunnerHeaderRunMode', { viewportHeight: 500 }, () => {
       cy.get('[data-cy="select-browser"]')
       .find('title').should('have.text', 'Chrome 1')
 
-      cy.get('[data-cy="playground-activator"]').should('not.exist')
       // confirm expected content is rendered
       cy.contains('1000x660').should('be.visible')
       cy.contains('40%').should('be.visible')
@@ -56,7 +55,6 @@ describe('SpecRunnerHeaderRunMode', { viewportHeight: 500 }, () => {
 
       cy.contains('URL navigation disabled in component testing').should('be.visible')
 
-      cy.get('[data-cy="playground-activator"]').should('not.exist')
       // confirm expected content is rendered
       cy.contains('500x500').should('be.visible')
       cy.contains('40%').should('be.visible')