From d6d92afbdaff215077a87a94891dfe4084cfdc3b Mon Sep 17 00:00:00 2001 From: Mirna Silva Date: Fri, 20 Dec 2019 16:07:00 -0300 Subject: [PATCH] test: Refactoring toolbar data-cy selectors (#1323) --- .../UserPreferencesTabs.js | 2 + platform/ui/src/viewer/ToolbarButton.js | 8 +++- .../common/OHIFCornerstoneToolbar.spec.js | 26 ++++--------- .../integration/pwa/OHIFExtensionVTK.spec.js | 2 +- platform/viewer/cypress/support/aliases.js | 39 ++++++++----------- platform/viewer/cypress/support/commands.js | 22 +++++------ 6 files changed, 44 insertions(+), 55 deletions(-) diff --git a/platform/ui/src/components/userPreferencesForm/UserPreferencesTabs.js b/platform/ui/src/components/userPreferencesForm/UserPreferencesTabs.js index e5d343fd8..47fd764c6 100644 --- a/platform/ui/src/components/userPreferencesForm/UserPreferencesTabs.js +++ b/platform/ui/src/components/userPreferencesForm/UserPreferencesTabs.js @@ -43,6 +43,7 @@ const renderTabsHeader = (tabs, activeTabIndex, onHeaderChanged) => { ? tabs.map((tab, index) => { const { name, hidden = false } = tab; + const cypressSelectorId = name.toLowerCase(); const tabClass = index === activeTabIndex ? 'nav-link active' : 'nav-link'; return !hidden ? ( @@ -52,6 +53,7 @@ const renderTabsHeader = (tabs, activeTabIndex, onHeaderChanged) => { onHeaderChanged(index); }} className={tabClass} + data-cy={cypressSelectorId} > diff --git a/platform/ui/src/viewer/ToolbarButton.js b/platform/ui/src/viewer/ToolbarButton.js index 2959059b3..bebc47850 100644 --- a/platform/ui/src/viewer/ToolbarButton.js +++ b/platform/ui/src/viewer/ToolbarButton.js @@ -23,8 +23,14 @@ export function ToolbarButton(props) { } }; + const cypressSelectorId = props.label.toLowerCase(); + return ( -
+
{iconProps && }
{t(label)} diff --git a/platform/viewer/cypress/integration/common/OHIFCornerstoneToolbar.spec.js b/platform/viewer/cypress/integration/common/OHIFCornerstoneToolbar.spec.js index d4faaccbd..95ffd5d43 100644 --- a/platform/viewer/cypress/integration/common/OHIFCornerstoneToolbar.spec.js +++ b/platform/viewer/cypress/integration/common/OHIFCornerstoneToolbar.spec.js @@ -266,7 +266,7 @@ describe('OHIF Cornerstone Toolbar', () => { let iconName; //Click on one of the secondary tools from the overlay - cy.get('.tooltip-inner > :nth-child(1)') + cy.get('[data-cy="magnify"]') .click() .then($magnifyBtn => { cy.wrap($magnifyBtn) @@ -407,9 +407,7 @@ describe('OHIF Cornerstone Toolbar', () => { .as('toolbarOverlay') .should('be.visible'); //Click on Clear button - cy.get('.tooltip-inner') - .contains('Clear') - .click(); + cy.get('[data-cy="clear"]').click(); //Verify if measurements were removed from the measurements panel cy.get('.measurementItem').should('not.exist'); @@ -446,9 +444,7 @@ describe('OHIF Cornerstone Toolbar', () => { .should('be.visible') .then(() => { //Click Eraser button - cy.get('.tooltip-inner') - .contains('Eraser') - .click({ force: true }); + cy.get('[data-cy="eraser"]').click({ force: true }); }); //Erase measurement #1 and Verify if it was removed from the measurements panel @@ -471,9 +467,7 @@ describe('OHIF Cornerstone Toolbar', () => { cy.get('.tooltip-toolbar-overlay').should('be.visible'); // Click on Invert button - cy.get('.tooltip-inner') - .contains('Invert') - .click(); + cy.get('[data-cy="invert"]').click(); // Visual comparison cy.screenshot('Invert tool - Should Invert Canvas'); @@ -488,9 +482,7 @@ describe('OHIF Cornerstone Toolbar', () => { .should('be.visible') .then(() => { //Click on Rotate button - cy.get('.tooltip-inner') - .contains('Rotate') - .click({ force: true }); + cy.get('[data-cy="rotate right"]').click({ force: true }); }); // Visual comparison @@ -505,9 +497,7 @@ describe('OHIF Cornerstone Toolbar', () => { cy.get('.tooltip-toolbar-overlay').should('be.visible'); //Click on Flip H button - cy.get('.tooltip-inner') - .contains('Flip H') - .click(); + cy.get('[data-cy="flip h"]').click(); // Visual comparison cy.screenshot('Flip H tool - Should Flip Image on Y axis'); @@ -521,9 +511,7 @@ describe('OHIF Cornerstone Toolbar', () => { cy.get('.tooltip-toolbar-overlay').should('be.visible'); //Click on Flip V button - cy.get('.tooltip-inner') - .contains('Flip V') - .click(); + cy.get('[data-cy="flip v"]').click(); // Visual comparison cy.screenshot('Flip V tool - Should Flip Image on X axis'); diff --git a/platform/viewer/cypress/integration/pwa/OHIFExtensionVTK.spec.js b/platform/viewer/cypress/integration/pwa/OHIFExtensionVTK.spec.js index 2ac608b87..1ba573dfb 100644 --- a/platform/viewer/cypress/integration/pwa/OHIFExtensionVTK.spec.js +++ b/platform/viewer/cypress/integration/pwa/OHIFExtensionVTK.spec.js @@ -27,7 +27,7 @@ describe('OHIF VTK Extension', () => { .wait(1000); // TODO: Once issue #1167 is fixed, the wait command should be removed. (https://github.com/OHIF/Viewers/issues/1167) //Select 2D MPR button - cy.get('.PluginSwitch > .toolbar-button').click(); + cy.get('[data-cy="2d mpr"]').click(); //Wait Reformatting Images cy.waitVTKReformatting(); diff --git a/platform/viewer/cypress/support/aliases.js b/platform/viewer/cypress/support/aliases.js index 95a30f085..84aadbd1c 100644 --- a/platform/viewer/cypress/support/aliases.js +++ b/platform/viewer/cypress/support/aliases.js @@ -1,16 +1,16 @@ //Creating aliases for Cornerstone tools buttons export function initCornerstoneToolsAliases() { - cy.get('.ToolbarRow > :nth-child(2)').as('stackScrollBtn'); - cy.get('.ToolbarRow > :nth-child(3)').as('zoomBtn'); - cy.get('.ToolbarRow > :nth-child(4)').as('levelsBtn'); - cy.get('.ToolbarRow > :nth-child(5)').as('panBtn'); - cy.get('.ToolbarRow > :nth-child(6)').as('lengthBtn'); - cy.get('.ToolbarRow > :nth-child(7)').as('annotateBtn'); - cy.get('.ToolbarRow > :nth-child(8)').as('angleBtn'); - cy.get('.ToolbarRow > :nth-child(9)').as('resetBtn'); - cy.get('.ToolbarRow > :nth-child(10)').as('cineBtn'); - cy.get('.expandableToolMenu').as('moreBtn'); - cy.get('.btn-group > .toolbar-button').as('layoutBtn'); + cy.get('[data-cy="stack scroll"]').as('stackScrollBtn'); + cy.get('[data-cy="zoom"]').as('zoomBtn'); + cy.get('[data-cy="levels"]').as('levelsBtn'); + cy.get('[data-cy="pan"]').as('panBtn'); + cy.get('[data-cy="length"]').as('lengthBtn'); + cy.get('[data-cy="annotate"]').as('annotateBtn'); + cy.get('[data-cy="angle"]').as('angleBtn'); + cy.get('[data-cy="reset"]').as('resetBtn'); + cy.get('[data-cy="cine"]').as('cineBtn'); + cy.get('[data-cy="more"]').as('moreBtn'); + cy.get('[data-cy="layout"]').as('layoutBtn'); cy.get('.viewport-element').as('viewport'); } @@ -44,14 +44,13 @@ export function initRouteAliases() { //Creating aliases for VTK tools buttons export function initVTKToolsAliases() { - cy.get('.PluginSwitch > .toolbar-button').as('twodmprBtn'); - cy.get('.ToolbarRow > :nth-child(2)').as('crosshairsBtn'); - cy.get('.ToolbarRow > :nth-child(3)').as('wwwcBtn'); - cy.get('.ToolbarRow > :nth-child(4)').as('rotateBtn'); + cy.get('[data-cy="crosshairs"]').as('crosshairsBtn'); + cy.get('[data-cy="wwwc"]').as('wwwcBtn'); + cy.get('[data-cy="rotate"]').as('rotateBtn'); cy.get('.slab-thickness').as('slabSlider'); cy.get('.select-ohif').as('modeDropdown'); cy.get('.ohif-check-label').as('modeCheckbox'); - cy.get('.btn-group > .toolbar-button').as('layoutBtn'); + cy.get('[data-cy="layout"]').as('layoutBtn'); } //Creating aliases for Study List page elements on Desktop experience @@ -82,12 +81,8 @@ export function initStudyListAliasesOnTablet() { //Creating aliases for User Preferences modal export function initPreferencesModalAliases() { cy.get('.OHIFModal').as('preferencesModal'); - cy.get('.nav-link') - .first() - .as('userPreferencesHotkeysTab'); - cy.get('.nav-link') - .last() - .as('userPreferencesGeneralTab'); + cy.get('[data-cy="hotkeys"]').as('userPreferencesHotkeysTab'); + cy.get('[data-cy="general"]').as('userPreferencesGeneralTab'); cy.get('[data-cy="reset-default-btn"]').as('restoreBtn'); cy.get('[data-cy="cancel-btn"]').as('cancelBtn'); cy.get('[data-cy="save-btn"]').as('saveBtn'); diff --git a/platform/viewer/cypress/support/commands.js b/platform/viewer/cypress/support/commands.js index cd8b7a255..e97a749a8 100644 --- a/platform/viewer/cypress/support/commands.js +++ b/platform/viewer/cypress/support/commands.js @@ -209,7 +209,7 @@ Cypress.Commands.add('waitDicomImage', (timeout = 20000) => { //Command to reset and clear all the changes made to the viewport Cypress.Commands.add('resetViewport', () => { //Click on More button - cy.get('.expandableToolMenu') + cy.get('[data-cy="more"]') .as('moreBtn') .click(); //Verify if overlay is displayed @@ -219,11 +219,11 @@ Cypress.Commands.add('resetViewport', () => { } }); //Click on Clear button - cy.get('.tooltip-inner > :nth-child(10)') + cy.get('[data-cy="clear"]') .as('clearBtn') .click(); //Click on Reset button - cy.get('.ToolbarRow > :nth-child(9)') + cy.get('[data-cy="reset"]') .as('resetBtn') .click(); }); @@ -284,9 +284,8 @@ Cypress.Commands.add('initStudyListAliasesOnTablet', () => { Cypress.Commands.add( 'addLengthMeasurement', (firstClick = [150, 100], secondClick = [130, 170]) => { - cy.initCornerstoneToolsAliases(); - cy.get('@lengthBtn').click(); - cy.addLine('@viewport', firstClick, secondClick); + cy.get('[data-cy="length"]').click(); + cy.addLine('.viewport-element', firstClick, secondClick); } ); @@ -294,9 +293,8 @@ Cypress.Commands.add( Cypress.Commands.add( 'addAngleMeasurement', (initPos = [180, 390], midPos = [300, 410], finalPos = [180, 450]) => { - cy.initCornerstoneToolsAliases(); - cy.get('@angleBtn').click(); - cy.addAngle('@viewport', initPos, midPos, finalPos); + cy.get('[data-cy="angle"]').click(); + cy.addAngle('.viewport-element', initPos, midPos, finalPos); } ); @@ -369,7 +367,7 @@ Cypress.Commands.add('percyCanvasSnapshot', (name, options = {}) => { }); Cypress.Commands.add('setLayout', (columns = 1, rows = 1) => { - cy.get('.btn-group > .toolbar-button').click(); + cy.get('[data-cy="layout"]').click(); cy.get('.layoutChooser') .find('tr') @@ -471,12 +469,12 @@ Cypress.Commands.add( Cypress.Commands.add('openDownloadImageModal', () => { // Click on More button - cy.get('.expandableToolMenu') + cy.get('[data-cy="more"]') .as('moreBtn') .click(); // Click on Download button - cy.get('.tooltip-inner > :nth-child(13)') + cy.get('[data-cy="download"]') .as('downloadBtn') .click(); });