Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 8 years ago
  • Reactions:5
  • Comments:10 (3 by maintainers)

github_iconTop GitHub Comments

elie222commented, Aug 5, 2019

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

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

function Select({ ...props }: Props) {
  return <ReactSelect components={{ DropdownIndicator }} {...props} />;
DanielSundbergcommented, Sep 16, 2015

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Best way to create large static DOM elements in JavaScript?
append (create()); Another option is to write a function that will use document. createElement("div"), or $("<div>") many times to build the elements, append...
Read more >
Manipulating documents - Learn web development | MDN
This is usually done by using the Document Object Model (DOM), a set of APIs for controlling HTML and styling information that makes...
Read more >
How To Make Changes to the DOM - DigitalOcean
In this tutorial, we will go over how to create new nodes and insert them into the DOM, replace existing nodes, and remove...
Read more >
What are the different ways to select DOM elements in ...
Since the ids of elements are supposed to be unique, this is a faster way to select an element. The getElementById method is...
Read more >
Documentation - DOM Manipulation - TypeScript
Pass it any string and it will return a standard HTMLElement. This definition is what enables developers to create unique HTML element tags....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found