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

问题

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?

回答1:

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

来源：https://stackoverflow.com/questions/54985385/can-i-add-the-id-property-to-an-html-element-created-with-react

标签

javascript

reactjs

selenium

xpath

css-selectors