chore: compare cy.screenshot images in percy

circle.yml

@@ -526,6 +526,16 @@ commands:
             PERCY_ENABLE=${PERCY_TOKEN:-0} \
             PERCY_PARALLEL_TOTAL=-1 \
             $cmd yarn workspace @packages/<<parameters.package>> cypress:run:<<parameters.type>> --browser <<parameters.browser>> --record --parallel --group <<parameters.package>>-<<parameters.type>>
+      - run:
+          command: |
+            if [[ <<parameters.package>> == 'app' && <<parameters.percy>> == 'true' && -d "packages/app/cypress/screenshots/runner/screenshot/screenshot.cy.tsx/percy" ]]; then
+              PERCY_PARALLEL_NONCE=$CIRCLE_SHA1 \
+              PERCY_ENABLE=${PERCY_TOKEN:-0} \
+              PERCY_PARALLEL_TOTAL=-1 \
+              yarn percy upload packages/app/cypress/screenshots/runner/screenshot/screenshot.cy.tsx/percy
+            else
+              echo "skipping percy screenshots uploading"
+            fi
       - store_test_results:
           path: /tmp/cypress
       - store_artifacts:

packages/app/src/pages/Specs/Runner.vue

@@ -147,6 +147,24 @@ iframe.aut-iframe {
   background: white;
 }
 
+.is-screenshotting #main-pane {
+  overflow: auto !important;
+}
+
+.is-screenshotting.screenshot-scrolling #main-pane {
+  overflow: visible !important;
+}
+
+#resizable-panels-root {
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.is-screenshotting #resizable-panels-root {
+  overflow-x: visible;
+  overflow-y: visible;
+}
+
 iframe.spec-iframe {
     border: none;
     height: 0;

packages/app/src/runner/ResizablePanels.vue

@@ -1,9 +1,10 @@
 <template>
   <div
-    class="flex overflow-y-hidden"
+    id="resizable-panels-root"
+    class="flex"
     :class="{
       'select-none': panel1IsDragging || panel2IsDragging,
-      'overflow-x-auto': !isFirefox
+      'overflow-x-hidden': isFirefox
     }"
     @mouseup="handleMouseup"
     @mousemove="handleMousemove"
@@ -209,4 +210,5 @@ watchEffect(() => {
 
 // TODO: UNIFY-1704 - avoid special case for FF
 const isFirefox = window.__CYPRESS_BROWSER__?.family === 'firefox'
+
 </script>

packages/app/src/runner/SpecRunnerOpenMode.vue

@@ -13,7 +13,7 @@
     />
     <ResizablePanels
       v-else
-      :style="{width: `calc(100vw - ${collapsedNavBarWidth}px)`}"
+      :style="{width: `calc(100vw - ${screenshotStore.isScreenshotting ? 0 : collapsedNavBarWidth}px)`}"
       :offset-left="collapsedNavBarWidth"
       :max-total-width="windowWidth - collapsedNavBarWidth"
       :initial-panel1-width="specsListWidthPreferences"

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

@@ -37,6 +37,16 @@ const Layout: FunctionalComponent = () => {
 
 const captureTypes = ['fullPage', 'viewport', 'runner'] as const
 
+function removeGlobalStyles () {
+  cy.get('style').each((item) => {
+    if (item[0].dataset.cy !== 'injected-style-tag') {
+      item.remove()
+    }
+  })
+
+  return cy.get('style').should('have.length', 1)
+}
+
 describe('screenshot', () => {
   captureTypes.forEach((capture) => {
     it(`takes a standard screenshot with viewport: ${capture}`, () => {
@@ -45,7 +55,9 @@ describe('screenshot', () => {
         styles,
       })
 
-      cy.screenshot(`percy/component_testing_takes_a_screenshot_viewport_${capture}`, { capture })
+      removeGlobalStyles().then(() => {
+        cy.screenshot(`percy/component_testing_takes_a_screenshot_viewport_${capture}`, { capture })
+      })
     })
   })
 
@@ -55,7 +67,9 @@ describe('screenshot', () => {
       styles,
     })
 
-    cy.screenshot('percy/component_testing_screenshot_custom_viewport_screenshot')
+    removeGlobalStyles().then(() => {
+      cy.screenshot('percy/component_testing_screenshot_custom_viewport_screenshot')
+    })
   })
 
   it('screenshot with a really long viewport', () => {
@@ -64,7 +78,9 @@ describe('screenshot', () => {
       styles,
     })
 
-    cy.screenshot('percy/component_testing_screenshot_long_viewport')
+    removeGlobalStyles().then(() => {
+      cy.screenshot('percy/component_testing_screenshot_long_viewport')
+    })
   })
 
   const style = `
@@ -134,8 +150,11 @@ describe('screenshot', () => {
       }
 
       mount(() => <Comp />, { style }).then(() => {
-        cy.screenshot(`percy/large_component_hardcoded_size_viewport_${viewport[0]}_${viewport[1]}`, { capture: 'viewport' })
-        cy.screenshot(`percy/large_component_hardcoded_size_fullPage_${viewport[0]}_${viewport[1]}`, { capture: 'fullPage' })
+        removeGlobalStyles().then(() => {
+          cy.pause()
+          cy.screenshot(`percy/large_component_hardcoded_size_viewport_${viewport[0]}_${viewport[1]}`, { capture: 'viewport' })
+          cy.screenshot(`percy/large_component_hardcoded_size_fullPage_${viewport[0]}_${viewport[1]}`, { capture: 'fullPage' })
+        })
       })
     })
   })

packages/app/src/specs/InlineSpecListTree.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-bind="containerProps"
-    class="pt-8px specs-list-container overflow-y-auto overflow-x-hidden"
+    class="pt-8px specs-list-container overflow-hidden"
   >
     <ul
       v-bind="wrapperProps"
@@ -157,7 +157,7 @@ a::before {
 }
 
 /** h-[calc] was getting dropped so moved to styles. Virtual list requires defined height. */
-/** Header is 64px, padding-bottom is 8px **/
+/** Header is 64px, padding-top is 8px **/
 .specs-list-container {
   height: calc(100vh - 64px - 8px);
 }

packages/driver/src/cy/commands/screenshot.ts

@@ -98,6 +98,10 @@ const scrollOverrides = (win, doc) => {
   // hide scrollbars
   doc.documentElement.style.overflow = 'hidden'
 
+  // this body class is used to set some other overflow-related CSS
+  // around the resizable panels in the Runner
+  document.querySelector('body')?.classList.add('screenshot-scrolling')
+
   // in the case that an element might change size on scroll
   // we trigger a scroll event to ensure that all elements are
   // at their final size before we calculate the total height
@@ -112,6 +116,8 @@ const scrollOverrides = (win, doc) => {
       doc.body.style.overflowY = originalBodyOverflowY
     }
 
+    document.querySelector('body')?.classList.remove('screenshot-scrolling')
+
     return win.scrollTo(originalX, originalY)
   }
 }