diff --git a/platform/viewer/cypress/integration/common/OHIFStandaloneViewer.spec.js b/platform/viewer/cypress/integration/common/OHIFStandaloneViewer.spec.js index 5d5f7671f..44964f08c 100644 --- a/platform/viewer/cypress/integration/common/OHIFStandaloneViewer.spec.js +++ b/platform/viewer/cypress/integration/common/OHIFStandaloneViewer.spec.js @@ -5,7 +5,7 @@ describe('OHIFStandaloneViewer', () => { it('loads route with at least 2 rows', () => { cy.screenshot(); - cy.percySnapshot(); + cy.percyCanvasSnapshot('Study List'); cy.get('#studyListData tr') .its('length') diff --git a/platform/viewer/cypress/integration/common/OHIFStudyViewer.spec.js b/platform/viewer/cypress/integration/common/OHIFStudyViewer.spec.js index a308f5966..7cf18806a 100644 --- a/platform/viewer/cypress/integration/common/OHIFStudyViewer.spec.js +++ b/platform/viewer/cypress/integration/common/OHIFStudyViewer.spec.js @@ -12,7 +12,7 @@ describe('OHIF Study Viewer Page', () => { it('checks if series thumbnails are being displayed', () => { cy.screenshot(); - cy.percySnapshot(); + cy.percyCanvasSnapshot('Series Thumbnails'); cy.get('[data-cy="thumbnail-list"]') .its('length') diff --git a/platform/viewer/cypress/integration/pwa/OHIFExtensionMicroscopy.spec.js b/platform/viewer/cypress/integration/pwa/OHIFExtensionMicroscopy.spec.js index a8059018a..0b6a8161d 100644 --- a/platform/viewer/cypress/integration/pwa/OHIFExtensionMicroscopy.spec.js +++ b/platform/viewer/cypress/integration/pwa/OHIFExtensionMicroscopy.spec.js @@ -22,6 +22,6 @@ describe('OHIF Microscopy Extension', () => { cy.wait(3000); //Waiting for image to render before taking the snapshot cy.screenshot(); - cy.percySnapshot(); + cy.percyCanvasSnapshot('Microscopy Extension'); }); }); diff --git a/platform/viewer/cypress/integration/pwa/OHIFExtensionPDF.spec.js b/platform/viewer/cypress/integration/pwa/OHIFExtensionPDF.spec.js index 7b8c1b33a..2cc95f430 100644 --- a/platform/viewer/cypress/integration/pwa/OHIFExtensionPDF.spec.js +++ b/platform/viewer/cypress/integration/pwa/OHIFExtensionPDF.spec.js @@ -21,6 +21,6 @@ describe('OHIF PDF Extension', () => { .should('be.eq', 1); cy.screenshot(); - cy.percySnapshot(); + cy.percyCanvasSnapshot('PDF Extension'); }); }); diff --git a/platform/viewer/cypress/integration/pwa/OHIFExtensionVTK.spec.js b/platform/viewer/cypress/integration/pwa/OHIFExtensionVTK.spec.js index 2f2fc362f..7ee637f3b 100644 --- a/platform/viewer/cypress/integration/pwa/OHIFExtensionVTK.spec.js +++ b/platform/viewer/cypress/integration/pwa/OHIFExtensionVTK.spec.js @@ -29,7 +29,7 @@ describe('OHIF VTK Extension', () => { it('checks if VTK buttons are displayed on the toolbar', () => { cy.screenshot(); - cy.percySnapshot(); + cy.percyCanvasSnapshot('VTK Extension'); cy.get('@crosshairsBtn') .should('be.visible') diff --git a/platform/viewer/cypress/support/commands.js b/platform/viewer/cypress/support/commands.js index 3138f36f4..4b4ec461e 100644 --- a/platform/viewer/cypress/support/commands.js +++ b/platform/viewer/cypress/support/commands.js @@ -306,3 +306,32 @@ Cypress.Commands.add('isInViewport', element => { } }); }); + +/** + * Percy.io Canvas screenshot workaround + * + */ +Cypress.Commands.add('percyCanvasSnapshot', (name, options = {}) => { + function convertCanvas(document) { + document + .querySelectorAll('canvas') + .forEach(selector => canvasToImage(selector)); + } + + function canvasToImage(selectorOrEl) { + let canvas = + typeof selectorOrEl === 'object' + ? selectorOrEl + : document.querySelector(selectorOrEl); + let image = document.createElement('img'); + let canvasImageBase64 = canvas.toDataURL(); + + image.src = canvasImageBase64; + image.style = 'max-width: 100%'; + canvas.setAttribute('data-percy-modified', true); + canvas.parentElement.appendChild(image); + canvas.style = 'display: none'; + } + + cy.percySnapshot(name, { ...options, domTransformation: convertCanvas }); +});