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

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

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