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

我想知道是否有人在Material UI组件上进行自动化UI测试。使用watir或硒的自动化材质UI组件

材料UI元素呈现为嵌套的div用很少的唯一ID信息，例如：

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

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

嵌套格结构使得使用传统定位方法困难的，如果不是不可能的 - （硒和的Watir），身份证，名称，类等

使用react devtools，可以看到页面结构更清晰的图像，但我还无法访问React“DOM”来查找元素。

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

加入实施例：

Sliders

我不能想出比上述一个更具描述性的一个例子，可以从字面上是嵌套的div 10层而不任何文本。

来源

2016-08-15 smact3010

从我看过的例子看来，您应该可以将ID添加到控件。例如，在[文本字段示例]（http://www.material-ui.com/#/components/text-field）中，它们在默认值字段中有一个ID。这是一个选择吗？至少，您应该能够识别用户所需的元素（例如文本，与标签的关系等）。展示更多正在处理的页面可能会帮助我们提供答案（并避免将问题关闭得太宽泛）。 –

我们正在考虑添加组件的ID，但功能控件（组件内），例如对于ID，滑块组件的“句柄”更复杂。就文本ID而言，当我们在嵌套div结构中定位文本时，我们得到最外面的div，这最终可能只是应用程序的根。 – smact3010

不幸的是，我没有意识到一般的方法。

一些组件已经有id s，它允许你使用一个CSS选择像#my-component input（通常是足以让一个确切的场），其他都添加自定义类的名字（例如AutoComplete - popoverProps），这允许您使用类似的选择器。

好消息是，每MaterialUI组件提供className，它可以用来定位元素（至少部分地） - 细节可以在http://www.material-ui.com/#/customization/styles 也发现id现场工作很多时候，即使没有记录。

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

来源

2017-01-05 10:45:58

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

回答

相关问题