No way for us to add a STATIC and 'unique' tag in the DOM

This is a big headache for any QA team who automate tests using Selenium Webdriver.

Because our CSS are been constantly updated due to new requirements in our apps we need to constantly update the CSS_SELECTOR and/or XPATHs that the webdriver needs in order to locate the web elements (in this case the react-select dropdowns); in the perfect world we should be able to add IDs or Names attributes into a web element in the DOM.

When you have a page with multiple Select options we can’t rely on using the class attribute (class=Select-control) because is not going to be unique in the DOM and also the data-reactid attribute is something that gets changed between the builds.

Would you please add a away that devs could add some custom attributes into the DOM other than the defaults that get build from the Select.

Thanks in advance.

[elie222]

For others trying to do this. Something like this should work:

const DropdownIndicator = (
  props: ElementConfig<typeof components.DropdownIndicator>,
) => {
  return (
    <components.DropdownIndicator
      {...props}
      innerProps={{
        ...props.innerProps,
        'data-test': 'select-dropdown-indicator',
      }}
    />
  );
};

function Select({ ...props }: Props) {
  return <ReactSelect components={{ DropdownIndicator }} {...props} />;
}

[DanielSundberg]

Any progress on this? I’m trying to automate this control using Selenium and I’m having the same issue.