test: Selector playground CT tests (#19413)

packages/app/src/runner/SpecRunnerHeader.spec.tsx

@@ -22,6 +22,8 @@ describe('SpecRunnerHeader', () => {
         return renderWithGql(gqlVal)
       },
     })
+
+    cy.percySnapshot()
   })
 
   it('disabled selector playground button when isRunning is true', () => {
@@ -36,6 +38,8 @@ describe('SpecRunnerHeader', () => {
     })
 
     cy.get('[data-cy="header-selector"]').should('be.disabled')
+
+    cy.percySnapshot()
   })
 
   it('disabled selector playground button when isLoading is true', () => {

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

@@ -2,9 +2,7 @@ import { createEventManager, createTestAutIframe } from '../../../cypress/compon
 import { useSelectorPlaygroundStore } from '../../store/selector-playground-store'
 import SelectorPlayground from './SelectorPlayground.vue'
 
-// TODO: Test is failing due to Percy conflict
-// eslint-disable-next-line
-describe.skip('SelectorPlayground', () => {
+describe('SelectorPlayground', () => {
   const mountSelectorPlayground = (
     eventManager = createEventManager(),
     autIframe = createTestAutIframe(),
@@ -20,15 +18,12 @@ describe.skip('SelectorPlayground', () => {
     }
   }
 
-  it('playground', () => {
-    cy.mount(() => (
-      <div class="bg-gray-100 h-100">
-        <SelectorPlayground
-          eventManager={createEventManager()}
-          getAutIframe={() => createTestAutIframe()}
-        />
-      </div>
-    ))
+  it('populates cy.get by default with a selector of body', () => {
+    const { autIframe } = mountSelectorPlayground()
+
+    cy.spy(autIframe, 'toggleSelectorHighlight')
+    cy.get('[data-cy="playground-method"]').should('contain', 'cy.get')
+    cy.get('[data-cy="playground-selector"]').should('have.value', 'body')
 
     cy.percySnapshot()
   })
@@ -73,6 +68,8 @@ describe.skip('SelectorPlayground', () => {
 
     mountSelectorPlayground()
     cy.get('[data-cy="playground-num-elements"]').contains('10')
+
+    cy.percySnapshot()
   })
 
   it('focuses and copies selector text', () => {
@@ -80,22 +77,15 @@ describe.skip('SelectorPlayground', () => {
 
     cy.spy(autIframe, 'toggleSelectorHighlight')
 
-    cy.get('[data-cy="playground-selector"]').as('copy').clear().type('.foo-bar')
-    cy.get('@copy').click()
-    cy.get('@copy').should('be.focused')
-  })
-
-  it('copies selector text', { browser: 'electron' }, () => {
-    const { autIframe } = mountSelectorPlayground()
-
-    cy.spy(autIframe, 'toggleSelectorHighlight')
-
     cy.get('[data-cy="playground-selector"]').as('copy').clear().type('.foo-bar')
 
     cy.get('@copy').click()
     cy.get('@copy').should('be.focused')
 
-    cy.get('@writeClipboard').should('have.been.calledWith', '.foo-bar')
+    cy.spy(document, 'execCommand')
+    cy.get('[data-cy="playground-copy"]').click().then(() => {
+      expect(document.execCommand).to.be.calledWith('copy')
+    })
   })
 
   it('prints nothing to console when no selected elements found', () => {

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

@@ -1,11 +1,11 @@
 <template>
   <div
     id="selector-playground"
-    class="flex items-center bg-white"
+    class="bg-white flex items-center"
   >
     <button
       :class="{ 'bg-blue-100': selectorPlaygroundStore.isEnabled }"
-      class="rounded-md px-8px h-full"
+      class="rounded-md h-full px-8px"
       data-cy="playground-toggle"
       @click="toggleEnabled"
     >
@@ -17,7 +17,7 @@
     </button>
 
     <div
-      class="flex flex-1 mx-2 h-full items-center"
+      class="flex h-full flex-1 mx-2 items-center"
       @mouseover="setShowingHighlight"
     >
       <Select
@@ -36,7 +36,7 @@
       <input
         ref="copyText"
         v-model="selector"
-        class="flex-1 rounded-md py-8px border border-gray-500 px-1 pl-4 text-blue-500"
+        class="border rounded-md border-gray-500 flex-1 py-8px px-1 pl-4 text-blue-500"
         data-cy="playground-selector"
       >
       ')
@@ -44,12 +44,12 @@
 
     <div
       data-cy="playground-num-elements"
-      class="rounded-md bg-gray-400 text-white mx-1 px-3 h-full flex items-center"
+      class="rounded-md flex h-full bg-gray-400 mx-1 text-white px-3 items-center"
     >
       {{ selectorPlaygroundStore.numElements }}
     </div>
 
-    <div class="rounded-md border border-1 border-gray-500 flex items-center h-full divide-x-1 divide-gray-500 mr-10px">
+    <div class="border rounded-md flex h-full divide-x-1 divide-gray-500 border-1 border-gray-500 mr-10px items-center">
       <button
         data-cy="playground-copy"
         class="h-full px-8px"
@@ -68,7 +68,7 @@
     </div>
 
     <a
-      class="flex items-center text-blue-500"
+      class="flex text-blue-500 items-center"
       href="https://on.cypress.io/selector-playground"
       target="_blank"
       rel="noreferrer"