chore: remove more low value percy snapshots

packages/app/src/navigation/SidebarNavigation.cy.tsx

@@ -102,10 +102,21 @@ describe('SidebarNavigation', () => {
     cy.contains('.v-popper--some-open--tooltip', 'test-project').should('be.visible')
     cy.findByTestId('sidebar-header').trigger('mouseout')
 
+    cy.findByTestId('sidebar-link-specs-page').trigger('mouseenter')
+    cy.contains('.v-popper--some-open--tooltip', 'Specs').should('be.visible')
+    cy.findByTestId('sidebar-link-specs-page').trigger('mouseout')
+
     cy.findByTestId('sidebar-link-runs-page').trigger('mouseenter')
     cy.contains('.v-popper--some-open--tooltip', 'Runs').should('be.visible')
     cy.findByTestId('sidebar-link-runs-page').trigger('mouseout')
-    cy.percySnapshot()
+
+    cy.findByTestId('sidebar-link-debug-page').trigger('mouseenter')
+    cy.contains('.v-popper--some-open--tooltip', 'Debug').should('be.visible')
+    cy.findByTestId('sidebar-link-debug-page').trigger('mouseout')
+
+    cy.findByTestId('sidebar-link-settings-page').trigger('mouseenter')
+    cy.contains('.v-popper--some-open--tooltip', 'Settings').should('be.visible')
+    cy.findByTestId('sidebar-link-settings-page').trigger('mouseout')
   })
 
   it('opens a modal to switch testing type', { viewportWidth: 1280 }, () => {

packages/app/src/runner/SnapshotControls.cy.tsx

@@ -11,10 +11,6 @@ const snapshotControlsSelector = '[data-testid=snapshot-controls]'
 const unpinButtonSelector = '[data-testid=unpin]'
 
 describe('SnapshotControls', { viewportHeight: 200, viewportWidth: 500 }, () => {
-  afterEach(() => {
-    cy.wait(100).percySnapshot()
-  })
-
   const mountSnapshotControls = (
     eventManager = createEventManager(),
     autIframe = createTestAutIframe(),

packages/app/src/runner/SpecRunnerHeaderOpenMode.cy.tsx

@@ -20,15 +20,18 @@ function renderWithGql (gqlVal: SpecRunnerHeaderFragment) {
 describe('SpecRunnerHeaderOpenMode', { viewportHeight: 500 }, () => {
   it('renders', () => {
     const autStore = useAutStore()
+    const autUrl = 'http://localhost:4000'
 
-    autStore.updateUrl('http://localhost:4000')
+    autStore.updateUrl(autUrl)
     cy.mountFragment(SpecRunnerHeaderFragmentDoc, {
       render: (gqlVal) => {
         return renderWithGql(gqlVal)
       },
     })
 
-    cy.percySnapshot()
+    cy.findByTestId('aut-url-input').should('be.visible').should('have.value', autUrl)
+    cy.findByTestId('select-browser').should('be.visible').contains('Electron 73')
+    cy.findByTestId('viewport').should('be.visible').contains('500x500')
   })
 
   it('disabled selector playground button when isRunning is true', () => {
@@ -43,7 +46,9 @@ describe('SpecRunnerHeaderOpenMode', { viewportHeight: 500 }, () => {
     })
 
     cy.get('[data-cy="playground-activator"]').should('be.disabled')
-    cy.percySnapshot()
+    cy.findByTestId('aut-url-input').should('be.visible')
+    cy.findByTestId('select-browser').should('be.visible').contains('Electron 73')
+    cy.findByTestId('viewport').should('be.visible').contains('500x500')
   })
 
   it('disabled selector playground button when isLoading is true', () => {
@@ -58,7 +63,9 @@ describe('SpecRunnerHeaderOpenMode', { viewportHeight: 500 }, () => {
     })
 
     cy.get('[data-cy="playground-activator"]').should('be.disabled')
-    cy.percySnapshot()
+    cy.findByTestId('aut-url-input').should('be.visible')
+    cy.findByTestId('select-browser').should('be.visible').contains('Electron 73')
+    cy.findByTestId('viewport').should('be.visible').contains('500x500')
   })
 
   it('enables selector playground button by default', () => {
@@ -69,13 +76,16 @@ describe('SpecRunnerHeaderOpenMode', { viewportHeight: 500 }, () => {
     })
 
     cy.get('[data-cy="playground-activator"]').should('not.be.disabled')
-    cy.percySnapshot()
+    cy.findByTestId('aut-url-input').should('be.visible')
+    cy.findByTestId('select-browser').should('be.visible').contains('Electron 73')
+    cy.findByTestId('viewport').should('be.visible').contains('500x500')
   })
 
   it('shows url section if currentTestingType is e2e', () => {
     const autStore = useAutStore()
+    const autUrl = 'http://localhost:3000'
 
-    autStore.updateUrl('http://localhost:3000')
+    autStore.updateUrl(autUrl)
 
     cy.mountFragment(SpecRunnerHeaderFragmentDoc, {
       onResult: (gql) => {
@@ -87,15 +97,18 @@ describe('SpecRunnerHeaderOpenMode', { viewportHeight: 500 }, () => {
     })
 
     cy.get('[data-cy="aut-url"]').should('exist')
-    cy.percySnapshot()
+    cy.findByTestId('aut-url-input').should('be.visible').should('have.value', autUrl)
+    cy.findByTestId('select-browser').should('be.visible').contains('Electron 73')
+    cy.findByTestId('viewport').should('be.visible').contains('500x500')
   })
 
   it('url section handles long url/small viewport', {
     viewportWidth: 500,
   }, () => {
     const autStore = useAutStore()
+    const autUrl = 'http://localhost:3000/pretty/long/url.spec.jsx'
 
-    autStore.updateUrl('http://localhost:3000/pretty/long/url.spec.jsx')
+    autStore.updateUrl(autUrl)
 
     cy.mountFragment(SpecRunnerHeaderFragmentDoc, {
       onResult: (gql) => {
@@ -107,14 +120,17 @@ describe('SpecRunnerHeaderOpenMode', { viewportHeight: 500 }, () => {
     })
 
     cy.get('[data-cy="aut-url"]').should('exist')
+    cy.findByTestId('aut-url-input').should('be.visible').should('have.value', autUrl)
+    cy.findByTestId('select-browser').should('be.visible').contains('Electron 73')
+    cy.findByTestId('viewport').should('be.visible').contains('500x500')
     cy.percySnapshot()
   })
 
   it('links to aut url', () => {
     const autStore = useAutStore()
-    const url = 'http://localhost:3000/todo'
+    const autUrl = 'http://localhost:3000/todo'
 
-    autStore.updateUrl(url)
+    autStore.updateUrl(autUrl)
 
     cy.mountFragment(SpecRunnerHeaderFragmentDoc, {
       onResult: (gql) => {
@@ -125,8 +141,9 @@ describe('SpecRunnerHeaderOpenMode', { viewportHeight: 500 }, () => {
       },
     })
 
-    cy.findByTestId('aut-url-input').invoke('val').should('contain', url)
-    cy.percySnapshot()
+    cy.findByTestId('aut-url-input').invoke('val').should('contain', autUrl)
+    cy.findByTestId('select-browser').should('be.visible').contains('Electron 73')
+    cy.findByTestId('viewport').should('be.visible').contains('500x500')
   })
 
   it('does not show url section if currentTestingType is component', () => {
@@ -143,9 +160,10 @@ describe('SpecRunnerHeaderOpenMode', { viewportHeight: 500 }, () => {
       },
     })
 
-    cy.get('[data-cy="playground-activator"]').should('be.visible')
-    cy.get('[data-cy="aut-url"]').should('not.exist')
-    cy.percySnapshot()
+    cy.findByTestId('playground-activator').should('be.visible')
+    cy.findByTestId('aut-url').should('not.exist')
+    cy.findByTestId('select-browser').should('be.visible').contains('Electron 73')
+    cy.findByTestId('viewport').should('be.visible').contains('500x500')
   })
 
   it('shows current browser and possible browsers', () => {
@@ -222,10 +240,11 @@ describe('SpecRunnerHeaderOpenMode', { viewportHeight: 500 }, () => {
     .should('be.visible')
     .should('have.attr', 'href', 'https://on.cypress.io/viewport')
 
+    cy.contains('The viewport determines the width and height of your application under test. By default the viewport will be 500px by 500px for end-to-end testing.')
     cy.contains('Additionally, you can override this value in your cypress.config.ts or via the cy.viewport() command.')
     .should('be.visible')
 
-    cy.percySnapshot()
+    cy.findByTestId('viewport-docs').should('have.attr', 'href', 'https://on.cypress.io/viewport')
   })
 
   it('disables browser dropdown button when isRunning is true', () => {
@@ -242,8 +261,10 @@ describe('SpecRunnerHeaderOpenMode', { viewportHeight: 500 }, () => {
       },
     })
 
+    cy.findByTestId('select-browser').should('be.visible').contains('Chrome 78')
     cy.get('[data-cy="select-browser"] > button').should('be.disabled')
-    cy.percySnapshot()
+    cy.findByTestId('aut-url').should('be.visible')
+    cy.findByTestId('viewport').should('be.visible').contains('500x500')
   })
 
   it('opens and closes selector playground', () => {
@@ -253,12 +274,10 @@ describe('SpecRunnerHeaderOpenMode', { viewportHeight: 500 }, () => {
       },
     })
 
-    cy.get('[data-cy="playground-activator"]').click()
+    cy.findByTestId('playground-activator').click()
     cy.get('#selector-playground').should('be.visible')
 
-    cy.percySnapshot()
-
-    cy.get('[data-cy="playground-activator"]').click()
+    cy.findByTestId('playground-activator').click()
     cy.get('#selector-playground').should('not.exist')
   })
 })

packages/app/src/runs/RunResults.cy.tsx

@@ -17,8 +17,6 @@ describe('<RunResults />', { viewportHeight: 150, viewportWidth: 250 }, () => {
         cy.get(`[title=${defaultMessages.runs.results.pending}]`).should('contain.text', cloudRun.totalPending)
       })
     })
-
-    cy.percySnapshot()
   })
 
   it('renders flaky ribbon', () => {
@@ -32,7 +30,5 @@ describe('<RunResults />', { viewportHeight: 150, viewportWidth: 250 }, () => {
     })
 
     cy.contains('4 Flaky')
-
-    cy.percySnapshot()
   })
 })

packages/app/src/settings/device/ProxySettings.cy.tsx

@@ -15,13 +15,13 @@ describe('<ProxySettings />', {
       render: (gql) => <div class="p-[24px]"><ProxySettings gql={gql} /></div>,
     })
 
+    cy.contains('h2', 'Proxy settings')
+    cy.contains('p', 'Cypress auto-detected the following proxy settings from your operating system.')
     cy.findByText('Proxy bypass list')
     .get('[data-testid=bypass-list]').should('have.text', 'proxy-bypass')
 
     cy.findByText('Proxy server')
     .get('[data-testid=proxy-server]').should('have.text', 'proxy-server')
-
-    cy.percySnapshot()
   })
 
   it('renders the title and description', () => {

packages/app/src/specs/SpecHeaderCloudDataTooltip.cy.tsx

@@ -168,9 +168,7 @@ describe('<SpecHeaderCloudDataTooltip />', () => {
           .should('be.visible')
           .and('contain', get(defaultMessages, msgKeys.noAccess).replace('{0}', get(defaultMessages, msgKeys.docs)))
 
-          cy.contains('button', defaultMessages.specPage.requestSentButton).should('be.visible')
-
-          cy.percySnapshot()
+          cy.contains('button', defaultMessages.specPage.requestSentButton).should('be.visible').should('be.disabled')
         })
       })
 

packages/frontend-shared/src/components/NoInternetConnection.cy.tsx

@@ -16,7 +16,5 @@ describe('<NoInternetConnection />', () => {
     cy.log('Mount with slot content')
     cy.mount(() => <NoInternetConnection> Extra Text </NoInternetConnection>)
     cy.contains('Extra Text').should('be.visible')
-
-    cy.percySnapshot()
   })
 })

packages/frontend-shared/src/components/ShikiHighlight.cy.tsx

@@ -42,7 +42,6 @@ describe('<ShikiHighlight/>', { viewportWidth: 800, viewportHeight: 500 }, () =>
     </div>))
 
     cy.contains(devServerCode).should('be.visible')
-    cy.percySnapshot()
   })
 
   it('trims whitespace to show the correct number of lines', { viewportWidth: 500, viewportHeight: 500 }, () => {
@@ -83,6 +82,7 @@ describe('<ShikiHighlight/>', { viewportWidth: 800, viewportHeight: 500 }, () =>
   it('render the code without arguments', () => {
     cy.mount(() => <div class="p-12"><ShikiHighlight code={code} lang="ts" /></div>)
     cy.get('.shiki').should('be.visible')
+    cy.contains(code)
     cy.percySnapshot()
   })
 
@@ -95,12 +95,14 @@ describe('<ShikiHighlight/>', { viewportWidth: 800, viewportHeight: 500 }, () =>
   it('show line numbers when the prop is passed', () => {
     cy.mount(() => <div class="p-12"><ShikiHighlight code={code} lang="ts" lineNumbers /></div>)
     cy.get('.shiki').should('be.visible')
+    cy.contains(code)
     cy.percySnapshot()
   })
 
   it('show line numbers with initial line when the prop is passed', () => {
     cy.mount(() => <div class="p-12"><ShikiHighlight code={code} lang="ts" lineNumbers initialLine={10} /></div>)
     cy.get('.shiki').should('be.visible')
+    cy.contains(code)
     cy.percySnapshot()
   })
 
@@ -113,7 +115,7 @@ describe('<ShikiHighlight/>', { viewportWidth: 800, viewportHeight: 500 }, () =>
     it('should render when specified "true"', () => {
       cy.mount(() => <div class="p-12"><ShikiHighlight code={code} lang="ts" copyButton={true} /></div>)
       cy.get('button').should('be.visible')
-      cy.percySnapshot()
+      cy.contains(code)
     })
 
     it('should remain visible when content becomes scrollable', () => {
@@ -133,6 +135,7 @@ describe('<ShikiHighlight/>', { viewportWidth: 800, viewportHeight: 500 }, () =>
       .validateWithinViewport()
 
       cy.percySnapshot('copy button remains within viewport on scroll up')
+      cy.contains(code)
     })
   })
 })

packages/frontend-shared/src/components/StandardModal.cy.tsx

@@ -57,8 +57,6 @@ describe('<StandardModal />', { viewportWidth: 800, viewportHeight: 400 }, () =>
 
       cy.contains('h2', title).should('be.visible')
       cy.contains(body).should('be.visible')
-
-      cy.percySnapshot()
     })
 
     it('bare variant renders without padding in body', () => {
@@ -89,7 +87,8 @@ describe('<StandardModal />', { viewportWidth: 800, viewportHeight: 400 }, () =>
       .closest(`[data-cy=standard-modal].${testClass}`)
       .should('exist')
 
-      cy.percySnapshot()
+      cy.findByTestId('external').should('be.visible').should('have.attr', 'href', 'https://on.cypress.io')
+      cy.findByLabelText('Close').should('be.visible')
     })
 
     it('automatically closes tooltips on open', () => {
@@ -124,8 +123,6 @@ describe('<StandardModal />', { viewportWidth: 800, viewportHeight: 400 }, () =>
       // Verify tooltip is no longer open once modal was opened
       cy.findByTestId('tooltip-content')
       .should('not.exist')
-
-      cy.percySnapshot()
     })
   })
 

packages/frontend-shared/src/gql-components/StatusBadge.cy.tsx

@@ -27,9 +27,7 @@ describe('<StatusBadge />', () => {
     ))
 
     cy.findByText('not configured').should('be.visible')
-    cy.percySnapshot()
     cy.findByText('toggle').click()
     cy.findByText('configured').should('be.visible')
-    cy.percySnapshot()
   })
 })