查找React渲染的html元素的简单方法

Question

对于Selenium的快速搜索元素，我认为这应该是将某些属性设置为html元素的简单方法，例如：将React Component Key转换为数据属性（如果可能）。

我当然可以为自己的span，div以及组件中的任何内容编写id或数据属性，但是我无法使用3d-party库的组件来编写-该组件可能没有像“ id”这样的属性，我将不得不包装这些组件，然后按标记或类找到它们。

也许是webpack的插件，用于将数据属性设置为具有组件名称的元素。

但是，如何在react应用渲染中找到元素？

我认为按类或标签查找元素不是一个好主意

这样的键变换：

    <MyComponent key="SuperComponent" />
    ...
    <div data-attr="SuperComponent">...</div>

或自动设置组件名称的属性，如下所示：：

    <MySuperComponent />
    ...
    <div data-attr="MySuperComponent">...</div>

Answer 1

从“测试自动化到 Selenium” 的角度来看，HTML是否由 id 或数据属性。在使用硒时，测试是在任何有效的<tag>和相关的属性的帮助下编写的。但是，Locator Strategies的首选列表如下：

如何在React App Render中查找元素？

基于ReactJS的 AUT（测试中的应用程序）粗略，该元素将具有动态属性。 定位器策略也可以是动态的。您可以在讨论How to locate a button with a dynamicID

中找到动态定位器策略的示例用法。

最后，在 Test Automation 中，需要快速移动的 WebDriver 实例与滞后的浏览器同步。您可以在Do we have any generic funtion to check if page has completely loaded in Selenium

中找到相关的讨论