How to find controls in new Tabs of your browser with CodedUI

*Moved to: http://fluentbytes.com/how-to-find-controls-in-new-tabs-of-your-browser-with-codedui/

One question I got recently is if it is possible to find controls on secondary tabs that are created by an application when using CodedUI. the answer is yes and I thought it would be handy to write up how to make this happen.

For purpose of the sample I create a simple ASP.NET MVC website and changed the default page to have a link button that creates a new page in a second tab.

The page looks as follows:

When I click the button, then a new tab is opened and that will show the following page:

As you can see I have done a lot of work to make the page look pretty but that was not the purpose, it is to get the point across how to find the Html on the second tab.

The way you do this is as follows:

• You first start your test, by using the BrowserWindow class and call Launch to start the browser.
• Next you find the HtmlHyperlink to execute the click on the button.
• Now you have the second tab show up, and to locate that tab, you can use the BrowserWindow class again. this time you use the static method Locate and pass it in the title of the document you try to find. In my case that new tab has the Title “New Tab”
• This locate method, returns a new BrowserWindow object that I can use in my subsequent searches for controls. So to find the text on the page I can create an HtmlDiv object, pass it in the SearchProperty Id with the value of “itemToFind” and get the InnerText value of the control to assert in my test.

The code looks as follows:

[TestMethod]
public void TestMultiTabBrowser()
{
    var browserWIndow = BrowserWindow.Launch("http://localhost:7032/");

    // Search for the hyperlink button to open up a new tab
    HtmlHyperlink link = new HtmlHyperlink(browserWIndow);
    link.SearchProperties.Add(HtmlHyperlink.PropertyNames.Id , "newTabHyperlink");

    Mouse.Click(link);

    // now the new tab should be shown, locate that new window and find the inner text

    var browsertab = BrowserWindow.Locate("New Tab");

    // now locate the div and compare the inner text

    HtmlDiv itemtofindOnNewTab = new HtmlDiv(browsertab);
    itemtofindOnNewTab.SearchProperties.Add(HtmlDiv.PropertyNames.Id, "itemToFind");

    Assert.IsTrue(itemtofindOnNewTab.InnerText == "This is the inner text ");

}

And that is it, this is the way to create tests that can work with with multiple tabs in your browser

I have the sample project up here for you to download and test yourself.

If you want to learn more about CodedUI and how this technology works, you might want to check out my course at Pluralsight on CodedUI. You can find it here and even watch it for free if you don’t have an account, by applying for a Trial.

hope this helps,
Marcel

Follow my new blog on http://fluentbytes.com