Can developers easily add IDs to a React app?



  • I am writing Selenium automation against a React application. I would like to have unique IDs added to page elements I am testing.

    I asked the developers but their response was that this was hard to do because of the dynamic nature of the React application.

    I don't know React - is this likely true? Is it likely that they are truly prevented from adding a fixed ID? Could the issue be that QA needs to ask for a different attribute other than ID, perhaps? For example, should it be easy for them to add a data attribute such as data-qa-id?



  • No, that's not true at all; you can definitely add your own id attributes to elements rendered in React components. id is listed as a supported DOM attribute in the docs.

    Yes, in cases where components are reused, the developers will have to allow for something unique to be passed in, but that's exactly how e.g. Material-UI already does this: https://material-ui.com/components/text-fields/#accessibility, so there are definitely existing patterns they can adopt for this.

    It's also possible to add e.g. data- attributes to React components for testing purposes, e.g. here and here are examples where I've used them. I generally prefer that approach to using IDs (or e.g. classes) as selectors because then it's obvious in the component that this value is being relied on by something else, and shouldn't be changed without a corresponding update elsewhere, particularly as it sounds like you have separate dev and QA teams.

    I'd go back and ask for more clarity on what they think the problem is.



Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2