Identifying elements on a ReactJS webpage using Selenium, is their a better way?

Question

I am trying to write web driven tests using Selenium on a webpage built with reactjs. I am able to grab my elements by xpath however this is not ideal and very limiting.

1. If any changes happen to the website the xpath will not work.
2. all the class names are identical with no other attributes to grab, as well the class names change because they are dynamically built by react.
3. There are no other attributes to use.
4. Cant use the CSSSelector because the css name is also built by react.

My main problems keep popping up when I want a specific element, like one I just built or how to manipulate a specific one in a list.

I keep getting stumped on the same problem for each test I try to write, no unique identifiers. I am not familiar with reactJs but is this a common problem with Selenium?

Answer 1

It's common practice to use a data-test attribute on your HTML elements to assist in browser-based testing;, whether it's static or rendered by a JS framework; I would recommend that you request that the developers include these attributes throughout the codebase in order to allow you to easily target the elements you want to test without worrying about class names or id attributes changing.