Resizing browser window using CodedUI

How to test your websites responsive UI design with codedUI.

The main requirement here is that you would be able to check if you can enter values on a specific screen in different browsers in different window sizes.

So starting the browser in CodedUI is simple, you just use the BrowserWindow class and call the Launch method to start the browser in a reliable way. Starting different browsers (Chrome, firefox) is also possible by just setting theBrowserWindow.CurrentBrowser to a value of “chrome” or “firefox” so that is already solved.

The main issue is the size of the browser window. For the responsive UI to show, you need to run a test case in e.g. different screen sizes. Unfortunately there is no method on the BrowserWindow class to set the screen size of the browser.

But there is an easy fix for that.

The BrowserWIndow class has a property called WindowHandle. We can use this property to call a windows API to resize the window.

First an extension method if to be defined as below.

    public static class BrowserWindowExtensions
    {
        [DllImport("user32.dll", SetLastError = true)]
        [return: MarshalAs(UnmanagedType.Bool)]
        internal static extern bool SetWindowPos(IntPtr hWnd, IntPtr hwndInsertAfter, int x, int y, int cx, int cy, uint uFlags);
        public static void ResizeWindow(this BrowserWindow control, int width, int height)
        {
            SetWindowPos(control.WindowHandle, (IntPtr)(-1), 0, 0, width, height, 0x0002 | 0x0040);
        }
    }

then the TestMethod looks as shown below

        [TestMethod]
        public void BrowserResizing()
        {
            //define for Chrome
            BrowserWindow.CurrentBrowser = "Chrome";
            BrowserWindow myb = BrowserWindow.Launch();
            myb.NavigateToUrl(new System.Uri("http://bing.com/"));
            myb.Maximized = true;
            BrowserWindowExtensions.ResizeWindow(myb, 480, 800);
        }
the same is applicable for IE and Firefox.

CodedUI for CrossBrowser testing

For testing any web application, it would naturally be best to test it with all of the most popular browsers.

It’s easy to feel like you’re doing the same thing over and over again. What works in one browser doesn’t always work in other browsers. As a result, you end up in testing every single feature on all the major browsers that easily multiplies the time required for QA. Manually testing cross browser is time consuming and tedious process that is inefficient and conflicts with Today’s short development cycles. Hence the functional automation written once should be liable to run in all supporting browsers

In this post, I’ll demonstrate how this problem might be resolved in a simple way by creating coded UI test cases that will execute against any modern browser, using only C#.

Coded UI, inbuilt supports Internet Explorer.

To run the same functional tests in other browsers using Coded UI tests against Chrome or Firefox using the Selenium cross-browser plugin and this is how you do it

1. Download the Cross-browser plugin for Coded UI Test that uses Selenium to run tests against Chrome and Firefox from here: Selenium cross-Browser plugin

2.  After installing the Cross-Browser testing installer, verify that

Microsoft.VisualStudio.TestTools.UITest.Extension.CrossBrowserProxy.dll
is found in the following location :

“%ProgramFiles%\Common Files\microsoft shared\VSTT\Cross BrowserSelenium Components” (for 32 bit machines)

“%ProgramFiles(x86)%\Common Files\microsoft shared\VSTT\Cross BrowserSelenium Components” (for 64 bit machines)

• Make sure to have all these file in the above mentioned path :
  

3. Record a Coded UI test in IE

4. Change the browser to run the same test against Chrome using the BrowserWindow object i.e.

BrowserWindow.CurrentBrowser = "Chrome";   //For Chrome

BrowserWindow.CurrentBrowser = "FireFox";   //For Chrome

Web browsers evolve continuously and you may not realize when this happens. Sometimes this means certain features aren’t available in the new browser version, which in turn causes some tests to fail, even if they were passed previously. That’s why it’s important to disable automatic browser updates and wait until the new version is supported by the Selenium components for Coded UI Cross-Browser Testing. Otherwise, unexpected exceptions might occur during run time.

Note:

• Currently, Coded UI supports Firefox 25.0.1 version
• Chrome 21 Plus version
• IE9 /IE10/IE11
• Apple Safari is not supported
• The action of starting the web browser must be part of Coded UI Test. If you have a web browser already open and you want to run test on it, the playback will fail  unless you are using Internet explorer. Therefore it is a best practice to include the startup of browser as part of Coded UI Tests.