fix(protocol-designer) refactor cypress locators to be less brittle

protocol-designer/cypress/e2e/mixSettings.cy.ts

@@ -9,6 +9,7 @@ describe('Redesigned Mixing Steps - Happy Path', () => {
   beforeEach(() => {
     cy.visit('/')
     cy.closeAnalyticsModal()
+    cy.closeReleaseNotesModal()
     const protocol = getTestFile(TestFilePath.DoItAllV8)
     cy.importProtocol(protocol.path)
     verifyImportProtocolPage(protocol)

protocol-designer/cypress/e2e/plateReaderTest.cy.ts

@@ -1,4 +1,8 @@
-import { SetupSteps, SetupVerifications } from '../support/SetupSteps'
+import {
+  SetupSteps,
+  SetupVerifications,
+  CompositeSetupSteps,
+} from '../support/SetupSteps'
 import { ModuleSteps, ModuleVerifications } from '../support/ModuleSteps'
 import { UniversalSteps } from '../support/UniversalSteps'
 import { StepBuilder } from '../support/StepBuilder'
@@ -44,11 +48,9 @@ describe('Plate Reader Happy Path Single-Wavelength', () => {
     steps.add(SetupSteps.Confirm())
     steps.add(SetupSteps.Confirm())
     steps.add(SetupSteps.EditProtocolA())
-    steps.add(SetupSteps.ChoseDeckSlotWithLabware('C3'))
-    steps.add(SetupSteps.AddHardwareLabware())
-    steps.add(SetupSteps.ClickLabwareHeader())
-    steps.add(SetupSteps.ClickWellPlatesSection())
-    steps.add(SetupSteps.SelectLabwareByDisplayName('Bio-Rad 96 Well Plate'))
+    steps.add(
+      CompositeSetupSteps.AddLabwareToDeckSlot('C3', 'Bio-Rad 96 Well Plate')
+    )
     steps.add(SetupSteps.ChoseDeckSlotWithLabware('C3'))
     steps.add(SetupSteps.AddLiquid())
     steps.add(SetupSteps.ClickLiquidButton())
@@ -81,7 +83,7 @@ describe('Plate Reader Happy Path Single-Wavelength', () => {
     steps.add(SetupSteps.Save())
     steps.add(ModuleVerifications.NoMoveToPlateReaderWhenClosed())
     // You can't move to Plate Reader while it's closed
-    steps.add(SetupSteps.DeleteSteps())
+    steps.add(SetupSteps.DeleteSteps('1. Move'))
     steps.add(SetupSteps.AddStep())
     steps.add(ModuleSteps.StartPlateReaderStep())
     steps.add(ModuleVerifications.PlateReaderPart1NoInitilization())
@@ -91,7 +93,6 @@ describe('Plate Reader Happy Path Single-Wavelength', () => {
     steps.add(ModuleSteps.DefineInitilizationSingleCheckAll())
     steps.add(ModuleSteps.DefineCustomWavelegthSingle('300'))
     steps.add(SetupSteps.Save())
-
     steps.execute()
   })
 })

protocol-designer/cypress/e2e/transferSettings.cy.ts

@@ -1,4 +1,8 @@
-import { SetupSteps, SetupVerifications } from '../support/SetupSteps'
+import {
+  SetupSteps,
+  SetupVerifications,
+  CompositeSetupSteps,
+} from '../support/SetupSteps'
 import { UniversalSteps } from '../support/UniversalSteps'
 import { StepBuilder } from '../support/StepBuilder'
 
@@ -47,12 +51,10 @@ describe('Transfer stepform testing Single Channel - Happy Path', () => {
     steps.add(SetupSteps.Confirm())
     steps.add(SetupSteps.Confirm())
     steps.add(SetupSteps.EditProtocolA())
-    steps.add(SetupSteps.ChoseDeckSlot('C2'))
-    steps.add(SetupSteps.AddHardwareLabware())
-    steps.add(SetupSteps.ClickLabwareHeader())
-    steps.add(SetupSteps.ClickWellPlatesSection())
-    steps.add(SetupSteps.SelectLabwareByDisplayName('Bio-Rad 96 Well Plate'))
-    steps.add(SetupSteps.ChoseDeckSlotC2Labware())
+    steps.add(
+      CompositeSetupSteps.AddLabwareToDeckSlot('C2', 'Bio-Rad 96 Well Plate')
+    )
+    steps.add(SetupSteps.ChoseDeckSlotWithLabware('C2'))
     steps.add(SetupSteps.AddLiquid())
     steps.add(SetupSteps.ClickLiquidButton())
     steps.add(SetupSteps.DefineLiquid())
@@ -63,11 +65,9 @@ describe('Transfer stepform testing Single Channel - Happy Path', () => {
     steps.add(UniversalSteps.Snapshot())
     steps.add(SetupSteps.SelectLiquidWells())
     steps.add(SetupSteps.SetVolumeAndSaveForWells('150'))
-    steps.add(SetupSteps.ChoseDeckSlot('C3'))
-    steps.add(SetupSteps.AddHardwareLabware())
-    steps.add(SetupSteps.ClickLabwareHeader())
-    steps.add(SetupSteps.ClickWellPlatesSection())
-    steps.add(SetupSteps.SelectLabwareByDisplayName('Bio-Rad 96 Well Plate'))
+    steps.add(
+      CompositeSetupSteps.AddLabwareToDeckSlot('C3', 'Bio-Rad 96 Well Plate')
+    )
     steps.add(SetupSteps.ProtocolStepsH())
     steps.add(SetupSteps.AddStep())
     steps.add(SetupVerifications.TransferPopOut())

protocol-designer/cypress/support/MixSteps.ts

@@ -89,24 +89,19 @@ enum MixLocators {
   AspFlowRateInput = '[name="aspirate_flowRate"]',
   AspWellOrder = '[data-testid="WellsOrderField_ListButton_aspirate"]',
   ResetToDefault = 'button:contains("Reset to default")',
-  PrimaryOrderDropdown = 'div[tabindex="0"].sc-bqWxrE jKLbYH iFjNDq',
-  CancelAspSettings = 'button:contains("Done")',
   MixTipPos = '[data-testid="PositionField_ListButton_mix"]',
   XpositionInput = '[data-testid="TipPositionModal_x_custom_input"]',
   YpositionInput = '[id="TipPositionModal_y_custom_input"]',
   ZpositionInput = '[id="TipPositionModal_z_custom_input"]',
   SwapView = 'button:contains("Swap view")',
-  Checkbox = '[class="Flex-sc-1qhp8l7-0 Checkbox___StyledFlex3-sc-1mvp7vt-0 gZwGCw btdgeU"]',
-  DelaySecondsInput = '[class="InputField__StyledInput-sc-1gyyvht-0 cLVzBl"]',
+  Checkbox = '[data-testid="ListButton_noActive"]',
   DispFlowRate = '[name="dispense_flowRate"]',
-  BlowoutLtnDropdown = '[class="Svg-sc-1lpozsw-0 Icon___StyledSvg-sc-1gt4gyz-0 csSXbR cJpxat"]',
   BlowoutFlowRate = '[name="blowout_flowRate"]',
   BlowoutPos = '[id="TipPositionField_blowout_z_offset"]',
   BlowoutZPosition = '[data-testid="TipPositionModal_custom_input"]',
   PosFromBottom = '[id="TipPositionField_mix_touchTip_mmFromBottom"]',
   RenameBtn = 'button:contains("Rename")',
-  StepNameInput = '[class="InputField__StyledInput-sc-1gyyvht-0 cLVzBl"]',
-  // StepNotesInput = '[class="TextAreaField__StyledTextArea-sc-1mhuse7-0 hpcyEZ"]',
+  StepNameInput = 'div[tabindex="0"]',
   StepNotesInput = '[data-testid="TextAreaField"]',
   PosFromTop = '[data-testid="TipPositionField_mix_touchTip_mmFromTop"]',
 }
@@ -229,17 +224,22 @@ export const MixSteps = {
     call: () => {
       cy.contains(MixContent.Delay).should('exist').should('be.visible')
       cy.get(MixLocators.Checkbox)
+        .contains('Delay')
         .should('exist')
         .should('be.visible')
-        .eq(0)
         .click()
       cy.contains(MixContent.DelayDuration).should('exist').should('be.visible')
-      cy.get(MixLocators.DelaySecondsInput)
+      cy.get(MixLocators.Checkbox)
+        .find(
+          '[name="aspirate_delay_seconds"], [name="dispense_delay_seconds"]'
+        )
         .should('exist')
         .should('be.visible')
         .should('have.prop', 'value')
-      cy.get(MixLocators.DelaySecondsInput)
-        .eq(1)
+      cy.get(MixLocators.Checkbox)
+        .find(
+          '[name="aspirate_delay_seconds"], [name="dispense_delay_seconds"]'
+        )
         .type('{selectAll}{backspace}5')
     },
   }),
@@ -271,12 +271,14 @@ export const MixSteps = {
     call: () => {
       cy.contains(MixContent.Blowout).should('exist').should('be.visible')
       cy.get(MixLocators.Checkbox)
+        .contains('Blowout')
         .should('exist')
         .should('be.visible')
-        .eq(0)
         .click()
-      cy.contains(MixContent.ChooseOption).should('exist').should('be.visible')
-      cy.get(MixLocators.BlowoutLtnDropdown)
+      cy.contains(MixContent.ChooseOption)
+        .should('exist')
+        .should('be.visible')
+        .closest('div[tabindex="0"]')
         .should('exist')
         .should('be.visible')
         .click()
@@ -324,9 +326,9 @@ export const MixSteps = {
   TouchTip: (): StepThunk => ({
     call: () => {
       cy.get(MixLocators.Checkbox)
+        .contains('Touch tip')
         .should('exist')
         .should('be.visible')
-        .eq(0)
         .click()
       cy.get(MixLocators.PosFromTop)
         .should('exist')
@@ -381,10 +383,12 @@ export const MixSteps = {
       cy.get(MixLocators.RenameBtn).should('exist').should('be.visible').click()
       cy.contains(MixContent.NameStep).should('exist').should('be.visible')
       cy.contains(MixContent.StepName).should('exist').should('be.visible')
-      cy.get(MixLocators.StepNameInput).should('have.value', 'Mix')
+      cy.get(MixLocators.StepNameInput)
+        .find('[type="text"]')
+        .should('have.value', 'Mix')
       cy.contains(MixContent.StepNotes).should('exist').should('be.visible')
       cy.get(MixLocators.StepNameInput)
-        .first()
+        .find('[type="text"]')
         .type('{selectAll}{backspace}Cypress Mix Test')
       cy.get(MixLocators.StepNotesInput).type(
         'This is testing cypress automation in PD'
@@ -497,7 +501,7 @@ export const MixVerifications = {
       cy.get(MixLocators.ResetToDefault).click()
       cy.contains(MixContent.TopToBottom).should('exist').should('be.visible')
       cy.contains(MixContent.LeftToRight).should('exist').should('be.visible')
-      cy.get(MixLocators.CancelAspSettings).should('exist').should('be.visible')
+
       cy.get(MixLocators.Save).should('exist').should('be.visible')
     },
   }),
@@ -524,7 +528,6 @@ export const MixVerifications = {
       cy.get(MixLocators.ZpositionInput).should('exist').should('be.visible')
       cy.get(MixLocators.ZpositionInput).should('have.prop', 'value')
       cy.get(MixLocators.ResetToDefault).should('exist').should('be.visible')
-      cy.get(MixLocators.CancelAspSettings).should('exist').should('be.visible')
       cy.get(MixLocators.Save)
         .should('exist')
         .should('be.visible')

protocol-designer/cypress/support/SetupSteps.ts

@@ -75,7 +75,7 @@ export enum SetupLocators {
   LiquidNameInput = 'input[name="displayName"]',
   ModalShellArea = 'div[aria-label="ModalShell_ModalArea"]',
   SaveButton = 'button[type="submit"]',
-  LiquidsDropdown = 'div[tabindex="0"].sc-ksBlkl',
+  LiquidsDropdown = 'div[tabindex="0"].sc-ksBlkl', // NOTE: locator
   Div = 'div',
   Button = 'button',
   TempdeckTempInput = 'input[name="targetTemperature"]',
@@ -86,8 +86,8 @@ export enum SetupLocators {
   button = 'button',
   svg = 'svg',
   exist = 'exist',
-  StepOptionsTestIDThreeDots = 'button.Btn-sc-o3dtr1-0.OverflowBtn___StyledBtn-sc-1mslfxo-0',
-  AspirateCheckbox = 'div.Checkbox___StyledFlex3-sc-1mvp7vt-0.gZwGCw.btdgeU',
+  StepOptionsTestIDThreeDots = 'button.Btn-sc-o3dtr1-0.OverflowBtn___StyledBtn-sc-1mslfxo-0', // NOTE: locator
+  AspirateCheckbox = 'div.Checkbox___StyledFlex3-sc-1mvp7vt-0.gZwGCw.btdgeU', // NOTE: locator
 }
 
 export const RegexSetupContent = {
@@ -327,7 +327,7 @@ export const SetupSteps = {
   }),
 
   /**
-   * Choose deck slot A2.
+   * Choose deck slot A2. Please
    */
   ChoseDeckSlotA2: (): StepThunk => ({
     call: () => {
@@ -347,7 +347,7 @@ export const SetupSteps = {
   ChoseDeckSlotC2Labware: (): StepThunk => ({
     call: () => {
       chooseDeckSlot('C2')
-        .find('.Box-sc-8ozbhb-0.kIDovv')
+        .find('.Box-sc-8ozbhb-0.kIDovv') // NOTE: ??
         .find('a[role="button"]')
         .contains(RegexSetupContent.slotText)
         .click({ force: true })
@@ -411,7 +411,7 @@ export const SetupSteps = {
   ChoseDeckSlotWithLabware: (deckslot: string): StepThunk => ({
     call: () => {
       chooseDeckSlot(deckslot)
-        .find('.Box-sc-8ozbhb-0.kIDovv')
+        .find('.Box-sc-8ozbhb-0.kIDovv') // NOTE: ??
         .find('a[role="button"]')
         .contains(RegexSetupContent.slotText)
         .click({ force: true })
@@ -513,6 +513,7 @@ export const SetupSteps = {
       cy.get(SetupLocators.LiquidsDropdown).should('be.visible').click()
     },
   }),
+  // cy.contains('p', 'Choose option').closest('div[tabindex="0"]').click()
 
   /**
    * Select "My liquid!" from the dropdown.
@@ -676,7 +677,7 @@ export const SetupSteps = {
   PrewetAspirate: (): StepThunk => ({
     call: () => {
       cy.contains('Pre-wet tip')
-        .closest('div.Flex-sc-1qhp8l7-0.fJriNr')
+        .closest('div.Flex-sc-1qhp8l7-0.fJriNr') // NOTE: locator
         .find(SetupLocators.AspirateCheckbox)
         .click()
     },
@@ -769,17 +770,17 @@ export const SetupSteps = {
   BlowoutTransferDestination: (): StepThunk => ({
     call: () => {
       cy.contains('Blowout')
-        .closest('div.Flex-sc-1qhp8l7-0.ckuVEF')
+        .closest('div.Flex-sc-1qhp8l7-0.ckuVEF') // NOTE: ?
         .find('button[type="button"]')
         .click()
       cy.contains('Choose option').click()
       cy.contains('Destination Well').click()
     },
   }),
 
-  DeleteSteps: (): StepThunk => ({
+  DeleteSteps: (stepNumStepType: string): StepThunk => ({
     call: () => {
-      cy.get(SetupLocators.StepOptionsTestIDThreeDots).click()
+      cy.contains(stepNumStepType).parent().next('button').click()
       cy.contains('Delete step').click()
       cy.contains('button', 'Delete step').click()
     },