How to Automate Visual Testing Using Java, Selenium WebDriver and aShot.

So, what is visual software testing? In short, it’s the process of checking the interface that is displayed to the user for compliance with stated requirements. There are several reasons why I want to share the practice of visual software testing with you and why it’s very important to automate this kind of testing.
First, most pages include a lot of elements to check each to be sure that everything is working properly. We must check the fonts, layout, color, location, state, and several other possible factors. This can take a lot of time to check manually. This is the first reason for automated visual testing.
The second reason for automated visual testing is that for many people, this is not a very fun or interesting task to do manually. In fact, it is often very boring.
And finally, let’s not forget about regression testing—or testing for new bugs (regressions). Very often, when developers make changes to a screen, they accidentally create a new bug. How can we make sure that all the screens in the application still match the design? This is the third reason for automated visual testing.
Here’s the basic process and flow for automated visual testing below.

Image 1. Basic process and flow

If you’re interested in getting started with automated visual testing, I suggest using the following tools:

  • Java – programming language;
  • Java imageIO – a class containing static convenience methods for locating ImageReaders and ImageWriters, and performing simple encoding and decoding;
  • Selenium WebDriver – it is a test automation tool;
  • JUnit– library for unit testing Java software;
  • aShot – library for comparing images;
  • Maven– framework for automating project builds.

The aShot library has several useful features that we can use:

  • comparison of screenshots of pages;
  • comparing screenshots of pages + ignoring specified elements (dynamic content, etc.);
  • comparison of screenshots of elements;
  • breakpoints – you can compare screenshots of pages or elements with different widths. The default is 3 breakpoints – 1920px, 768px, 360px;
  • auto-generation of expected screenshots;
  • you can write tests as ordinary functional automation tests, there are no restrictions – this is important because sometimes it may be necessary to perform some complex actions before taking a screenshot.

This set of tools is all we need. Below, I’ll walk you through the steps to get you started.

Preparing the Project

To prepare the project, we will use a conventional structure of a Maven project. First of all, we need to add a dependency aShot to the pom.xml file.

<dependency>
<groupId>ru.yandex.qatools.ashot</groupId>
<artifactId>ashot</artifactId>
<version>1.5.4</version>
</dependency>

After that, add several folders to your project:

  • actualImages – that is the folder where we’ll store actual screenshots that are taken during the test;
  • expectedImages – the folder where we’ll store expected screenshots;
  • markedImages – folder where we’ll store images with mismatched areas highlighted in red (if the test passes, we won’t create any images in this folder).

How to Work with the Framework

First of all, we need to open the page that we are going to verify.
Then we need to move the cursor to the corner of the screen because the presence of a cursor on the screen can give us a wrong test result. We can use the following code to do it:

Robot robot = new Robot();
robot.mouseMove(0, 0);

Then we take a screenshot of the page and save the screenshot to a file.

Screenshot actualScreenshot = new AShot().takeScreenshot(driver);
File actualFile = new File(actualDir + "dashboardActual.png");
ImageIO.write(actualScreenshot.getImage(), "png", actualFile);

The next step is to compare screenshots from the actualScreenshot and expectedScreenshot folders.

Screenshot expectedScreenshot = new Screenshot(ImageIO.read(new File(expectedDir + "dashboardExpected.png")));
ImageDiff diff = new ImageDiffer().makeDiff(expectedScreenshot, actualScreenshot);
int size = diff.getDiffSize();

If the sizes of the images are different, we will create a new image, place it in the “markedImages ” folder and mark the places of differences. And we can also throw an Exception for the test to fall.

if (size != 0) {
File diffFile = new File(markedImages + "test.png");
ImageIO.write(diff.getMarkedImage(), "png", diffFile);
throw new Exception("There are some bugs on the page");
}

In my case result look like on the images below.

Image 2. Actual result

Image 3. Expected result

Image 4. Screenshot with marked the places of differences

In image 4, we can see the difference between the actual and expected screen highlighted in red.

Additional aShot Features:

This tool also has many additional features that can help us create more flexible tests. Some of these features are presented below.

  1. Compare screenshots of the page in all breakpoints:
Comparer.comparePages("test_name");
  1. Compare screenshots of the page in all breakpoints + hide elements (if some elements are not static):
Comparer.comparePages("test_name", new String[]{"css_locator_1", "css_locator_2"});
  1. Compare screenshots of the page only in the specified breakpoint:
