Coded Interface: Find Element (s) with CSS Selector
I am trying to build a wire for a page so that we can write tests against it. What I would like to do is use a CSS selector to find the given element or elements instead of manually modifying SearchProperties or FilterProperties. For a web test, CSS Selector looks a lot more intuitive than SearchProperties. Is there some mechanism for this that I just can't see?
source to share
Try it...
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 that I am having problems with it regularly complaining about errors in reception.
source to share
As sjdirect pointed out, jQuery extensions are probably fine if you want to use these types of selectors.
However, it seems that you might be interested in some kind of abstraction that does not require directly setting the search / filter properties on the UITestControl objects.
There are good abstractions that don't use the same selectors as jQuery, but provide a readable, consistent approach for finding and interacting with elements on a page.
I would recommend also looking into Code First and CodedUI Fluent (I wrote free extensions) or even CodedUI Enhanced (CUITe).
They provide query support 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();
source to share
Try the browser Window.executeJavascript, if you return the control you found via css / xpath it returns the corresponding 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";
source to share