编码的用户界面：通过CSS选择器查找元素

Question

我想为页面构建一个线束，以便我们可以针对它编写测试。我希望能够做的是使用CSS选择器来查找给定的元素或元素，而不是手动修改SearchProperties或FilterProperties.对于web测试，CSS Selector似乎比SearchProperties更直观。有没有这样做的机制，我根本没有看到？

Answer 1

尝试......

https://github.com/rpearsondev/CodedUI.jQueryExtensions/

它增加了扩展方法的BrowserWindow对象...

var example1 = browser.JQuerySelect<HtmlHyperlink>('a.class1'); 
var example2 = browser.JQuerySelect<HtmlListItem>('li.class2'); 

但是，我会让你知道我与它有问题抱怨定期抛出错误。

Answer 2

正如sjdirect指出的那样，如果您想使用这些类型的选择器，jQuery扩展可能就是要走的路。

但是，您似乎可能对的某些抽象感兴趣，它不需要直接在UITestControl对象上设置搜索/筛选器属性。

有很好的抽象，不使用与jQuery相同的选择器，但提供可读，一致的方法来查找页面中的元素并与它们进行交互。

我会推荐也看看Code First和CodedUI Fluent（我写了流利的扩展名）甚至CodedUI Enhanced（CUITe）。

这些提供查询支持，看起来像（由奎特）：

// Launch the web browser and navigate to the homepage 
BrowserWindowUnderTest browserWindow = BrowserWindowUnderTest.Launch("https://website.com"); 

// Enter the first name 
browserWindow.Find<HtmlEdit>(By.Id("FirstName")).Text = "John"; 

// Enter the last name 
browserWindow.Find<HtmlPassword>(By.Id("LastName")).Text ="Doe"; 

// Click the Save button 
browserWindow.Find<HtmlInputButton>(By.Id("Save")).Click(); 

Answer 3

尝试browserWindow.executeJavascript如果回到你通过CSS/XPath的发现了一个控制它返回相关uiControl对象

const string javascript = "document.querySelector('{0}');"; 
var bw = BrowserWindow.Launch(new Uri("http://rawstack.azurewebsites.net")); 
string selector = "[ng-model='filterOptions.filterText']"; 
var control = bw.ExecuteScript(string.Format(javascript,selector)); 
HtmlEdit filter= control as HtmlEdit; 
filter.Text = "Alien";