feat(app): add id attributes for e2e testing (#8262)

* feat(app): add id attributes for e2e testing
Opentrons · Aug 27, 2021 · 9d4274c · 9d4274c
1 parent 557e583
commit 9d4274c
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 3 deletions.
diff --git a/app/src/organisms/ProtocolSetup/RunSetupCard/LabwareSetup/ExtraAttentionWarning.tsx b/app/src/organisms/ProtocolSetup/RunSetupCard/LabwareSetup/ExtraAttentionWarning.tsx
@@ -89,6 +89,7 @@ export const ExtraAttentionWarning = (
  marginY={SPACING_3}
  backgroundColor={COLOR_WARNING_LIGHT}
  color={C_DARK_GRAY}
+ id={'ExtraAttentionWarning'}
  >
  <Box margin={SPACING_3}>
  <Flex margin={SPACING_2}>

diff --git a/app/src/organisms/ProtocolSetup/RunSetupCard/LabwareSetup/LabwareSetupModal.tsx b/app/src/organisms/ProtocolSetup/RunSetupCard/LabwareSetup/LabwareSetupModal.tsx
@@ -112,6 +112,7 @@ export const LabwareSetupModal = (
  onClick={props.onCloseClick}
  width={SIZE_4}
  backgroundColor={C_BLUE}
+ id={'LabwareSetupModal_closeButton'}
  >
  {t('shared:close')}
  </PrimaryBtn>

diff --git a/app/src/organisms/ProtocolSetup/RunSetupCard/LabwareSetup/index.tsx b/app/src/organisms/ProtocolSetup/RunSetupCard/LabwareSetup/index.tsx
@@ -104,6 +104,7 @@ export const LabwareSetup = (props: LabwareSetupProps): JSX.Element | null => {
  viewBox={DECK_MAP_VIEWBOX}
  className={styles.deck_map}
  deckLayerBlocklist={DECK_LAYER_BLOCKLIST}
+ id={'LabwareSetup_deckMap'}
  >
  {() => {
  return (
@@ -154,6 +155,7 @@ export const LabwareSetup = (props: LabwareSetupProps): JSX.Element | null => {
  marginRight={SPACING_3}
  onClick={() => console.log('check labware positions!')}
  color={C_BLUE}
+ id={'LabwareSetup_checkLabwarePositionsButton'}
  >
  {t('check_labware_positions')}
  </SecondaryBtn>
@@ -162,6 +164,7 @@ export const LabwareSetup = (props: LabwareSetupProps): JSX.Element | null => {
  disabled={proceedToRunDisabled}
  as={LinkComponent}
  backgroundColor={C_BLUE}
+ id={'LabwareSetup_proceedToRunButton'}
  {...linkProps}
  {...targetProps}
  >

diff --git a/app/src/organisms/ProtocolSetup/RunSetupCard/ModuleSetup/index.tsx b/app/src/organisms/ProtocolSetup/RunSetupCard/ModuleSetup/index.tsx
@@ -80,6 +80,7 @@ export const ModuleSetup = (props: ModuleSetupProps): JSX.Element | null => {
  viewBox={DECK_VIEW_BOX}
  className={styles.deck_map}
  deckLayerBlocklist={DECK_LAYER_BLOCKLIST}
+ id={'ModuleSetup_deckMap'}
  >
  {() => {
  return (
@@ -115,6 +116,7 @@ export const ModuleSetup = (props: ModuleSetupProps): JSX.Element | null => {
  title={t('proceed_to_labware_setup_step')}
  onClick={expandLabwareSetupStep}
  backgroundColor={C_BLUE}
+ id={'ModuleSetup_proceedToLabwareSetup'}
  >
  {t('proceed_to_labware_setup_step')}
  </PrimaryBtn>

diff --git a/app/src/organisms/ProtocolUpload/UploadInput.tsx b/app/src/organisms/ProtocolUpload/UploadInput.tsx
@@ -111,7 +111,11 @@ export function UploadInput(props: UploadInputProps): JSX.Element {
  <Text as="h1" css={FONT_HEADER_DARK} marginBottom={SPACING_3}>
  {t('open_a_protocol')}
  </Text>
- <PrimaryBtn onClick={handleClick} marginBottom={SPACING_4}>
+ <PrimaryBtn
+ onClick={handleClick}
+ marginBottom={SPACING_4}
+ id={'UploadInput_protocolUploadButton'}
+ >
  {t('choose_file')}
  </PrimaryBtn>
  <label
@@ -123,7 +127,11 @@ export function UploadInput(props: UploadInputProps): JSX.Element {
  css={dropZoneStyles}
  >
  <Icon width={SIZE_3} name="upload" marginBottom={SPACING_4} />
- <span aria-controls="file_input" role="button">
+ <span
+ aria-controls="file_input"
+ role="button"
+ id={'UploadInput_fileUploadLabel'}
+ >
  {t('drag_file_here')}
  </span>
  <input
@@ -148,6 +156,7 @@ export function UploadInput(props: UploadInputProps): JSX.Element {
  href={PROTOCOL_LIBRARY_URL}
  width="19rem"
  marginBottom={SPACING_3}
+ id={'UploadInput_protocolLibraryButton'}
  >
  {t('browse_protocol_library')}
  </SecondaryBtn>
@@ -156,6 +165,7 @@ export function UploadInput(props: UploadInputProps): JSX.Element {
  external
  href={PROTOCOL_DESIGNER_URL}
  width="19rem"
+ id={'UploadInput_protocolDesignerButton'}
  >
  {t('launch_protocol_designer')}
  </SecondaryBtn>

diff --git a/components/src/deck/RobotWorkSpace.tsx b/components/src/deck/RobotWorkSpace.tsx
@@ -11,12 +11,13 @@ export interface RobotWorkSpaceProps {
  className?: string
  children?: (props: RobotWorkSpaceRenderProps) => React.ReactNode
  deckLayerBlocklist?: string[]
+ id?: string
 }
 
 type GetRobotCoordsFromDOMCoords = RobotWorkSpaceRenderProps['getRobotCoordsFromDOMCoords']
 
 export function RobotWorkSpace(props: RobotWorkSpaceProps): JSX.Element | null {
- const { children, deckDef, deckLayerBlocklist = [], viewBox } = props
+ const { children, deckDef, deckLayerBlocklist = [], viewBox, id } = props
  const wrapperRef = React.useRef<SVGSVGElement>(null)
 
  // NOTE: getScreenCTM in Chrome a DOMMatrix type,
@@ -55,6 +56,7 @@ export function RobotWorkSpace(props: RobotWorkSpaceProps): JSX.Element | null {
  className={cx(styles.robot_work_space, props.className)}
  viewBox={viewBox || wholeDeckViewBox}
  ref={wrapperRef}
+ id={id}
  >
  {deckDef && (
  <DeckFromData def={deckDef} layerBlocklist={deckLayerBlocklist} />