Comparer.comparePagesWithBreakpoint("test_name", "1920");
  1. Compare screenshots of the page only in the specified breakpoint + hide elements:
Comparer.comparePagesWithBreakpoint("test_name", "1920", new String[]{"css_locator_1", "css_locator_2"});
  1. Compare screenshots of the specified element in all breakpoints:
Comparer.compareElements("test_name", "css_locator");
  1. Compare screenshots of the specified item only in the specified breakpoint:
Comparer.compareElementsWithBreakpoint("test_name", "1920", "css_locator");
  1. If the page does not fit on one screen, and some browsers do not take a screenshot over the entire height of the page, we can add a shootingStrategy to the screenshot taking with the scrollTimeout argument (value in milliseconds). This is the delay between scrolling and snapshot of the next part of the page.
Screenshot screenshot = new AShot().shootingStrategy(ShootingStrategies.viewportPasting(100)).takeScreenshot(driver)

So, I think you can see that these tools are noteworthy and can help you get started with the automated visual testing process.
 
 

Related Blog Posts

We hope you’ve found this to be helpful and are walking away with some new, useful insights. If you want to learn more, here are a couple of related articles that others also usually find to be interesting:

Our Gear Is Packed and We're Excited to Explore with You

Ready to come with us? 

Together, we can map your company’s tech journey and start down the trails. If you’re set to take the first step, simply fill out the form below. We’ll be in touch – and you’ll have a partner who cares about you and your company. 

We can’t wait to hear from you! 

This field is for validation purposes and should be left unchanged.

Together, we can map your company’s tech journey and start down the trails. If you’re set to take the first step, simply fill out the form below. We’ll be in touch – and you’ll have a partner who cares about you and your company. 

We can’t wait to hear from you! 

Montage Portal

Montage Furniture Services provides furniture protection plans and claims processing services to a wide selection of furniture retailers and consumers.

Project Background

Montage was looking to build a new web portal for both Retailers and Consumers, which would integrate with Dynamics CRM and other legacy systems. The portal needed to be multi tenant and support branding and configuration for different Retailers. Trailhead architected the new Montage Platform, including the Portal and all of it’s back end integrations, did the UI/UX and then delivered the new system, along with enhancements to DevOps and processes.

Logistics

We’ve logged countless miles exploring the tech world. In doing so, we gained the experience that enables us to deliver your unique software and systems architecture needs. Our team of seasoned tech vets can provide you with:

Custom App and Software Development

We collaborate with you throughout the entire process because your customized tech should fit your needs, not just those of other clients.

Cloud and Mobile Applications

The modern world demands versatile technology, and this is exactly what your mobile and cloud-based apps will give you.

User Experience and Interface (UX/UI) Design

We want your end users to have optimal experiences with tech that is highly intuitive and responsive.

DevOps

This combination of Agile software development and IT operations provides you with high-quality software at reduced cost, time, and risk.

Trailhead stepped into a challenging project – building our new web architecture and redeveloping our portals at the same time the business was migrating from a legacy system to our new CRM solution. They were able to not only significantly improve our web development architecture but our development and deployment processes as well as the functionality and performance of our portals. The feedback from customers has been overwhelmingly positive. Trailhead has proven themselves to be a valuable partner.

– BOB DOERKSEN, Vice President of Technology Services
at Montage Furniture Services

Technologies Used

When you hit the trails, it is essential to bring appropriate gear. The same holds true for your digital technology needs. That’s why Trailhead builds custom solutions on trusted platforms like .NET, Angular, React, and Xamarin.

Expertise

We partner with businesses who need intuitive custom software, responsive mobile applications, and advanced cloud technologies. And our extensive experience in the tech field allows us to help you map out the right path for all your digital technology needs.

  • Project Management
  • Architecture
  • Web App Development
  • Cloud Development
  • DevOps
  • Process Improvements
  • Legacy System Integration
  • UI Design
  • Manual QA
  • Back end/API/Database development

We partner with businesses who need intuitive custom software, responsive mobile applications, and advanced cloud technologies. And our extensive experience in the tech field allows us to help you map out the right path for all your digital technology needs.

Our Gear Is Packed and We're Excited to Explore with You

Ready to come with us? 

Together, we can map your company’s tech journey and start down the trails. If you’re set to take the first step, simply fill out the contact form. We’ll be in touch – and you’ll have a partner who cares about you and your company. 

We can’t wait to hear from you! 

This field is for validation purposes and should be left unchanged.

Thank you message.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.