Click here to Skip to main content
13,897,030 members
Click here to Skip to main content
Add your own
alternative version

Tagged as

Stats

6K views
2 bookmarked
Posted 5 Jun 2016
Licenced Ms-PL

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

, 5 Jun 2016
Rate this:
Please Sign up or sign in to vote.
Tips and Tricks how to perform visual UI automation. Various techniques to assert the visual state of your web pages- fonts, styles. Visual capturing.The post 5 Expert Tips and Tricks for Visual UI Automation Verification- Testing Framework appeared first on Automate The Planet.

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 <span class="bold_text">Attributes</span> collection and select them via LINQ queries. You need to add a using statement for <span class="bold_text">System.Linq</span>

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. <span class="bold_text">System.Drawing</span> 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 <span class="bold_text">Save</span> method of the Bitmap class to save the image on the disk. You need a reference to <span class="bold_text">System.Drawing</span>.

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 <span class="bold_text">PixelMap</span> class to compare images. You can load the expected image as Bitmap via the <span class="bold_text">I</span><span class="bold_text">mag</span><span class="bold_text">e</span> static class. The <span class="bold_text">Compare</span> PixelMap's method accepts a second parameter- tolerance percent.

Official Documentation

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

Telerik Testing Framework Series

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

License

This article, along with any associated source code and files, is licensed under The Microsoft Public License (Ms-PL)

Share

About the Author

Anton Angelov
CEO Automate The Planet
Bulgaria Bulgaria
Anton Angelov is an IT Consultant and Quality Assurance Architect at Innovative Lab. He is passionate about automation testing and designing test harness and tools, having the best industry development practices in mind. In addition, he is an active blogger and the founder of Automate The Planet. He strives to make the site one of the leading authorities in Automation Testing by presenting compelling articles, inspiring ardent discussions amongst the community. He is also one of the most-rated-answer authors of questions about Test Automation Frameworks (WebDriver) on Stack Overflow.

You may also be interested in...

Comments and Discussions

 
-- There are no messages in this forum --
Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web06 | 2.8.190306.1 | Last Updated 6 Jun 2016
Article Copyright 2016 by Anton Angelov
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid