我可以将id属性添加到使用React创建的html元素中吗 [英] Can I add the id property to an html element created with React

问题描述

我正在使用Selenium为在React中开发的Web应用程序编写端到端测试.检查网站后，我发现几乎所有html元素都没有设置id属性.

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.

由于我们的开发团队正忙于做其他事情，所以我本人应该解决这个问题.到目前为止，我已经通过使用CSS选择器和xpath在测试中定位元素来解决此问题.

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.

为了使测试更可靠，我想通过其id属性找到我的大多数元素.如果该网站是在react框架之外编写的，那么我只需将id属性添加到html文档中所需的元素即可.

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.

在没有完全理解React源代码的情况下，我有办法做到这一点吗?

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

推荐答案

反应

反应是用于构建用户界面的JavaScript库. React使您可以更轻松地为应用程序中的每个状态设计简单视图.当您的应用程序数据更改时，React可以有效地更新和呈现正确的组件.声明性视图使您的代码在调试时也更可预测，也更容易.由于组件逻辑是用JavaScript而不是模板编写的，因此您可以轻松地通过应用程序传递丰富的数据，并使状态保持在

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 prop 指的是一种使用道具，其价值是一个功能.具有渲染道具的组件采用返回React元素并调用它的函数，而不是实现自己的渲染逻辑.一个例子:

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>
)}/>

---

反应成分

反应组件实现render()方法，该方法获取输入数据并返回要显示的内容. render()通过this.props可以访问传递到组件中的输入数据.下面的示例使用称为JSX的类似XML的语法:

---

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:

代码:

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

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

结果:

Hello CrispJam

---

结论

因此，在没有完全理解的情况下，没有的出路来编辑React源代码.但是，定位器策略同样可以很好地定位和识别基于静态和动态属性的元素.

---

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:

• 填充在Instagram中使用Selenium和WebDriver(chrome)python OSX登录表单

这篇关于我可以将id属性添加到使用React创建的html元素中吗的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！