使用 watir 或 selenium 的自动化材质 UI 组件

Question

我想知道是否有人有办法对 Material UI 组件进行自动化 UI 测试。

Material UI 元素呈现为嵌套的 div，只有很少的唯一 id 信息，例如：

<div data-reactroot style="...">
  <div style="...">
    <div style="...">

    </div>
  </div>
</div>

嵌套的 div 结构使得使用传统的定位方法变得困难，如果不是不可能的话——（Selenium 和 Watir）、id、名称、类等。

使用 react devtools，可以更清楚地了解页面的结构，但我还不能访问 React “DOM”来定位元素。

任何想法或帮助将不胜感激。

添加示例：

滑块

我想不出一个比上面那个更具描述性的例子，实际上可以是 10 层没有任何文本的嵌套 div。

Answer 1

不幸的是，我不知道有什么通用的方法。

一些组件已经有ids，它允许您使用 css 选择器#my-component input（通常足以获得精确的字段），其他组件则需要添加自定义类名（如AutoComplete- popoverProps），这允许您使用类似的选择器。

好消息是每个 MaterialUI 组件都提供className，它可用于定位元素（至少部分） - 详细信息可以在http://www.material-ui.com/#/customization/styles找到 ，而且id现场工作也很频繁，即使没有记录。

最后的手段（如果通过类+其他 css 选择器部分进行检测还不够），您可以使用元素文本回退到 XPath 表达式 - 例如，我用于//span[@class="menu-item"][.//div[contains(text(),"${itemName}")]]匹配菜单项。它匹配声明为的东西<MenuItem primaryText={itemName} className="menu-item">