使用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組件

回答

相關問題