test: Refactoring toolbar data-cy selectors (#1323)

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}
           >
             <button>{name}</button>
           </li>

platform/ui/src/viewer/ToolbarButton.js

@@ -23,8 +23,14 @@ export function ToolbarButton(props) {
     }
   };
 
+  const cypressSelectorId = props.label.toLowerCase();
+
   return (
-    <div className={className} onClick={handleClick}>
+    <div
+      className={className}
+      onClick={handleClick}
+      data-cy={cypressSelectorId}
+    >
       {iconProps && <Icon {...iconProps} />}
       <div className="toolbar-button-label">
         {t(label)}

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')
+    cy.get('[data-cy="clear"]').click();
-      .contains('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')
+        cy.get('[data-cy="eraser"]').click({ force: true });
-          .contains('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')
+    cy.get('[data-cy="invert"]').click();
-      .contains('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')
+        cy.get('[data-cy="rotate right"]').click({ force: true });
-          .contains('Rotate')
-          .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')
+    cy.get('[data-cy="flip h"]').click();
-      .contains('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')
+    cy.get('[data-cy="flip v"]').click();
-      .contains('Flip V')
-      .click();
 
     // Visual comparison
     cy.screenshot('Flip V tool - Should Flip Image on X axis');

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();

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('[data-cy="stack scroll"]').as('stackScrollBtn');
-  cy.get('.ToolbarRow > :nth-child(3)').as('zoomBtn');
+  cy.get('[data-cy="zoom"]').as('zoomBtn');
-  cy.get('.ToolbarRow > :nth-child(4)').as('levelsBtn');
+  cy.get('[data-cy="levels"]').as('levelsBtn');
-  cy.get('.ToolbarRow > :nth-child(5)').as('panBtn');
+  cy.get('[data-cy="pan"]').as('panBtn');
-  cy.get('.ToolbarRow > :nth-child(6)').as('lengthBtn');
+  cy.get('[data-cy="length"]').as('lengthBtn');
-  cy.get('.ToolbarRow > :nth-child(7)').as('annotateBtn');
+  cy.get('[data-cy="annotate"]').as('annotateBtn');
-  cy.get('.ToolbarRow > :nth-child(8)').as('angleBtn');
+  cy.get('[data-cy="angle"]').as('angleBtn');
-  cy.get('.ToolbarRow > :nth-child(9)').as('resetBtn');
+  cy.get('[data-cy="reset"]').as('resetBtn');
-  cy.get('.ToolbarRow > :nth-child(10)').as('cineBtn');
+  cy.get('[data-cy="cine"]').as('cineBtn');
-  cy.get('.expandableToolMenu').as('moreBtn');
+  cy.get('[data-cy="more"]').as('moreBtn');
-  cy.get('.btn-group > .toolbar-button').as('layoutBtn');
+  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('[data-cy="crosshairs"]').as('crosshairsBtn');
-  cy.get('.ToolbarRow > :nth-child(2)').as('crosshairsBtn');
+  cy.get('[data-cy="wwwc"]').as('wwwcBtn');
-  cy.get('.ToolbarRow > :nth-child(3)').as('wwwcBtn');
+  cy.get('[data-cy="rotate"]').as('rotateBtn');
-  cy.get('.ToolbarRow > :nth-child(4)').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')
+  cy.get('[data-cy="hotkeys"]').as('userPreferencesHotkeysTab');
-    .first()
+  cy.get('[data-cy="general"]').as('userPreferencesGeneralTab');
-    .as('userPreferencesHotkeysTab');
-  cy.get('.nav-link')
-    .last()
-    .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');

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('[data-cy="length"]').click();
-    cy.get('@lengthBtn').click();
+    cy.addLine('.viewport-element', firstClick, secondClick);
-    cy.addLine('@viewport', 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('[data-cy="angle"]').click();
-    cy.get('@angleBtn').click();
+    cy.addAngle('.viewport-element', initPos, midPos, finalPos);
-    cy.addAngle('@viewport', 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();
 });