Can I add the id property to an html element created with React

Question

I'm using Selenium to write end-to-end tests for a web application developed in React. Upon inspecting the website I found out that practically none of the html elements have the id property set.

As our dev team is busy doing other things I'm supposed to resolve this myself. I've worked around this issue so far by using css selectors and xpath to locate elements in my tests.

However, I feel like this method is prone to errors and since I'm not particularly involved in the dev proccess I might not immediately know about changes to the structure of the website.

To make the tests more robust, I'd like to locate most of my elements by their id property. If the site was written outside of the react framework I'd simply add the id properties to the desired elements in the html document.

Is there a way for me to do this without fully understanding the React source code?

What is the problem? Why can't you just add `id="whatever-you-want"` to html elements rendered by React?... — Arfeo, Mar 04 '19 at 14:40
@Arfeo I think I simply don't understand React well enough to be able to do this. I know how to work with html but I only have access to the React source code. I've been told to look for the `render()` method but I'm not sure exactly what to do there. — CrispJam, Mar 04 '19 at 14:46
if you know what DOM elements are, at least, you go to a React component source file, go to the `render` method and just add an id (like `
...
`. The possible problem is that actually render occurs not only in `render` method, but in other methods called from `render`. Whatever, you'll probably would like to read some React documentation to understand its basics... — Arfeo, Mar 04 '19 at 14:49
I should have probably noted that I've tried to do this `
...
` and it has worked for elements I'm familiar with like `
`, ``. The problem arises when I try to add an id element to an element that is capitalized. E.g. `` — CrispJam, Mar 04 '19 at 14:55
Sorry, but I was confused by the question title. It is about HTML elements. And ones you call "capitalized" are virtual dom elements which does not exist in the rendered web-page actually. Since they do not exist, there is no interest for you to add ids to them. — Arfeo, Mar 04 '19 at 14:58

undetected Selenium · Answer 1 · 2019-03-05T08:41:31.660

React

React is a JavaScript library for building user interfaces. React makes it easier to design simple views for each state in your application. React can efficiently update and render just the right components when your application data changes. The declarative views make your code more predictable and easier while debuging as well. As the component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the HTML DOM. This in-turn helps to build encapsulated components that manage their own state, then compose them to make complex UIs.

render()

render() is the one method in the Life Cycle that exists across multiple life cycle phases. It occurs here in Birth and it is where we spend a lot of time in Growth.

Render Props

render prop refers to a technique for sharing code between React components using a prop whose value is a function. A component with a render prop takes a function that returns a React element and calls it instead of implementing its own render logic. An example:

<DataProvider render={data => (
  <h1>Hello {data.target}</h1>
)}/>

React component

React components implement the render() method that takes input data and returns what to display. Input data that is passed into the component can be accessed by render() via this.props. The following example uses an XML-like syntax called JSX:

Code:

class HelloMessage extends React.Component {
  render() {
    return (
      <div>
    Hello {this.props.name}
      </div>
    );
  }
}

ReactDOM.render(
  <HelloMessage name="CrispJam" />,
  document.getElementById('hello-example')
);

Result:

Hello CrispJam

Conclusion

So there is no way out to edit the React source code without fully understanding. However the Locator Strategies are equally good enough to locate and identify elements based on the attributes static as well as dynamic.

You can find a relevant discussion in:

Filling in login forms in Instagram using selenium and webdriver (chrome) python OSX