查找已由 React 渲染的 html-element 的简单方法

Question

对于 Selenium 的快速搜索元素，我认为它必须是一种简单的方法，将一些属性设置为 html-elements，例如：将 React Component Key 转换为 data-attribute（如果可能的话）。

当然，我可以将 id 或数据属性写入我的 span、div 和我的组件中的任何内容，但我无法使用 3d 方库的组件来执行此操作 - 这些组件可能没有像“id”这样的道具，我将不得不包装这些组件，然后通过标签或类找到它们......

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

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

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

这样的按键变换：

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

或像这样自动设置组件名称的属性：

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

Answer 1

从 “测试自动化 到 Selenium” 的角度来看，HTML 是否由 id 或 data-attributes 组成几乎无关紧要时间>。在使用 Selenium 时，测试是在任何有效的<tag> 和相关的属性 的帮助下编写的。然而，Locator Strategies 的首选列表如下：

如何在 React 应用渲染中找到元素？

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

的讨论中找到 Dynamic Locator Strategies 的示例用法

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