5 Expert Tips and Tricks for Visual UI Automation Verification - Testing Framework

• Download full source code

Introduction

I believe that Visual UI Automation Verification is something that should not be ignored. Asserting the different styles on your most important pages is a must. I will show you how to assert various parts of your pages like font sizes, font families, proper element location and even more. For the job once again, I am going to use Testing Framework. You can find more advanced techniques in my series dedicated to Testing Framework.

Visual UI Automation Verification Tips and Tricks

1. Extract an Individual HTML Attribute

[TestMethod]
public void ExtractIndividualHtmlAttribute()
{
    manager.ActiveBrowser.NavigateTo(
        "http://automatetheplanet.com/healthy-diet-menu-generator/");
    HtmlImage healthyBurgerImage = 
        manager.ActiveBrowser.Find.ByXPath<HtmlImage>(
        "/html/body/div[1]/div[3]/section/article/div/div[2]/a/img");
    string altAttributeValue = 
        healthyBurgerImage.Attributes.Single(x => x.Name == "alt").Value;
    Debug.WriteLine(altAttributeValue);
}

In order to validate the state of a web page, you should be able to extract the different HTML elements' attributes. You can access them through the Attributes collection and select them via LINQ queries. You need to add a using statement for System.Linq. 

Official Documentation

2. Testing Framework Annotator

The annotator displays in the browser window the actions that Testing Framework is performing along with highlighting the UI element that it is acting upon. I found it quite useful when the test execution is video recorded or when the test failure state of the page is captured as an image.

[TestMethod]
public void PlayWithAnnotator()
{
    manager.ActiveBrowser.NavigateTo(
        "http://automatetheplanet.com/healthy-diet-menu-generator/");
    HtmlImage healthyBurgerImage = manager.ActiveBrowser.Find.ByXPath<HtmlImage>(
        "/html/body/div[1]/div[3]/section/article/div/div[2]/a/img");
    HtmlInputCheckBox additionalSugarCheckbox = 
        manager.ActiveBrowser.Find.ById<HtmlInputCheckBox>("ninja_forms_field_18");
    additionalSugarCheckbox.Check(
        isChecked: true, 
        invokeOnChange: true, 
        invokeOnClickChanged: true);

    // Add rectangle around element + custom message
    Annotator annotator = new Annotator(manager.ActiveBrowser);
    annotator.Annotate(
        healthyBurgerImage.GetRectangle(), 
        "This is the most healthy meal EVER! Honestly!");
}

Through the last part of the code, I showed how you could add custom messages and mark important elements. System.Drawing using statement is required.

Official Documentation

3. Visual Capturing

[TestMethod]
public void VisualCapturing()
{
    manager.ActiveBrowser.NavigateTo(
        "http://automatetheplanet.com/healthy-diet-menu-generator/");
    HtmlDiv mainArticleDiv = 
        manager.ActiveBrowser.Find.ByXPath<HtmlDiv>(
        "/html/body/div[1]/div[3]/section/article/div");
    System.Drawing.Bitmap browserImage = manager.ActiveBrowser.Window.GetBitmap();
    System.Drawing.Bitmap divimage =
    manager.ActiveBrowser.Window.GetBitmap(mainArticleDiv.GetRectangle());
    string browserImagePath =
        Path.Combine(
            AppDomain.CurrentDomain.BaseDirectory, 
        string.Concat(Guid.NewGuid().ToString(), @".bmp"));
    browserImage.Save(browserImagePath);
    string mainDivImagePath =
        Path.Combine(
            AppDomain.CurrentDomain.BaseDirectory,
            string.Concat(Guid.NewGuid().ToString(), @".bmp"));
    divimage.Save(mainDivImagePath);
}

You can generate a bitmap image of the visible part of the browser through the window's GetBitmap method. The same method has an overload that accepts an element and captures only him. You can use the Save method of the Bitmap class to save the image on the disk. You need a reference to System.Drawing.

Official Documentation

4. Verify HTML Styles

[TestMethod]
public void VerifyHtmlStyles()
{
    manager.ActiveBrowser.NavigateTo(
            "http://automatetheplanet.com/healthy-diet-menu-generator/");
    HtmlImage healthyBurgerImage = manager.ActiveBrowser.Find.ByXPath<HtmlImage>(
        "/html/body/div[1]/div[3]/section/article/div/div[2]/a/img");
    HtmlControl mainHeadline =
        manager.ActiveBrowser.Find.ByXPath<HtmlControl>("/html/body/div[1]/div[2]/div/h1");
    mainHeadline.AssertStyle().Font(
        HtmlStyleFont.Family, 
        "Lato,sans-serif", 
        HtmlStyleType.Computed, 
        StringCompareType.Exact);
    mainHeadline.AssertStyle().Font(
        HtmlStyleFont.Size, 
        "33px", 
        HtmlStyleType.Computed,
        StringCompareType.Exact);
    mainHeadline.AssertStyle().ColorAndBackground(
        HtmlStyleColorAndBackground.Color, 
        "#000000", 
        HtmlStyleType.Computed, 
        StringCompareType.Exact);
    mainHeadline.AssertStyle().ColorAndBackground(
        HtmlStyleColorAndBackground.BackgroundColor,
        "#FFFFFF", 
        HtmlStyleType.Computed, 
        StringCompareType.Exact);
}

Through the AssertStyle method, you can verify various properties of the visual elements like font size, background colour, font style or font family. For large companies, the visual branding is crucial and as test automation engineers, we should make sure that it is asserted, at least on the most relevant pages.

Official Documentation

5. Image Comparison

[TestMethod]
public void ImageComparison()
{
    manager.ActiveBrowser.NavigateTo(
        "http://automatetheplanet.com/healthy-diet-menu-generator/");
    HtmlDiv mainArticleDiv =
        manager.ActiveBrowser.Find.ByXPath<HtmlDiv>(
        "/html/body/div[1]/div[3]/section/article/div");
    System.Drawing.Bitmap divimage = 
    manager.ActiveBrowser.Window.GetBitmap(mainArticleDiv.GetRectangle());

    Bitmap expectedbmp = (Bitmap)Image.FromFile("mainArticleDivExpected.bmp", true);
    PixelMap expected = PixelMap.FromBitmap(expectedbmp);
    PixelMap actual = PixelMap.FromBitmap(divimage);

    Assert.IsTrue(expected.Compare(actual, 5.0));
}

You can use the Testing Framework's PixelMap class to compare images. You can load the expected image as Bitmap via the Image static class. The Compare PixelMap's method accepts a second parameter- tolerance percent.

Official Documentation

You can find more code examples in the official framework's documentation.

• Download full source code

Telerik Testing Framework Series

• Advanced Web UI Components Automation with Telerik Testing Framework
• Getting Started with Telerik Testing Framework C# in 10 Minutes
• Relevealed: How to Create Universal Dialog Handlers Testing Framework

The post Revealed: How to Create Universal Dialog Handlers Testing Framework appeared first on Automate The Planet.

All images are purchased from DepositPhotos.com and cannot be downloaded and used for free.
License Agreement