How to resize your browser window to test responsive design with CodedUI

*Moved to: http://fluentbytes.com/how-to-resize-your-browser-window-to-test-responsive-design-with-codedui/

A question I have had a lot lately is 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 the BrowserWindow.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.

Here you have a Extension method that I created to fix this issue

 

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)
    {
        //Call the native method to resize the window
        SetWindowPos(control.WindowHandle ,(IntPtr)(-1), 0, 0, width, height, 0x0002 | 0x0040);
    }
}

The way you make this work in your CodedUI tests is as follows:

[TestMethod]
public void CodedUITestMethod1()
{
    //BrowserWindow.CurrentBrowser = "chrome";
    //BrowserWindow.CurrentBrowser = "firefox";
    var bw = BrowserWindow.Launch("http://getbootstrap.com/2.3.2/");
    // first maximize the browser
    bw.Maximized = true;
    HtmlHyperlink link = new HtmlHyperlink(bw);
    link.SearchProperties.Add(HtmlHyperlink.PropertyNames.InnerText, "Base CSS");
    // now set the control to always search and eliminate the cache
    // so it will search again when I resize the window
    link.SearchConfigurations.Add(SearchConfiguration.AlwaysSearch);
    
    Mouse.Click(link);

    // now resize the browserwindow to the size of the mobile
    // e.g.:
    // QVGA: quarter VGA (240×320 pixels)
    // HVGA: half VGA (320×480 pixels)
    // WVGA: wide VGA (480×800 pixels)
    // FWVGA: full wide VGA (480×854 pixels)
    // nHD: one-ninth high definition (360×640 pixels)
    // qHD: one-quarter high definition (540×960 pixels)
    bw.ResizeWindow(480, 800);
    // now go back ant try again
    bw.NavigateToUrl(new Uri("http://getbootstrap.com/2.3.2/"));
    // now try and search for the control again, this should fail, because 
    // it is now initialy hidden
    // I need to reveal it first before I can click
    bool exceptionraised = false;
    try
    {
        Mouse.Click(link);
    }
    catch (Exception) { exceptionraised = true; }

    Assert.IsTrue(exceptionraised);
}

Hope this helps you solve this little inconvenience …

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

Share this