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 T﻿esting ﻿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

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. 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.

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. 3. Visual Capturing

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. 4. Verify HTML Styles

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. 5. Image Comparison