Use unique element locators for multiproxy selector on desktop and mobile

[asnaith]

At the moment we have to use .first when trying to interact with the multiproxySelector element eg:

topMenuItems.multiproxySelector().should('be.visible').first().click()

This is because two elements with that locator can be found in the DOM (the desktop and mobile one).

Let's give them unique names and update tests to get rid of the .first

[asnaith]

After looking into this a little bit, I don't think this is because it's finding the selector from the desktop and mobile view.

I think it is more related to how it is rendered in the header (but can't work out exactly why).

I was able to set a unique locator for Desktop and Mobile eg

const theme = useTheme()
  const isDesktop = useMediaQuery(theme.breakpoints.up('md'))

  return (
    <Autocomplete
      className={className}
      isOptionEqualToValue={isOptionEqualToValue}
      disableClearable
      filterOptions={filterOptions}
      options={multiProxyList}
      renderOption={renderOptions}
      renderInput={renderInput}
      getOptionLabel={getOptionLabel}
      onChange={onChange}
      value={canFindMultiProxyFromUrl ? selectedMultiProxy || multiProxyList[0] : ''}
      data-cy={isDesktop ? 'select-multiproxy-desktop' : 'select-multiproxy-mobile'}
    />
  )

Which successfully set a unique one locator per layout (I set some custom viewports to check and saw the mobile one successfully applied).

However, when I removed the .first() from the element interactions in the test file I saw that Cypress would still find two of the select-multiproxy-desktop locators and I wasn't sure how to proceed.

[Tbaut]

I checked and I'm certain that the issue was because of the dektop/mobile one. The mobile is hidden, but present in the DOM. I didn't use the exact same logic as you did, it's something a little simpler, since we have the info directly from the props depending on where this multiproxy selector is called.