Coded UI: Find Element(s) by CSS Selector

问题:

I am trying to build out a harness for a page so that we can write tests against it. What I would like to be able to do is use a CSS selector to find the given element or elements instead of manually modifying the SearchProperties or FilterProperties.For a web test the CSS Selector seems far more intuitive then the SearchProperties do. Is there some mechanism for doing this that I am simply not seeing?

回答1:

Try this...

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

It adds extension methods to the BrowserWindow object...

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

However, I will let you know I'm having issues with it complaining about casting errors regularly.

回答2:

Try browserWindow.executeJavascript if you return a control you found via css/xpath it returns the relevant uiControl object

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";

回答3:

As sjdirect noted, the jQuery extensions are probably the way to go if you want to use those type of selectors.

However, it seems that you may be interested in some abstraction that doesn't require directly setting search / filter properties on the UITestControl objects.

There are good abstractions that do not use the same selectors as jQuery, but provide a readable, consistent approach for finding elements in the page and interacting with them.

I would recommend also looking into Code First and CodedUI Fluent (I wrote the fluent extensions) or even CodedUI Enhanced (CUITe).

These provide query support for that looks like (from 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();