From 6596cc378880ca240e2e44146b95b12d84516b75 Mon Sep 17 00:00:00 2001 From: Henric Trotzig Date: Tue, 23 Apr 2024 10:58:09 +0200 Subject: [PATCH 1/2] Allow logs to be hidden To help clean up the Cypress command log, we can allow people to pass in `log: false` when calling Happo commands. I've cleaned up some options usage so that we consume the known options to us and then pass along all others to cy.task. This will allow people to also use `timeout` and potential future options as well. https://docs.cypress.io/api/commands/task#Arguments Fixes https://github.com/happo/happo-cypress/issues/111 --- cypress/integration/home_page_spec.js | 86 +++++++++++++++++---------- index.js | 55 ++++++++++------- 2 files changed, 89 insertions(+), 52 deletions(-) diff --git a/cypress/integration/home_page_spec.js b/cypress/integration/home_page_spec.js index 34de049..27ab4bd 100644 --- a/cypress/integration/home_page_spec.js +++ b/cypress/integration/home_page_spec.js @@ -1,14 +1,17 @@ describe('The Home Page', () => { it('successfully loads', () => { - cy.visit('/'); - cy.wait(100); - cy.scrollTo('bottom', { duration: 100 }); - cy.scrollTo('top'); + cy.visit('/', { log: false }); + cy.wait(100, { log: false }); + cy.scrollTo('bottom', { duration: 100, log: false }); + cy.scrollTo('top', { log: false }); - cy.happoHideDynamicElements({ selectors: ['.hide-me'] }); + cy.happoHideDynamicElements({ selectors: ['.hide-me'], log: false }); - cy.get('body').happoScreenshot({ component: 'Full-page' }); - cy.get('body').happoScreenshot({ + cy.get('body', { log: false }).happoScreenshot({ + component: 'Full-page', + log: false, + }); + cy.get('body', { log: false }).happoScreenshot({ component: 'Full-page', variant: 'replaced-card', transformDOM: { @@ -19,8 +22,9 @@ describe('The Home Page', () => { return div; }, }, + log: false, }); - cy.get('body').happoScreenshot({ + cy.get('body', { log: false }).happoScreenshot({ component: 'Full-page', variant: 'replaced-images', transformDOM: { @@ -31,72 +35,94 @@ describe('The Home Page', () => { return div; }, }, + log: false, }); - cy.get('.card').happoScreenshot({ component: 'Card' }); - cy.get('.card,.button').happoScreenshot({ + cy.get('.card', { log: false }).happoScreenshot({ + component: 'Card', + log: false, + }); + cy.get('.card,.button', { log: false }).happoScreenshot({ includeAllElements: true, component: 'Card + Button', + log: false, }); - cy.happoHideDynamicElements({ selectors: ['.hide-me'] }); - cy.get('.dynamic-text').happoScreenshot({ + cy.happoHideDynamicElements({ selectors: ['.hide-me'], log: false }); + cy.get('.dynamic-text', { log: false }).happoScreenshot({ component: 'Dynamic text', + log: false, }); - cy.happoHideDynamicElements({ replace: true }); - cy.get('.dynamic-text').happoScreenshot({ + cy.happoHideDynamicElements({ replace: true, log: false }); + cy.get('.dynamic-text', { log: false }).happoScreenshot({ component: 'Dynamic text', variant: 'replaced', + log: false, }); - cy.get('.scrollcontainer') - .scrollTo('center') - .happoScreenshot({ component: 'Scrollcontainer', variant: 'center' }); + cy.get('.scrollcontainer', { log: false }) + .scrollTo('center', { log: false }) + .happoScreenshot({ + component: 'Scrollcontainer', + variant: 'center', + log: false, + }); - cy.visit('/'); - cy.happoHideDynamicElements({ replace: true, selectors: ['.hide-me'] }); - cy.wait(100); - cy.get('.button').happoScreenshot({ + cy.visit('/', { log: false }); + cy.happoHideDynamicElements({ + replace: true, + selectors: ['.hide-me'], + log: false, + }); + cy.wait(100, { log: false }); + cy.get('.button', { log: false }).happoScreenshot({ component: 'Button', variant: 'default', targets: [ 'chromeSmall', { name: 'firefoxSmall', browser: 'firefox', viewport: '400x800' }, ], + log: false, }); - cy.get('.card').happoScreenshot({ + cy.get('.card', { log: false }).happoScreenshot({ component: 'Card', variant: 'firefox-only', targets: [ { name: 'firefoxSmall', browser: 'firefox', viewport: '400x800' }, ], + log: false, }); - cy.get('.images').happoScreenshot({ + cy.get('.images', { log: false }).happoScreenshot({ component: 'Images', variant: 'multiple', + log: false, }); - cy.get('.button').happoScreenshot(); - cy.get('.button').happoScreenshot(); - cy.get('.button').happoScreenshot(); + cy.get('.button', { log: false }).happoScreenshot({ log: false }); + cy.get('.button', { log: false }).happoScreenshot({ log: false }); + cy.get('.button', { log: false }).happoScreenshot(); - cy.get('[data-test="untainted-canvas"]').happoScreenshot({ + cy.get('[data-test="untainted-canvas"]', { log: false }).happoScreenshot({ component: 'Canvas', variant: 'untainted', + log: false, }); - cy.get('.responsive-canvas-wrapper').happoScreenshot({ + cy.get('.responsive-canvas-wrapper', { log: false }).happoScreenshot({ component: 'Canvas', variant: 'wrapped, responsive', responsiveInlinedCanvases: true, + log: false, }); - cy.get('[data-test="tainted-canvas"]').happoScreenshot({ + cy.get('[data-test="tainted-canvas"]', { log: false }).happoScreenshot({ component: 'Canvas', variant: 'tainted', + log: false, }); - cy.get('[data-test="empty-canvas"]').happoScreenshot({ + cy.get('[data-test="empty-canvas"]', { log: false }).happoScreenshot({ component: 'Canvas', variant: 'empty', + log: false, }); }); }); diff --git a/index.js b/index.js index 7a3477c..2a4c7af 100644 --- a/index.js +++ b/index.js @@ -21,13 +21,13 @@ function resolveTargetName() { return `${Cypress.browser.name}-${viewportWidth}x${viewportHeight}`; } -function takeLocalSnapshot({ originalSubject, component, variant, options }) { +function takeLocalSnapshot({ originalSubject, component, variant, targets, options }) { const imageId = `${Math.random()}`.slice(2); cy.task('happoRegisterLocalSnapshot', { imageId, component, variant, - targets: options.targets, + targets, target: resolveTargetName(), }); cy.wrap(originalSubject, { log: false }).first().screenshot(imageId, options); @@ -37,32 +37,38 @@ Cypress.Commands.add( 'happoScreenshot', { prevSubject: true }, (originalSubject, options = {}) => { - const component = options.component || cy.state('runnable').fullTitle(); - const variant = options.variant || 'default'; + const { + component = cy.state('runnable').fullTitle(), + variant = 'default', + responsiveInlinedCanvases, + includeAllElements, + transformDOM, + targets, + ...otherOptions + } = options; if (config.localSnapshots) { return takeLocalSnapshot({ originalSubject, component, variant, - options, + targets, + options: otherOptions, }); } const doc = originalSubject[0].ownerDocument; - const responsiveInlinedCanvases = - typeof options.responsiveInlinedCanvases === 'boolean' - ? options.responsiveInlinedCanvases + const resInCan = + typeof responsiveInlinedCanvases === 'boolean' + ? responsiveInlinedCanvases : config.responsiveInlinedCanvases; const domSnapshot = takeDOMSnapshot({ doc, - element: options.includeAllElements - ? originalSubject - : originalSubject[0], - responsiveInlinedCanvases, - transformDOM: options.transformDOM, + element: includeAllElements ? originalSubject : originalSubject[0], + responsiveInlinedCanvases: resInCan, + transformDOM: transformDOM, handleBase64Image: ({ src, base64Url }) => { const rawBase64 = base64Url.replace(/^data:image\/png;base64,/, ''); const chunks = chunked(rawBase64, config.canvasChunkSize); @@ -75,18 +81,22 @@ Cypress.Commands.add( src, isFirst, isLast, - }); + }, otherOptions); } }, }); - cy.task('happoRegisterSnapshot', { - timestamp: Date.now(), - component, - variant, - targets: options.targets, - ...domSnapshot, - }); + cy.task( + 'happoRegisterSnapshot', + { + timestamp: Date.now(), + component, + variant, + targets, + ...domSnapshot, + }, + otherOptions, + ); }, ); @@ -101,10 +111,11 @@ Cypress.Commands.add('happoHideDynamicElements', (options = {}) => { defaultSelectors = ['time'], selectors = [], replace = false, + ...otherOptions } = options; const allMatchers = defaultMatchers.concat(matchers); const allSelectors = defaultSelectors.concat(selectors); - cy.document().then(doc => { + cy.document(otherOptions).then(doc => { const elementsToHide = []; doc.body.querySelectorAll('*').forEach(e => { if (e.firstElementChild) { From 364c1c467097de42321d0a11c61204258db7ae14 Mon Sep 17 00:00:00 2001 From: Henric Trotzig Date: Tue, 23 Apr 2024 11:28:43 +0200 Subject: [PATCH 2/2] Update Circle CI docker images I noticed we were running old images here. Updating to prevent some bitrot. I tried updating the Cypress orb as well but ran into issues that I didn't have time to fix now. --- .circleci/config.yml | 22 ++++++++++------------ 1 file changed, 10 insertions(+), 12 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index 6534f3a..5aefee4 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -1,16 +1,14 @@ version: 2.1 orbs: - node: circleci/node@5.0.2 + node: circleci/node@5.2.0 cypress: cypress-io/cypress@2.0.0 executors: - node-16: + node: docker: - - image: 'cypress/base:16.14.2' + - image: 'cypress/base:20.12.2' jobs: build-and-test: - executor: - name: node/default - tag: '16.13.2' + executor: node steps: - checkout - node/install-packages: @@ -24,11 +22,11 @@ workflows: cypress: jobs: - cypress/install: - executor: node-16 + executor: node yarn: true - cypress/run: - executor: node-16 + executor: node name: cypress-download-all requires: - cypress/install @@ -37,7 +35,7 @@ workflows: command-prefix: 'HAPPO_PROJECT=download-all HAPPO_DOWNLOAD_ALL=true yarn happo-e2e -- -- yarn' - cypress/run: - executor: node-16 + executor: node name: cypress-local-snapshots requires: - cypress/install @@ -46,7 +44,7 @@ workflows: command-prefix: 'CYPRESS_HAPPO_USE_LOCAL_SNAPSHOTS=true HAPPO_PROJECT=local-snapshots yarn happo-e2e -- -- yarn' - cypress/run: - executor: node-16 + executor: node name: cypress-allow-failures requires: - cypress/install @@ -55,7 +53,7 @@ workflows: command-prefix: 'CYPRESS_INTRODUCE_FAILING_ASSERTION=true HAPPO_PROJECT=allow-failures yarn happo-e2e -- --allow-failures -- yarn' - cypress/run: - executor: node-16 + executor: node name: cypress-parallel requires: - cypress/install @@ -69,7 +67,7 @@ workflows: - run: 'HAPPO_PROJECT=parallel HAPPO_NONCE=${CIRCLE_WORKFLOW_ID} yarn happo-e2e -- finalize' - cypress/run: - executor: node-16 + executor: node name: cypress-parallel-allow-failures requires: - cypress/install