test: fix percy flake for 'loading tests' display (#14254)

Co-authored-by: Chris Breiding <chrisbreiding@gmail.com>

packages/reporter/cypress/integration/commands_spec.ts

@@ -48,13 +48,6 @@ describe('commands', () => {
   it('displays all the commands', () => {
     cy.get('.command').should('have.length', 9)
 
-    // ensure progress bar is no longer visible
-    // for snapshot
-    cy.contains('#in-progress')
-    .closest('.command')
-    .find('.command-progress span')
-    .should('not.be.visible')
-
     cy.percySnapshot()
   })
 

packages/reporter/cypress/integration/runnables_spec.ts

@@ -44,6 +44,8 @@ describe('runnables', () => {
   it('displays loader when runnables have not yet loaded', () => {
     render()
     cy.contains('Your tests are loading...').should('be.visible')
+    // ensure the page is loaded before taking snapshot
+    cy.get('.focus-tests-text').should('be.visible')
     cy.percySnapshot()
   })
 

packages/reporter/cypress/support/index.ts

@@ -1,4 +1,8 @@
 // @ts-ignore
 import installCustomPercyCommand from '@packages/ui-components/cypress/support/customPercyCommand'
 
-installCustomPercyCommand()
+installCustomPercyCommand({
+  elementOverrides: {
+    '.command-progress': true,
+  },
+})

packages/runner/cypress/integration/retries.ui.spec.js

@@ -283,8 +283,8 @@ describe('runner/cypress retries.ui.spec', { viewportWidth: 600, viewportHeight:
       } }, { config: { retries: 1 } })
       .then(shouldHaveTestResults(0, 1, 0))
 
+      // ensure the page is loaded before taking snapshot
       cy.contains('skips this')
-
       cy.percySnapshot()
     })
   })