Automated Visual Testing with Selenium

What is Visual Testing?

Visual Testing is a testing technique that focuses on verifying UI elements, such as buttons, images, forms, and more, by comparing images and identifying any undesired changes between different versions of the system under test.

How does it work?

As mentioned earlier, Visual Testing works based on capturing images in specific UI locations that need to be verified.

To perform these captures and verifications, at least two test executions are required.

During the first test execution, an initial capture called the Baseline is taken, which serves as the reference point for comparing each subsequent execution. This capture can be of the entire UI or a specific component (buttons, forms, images, etc.). The Baseline represents the correct state of the system as expected.

In subsequent executions, a new capture called the Checkpoint is taken and compared to its corresponding Baseline to check for any visual differences. If there are any visual differences, the execution fails, indicating that there have been unexpected changes in the UI or its components.

Using Visual Testing with automation testing tools like Selenium allows us to create end-to-end test flows that verify not only the functional behavior of the system but also the visual aspects of the UI that we want to maintain.

To facilitate management and organization, the image files are stored in separate directories using the same file name, making it easy to handle and compare them. Typically, using mnemonic file names helps understand the exact moment or screen where the visual verification is performed. For example, “New_User_Registration.png”.

Application Scenarios

Visual Testing can be applied in a wide range of scenarios within automated testing.

Some of these scenarios include:

• Regression Testing: visually verify that code changes have not introduced unexpected visual errors in the user interface.
• Integration Testing: confirm that different components of an application integrate correctly and maintain a consistent appearance.
• Browser Testing: validate that the application looks and functions correctly in different web browsers and versions, avoiding visual compatibility issues.
• Design Changes Testing: verify that changes in the design or appearance of the application are implemented correctly and do not negatively affect the user experience.
• Platform Changes Testing: verify that changes in the underlying software do not affect the system.

AShot

To perform this type of testing, we use AShot, an open-source library that simplifies screen capturing, image comparison, and other associated functionalities that facilitate Visual Testing.

Key Features:

• Full-page captures: capture the entire web page, including parts that are not visible in the browser window.
• Element capturing: capture specific HTML elements of the UI, such as buttons, forms, images, etc.
• Image comparison: provide functions for comparing images, useful for detecting visual differences between screen captures. As mentioned earlier, baseline and checkpoint images are saved with the same name to facilitate searching and comparison.
• Advanced configuration: AShot allows configuring various options, such as excluding certain areas of the page, adjusting tolerance margins in comparisons, capturing headers and footers, and more.

ExtentReports

To facilitate reading and analysis of results, we integrate reporting libraries that provide detailed execution reports in various formats such as HTML, PDF, etc.

Thanks to this integration, we collect information about both successful and failed tests. If any differences are detected between the baselines and their corresponding checkpoints, they are immediately displayed in the report.

The report not only provides a summary but also helps visualize and understand the execution results. It plays a vital role in test automation.

To achieve this, we use the ExtentReports library, a reporting tool for test automation projects that allows generating interactive and visual reports in formats such as HTML, email, and more. The reports are customizable and can be adapted to the needs of each project.

https://extentreports.com/

What does our Selenium Visual Testing Template consist of?

It is a generic test automation project based on Selenium WebDriver (Java) that is already configured and integrated with AShot and ExtentReports. It serves as a starting point for practicing, learning, and applying Visual Testing in projects.

It provides all the necessary functionalities to simplify visual test automation using AShot. This streamlines the configuration and development processes while minimizing the learning curve and technical level required for implementation.

Additionally, thanks to the integration with the ExtentReports library, it provides greater visibility and tracking of test execution results with clear and easily understandable reports.

What functionalities does the Template contain?

The main functionalities included in the template for visual testing are:

• Window and HTML element (DOM) handling
• Capture different screenshots depending on the need
• Simulate user actions on the web
• Multibrowser support (Chrome, Firefox, Edge)
• Verifications
• Analysis of execution results (ExtentReports)

Conclusions

Using the visual testing template significantly enhances the security and reliability of quickly and accurately validating the state of the user interface. This image comparison-based approach not only ensures the accuracy of the evaluation but also offers the flexibility to examine specific areas of interest, whether it’s the current view of the user on a web page or the entire page, without the need for scrolling. Additionally, it has the ability to omit parts and elements of the web, adding an additional layer of efficiency to the tests.

The versatility of this approach is remarkable, as it is compatible with any platform, device, or operating system.

Furthermore, the integration of reporting in this template provides greater visibility and tracking of test execution results, facilitating more informed decision-making. In summary, using a visual testing template with integrated reporting significantly improves the effectiveness and efficiency of automated testing, providing confidence in the quality of the software.

To enhance your visual testing skills and simplify your automation processes, we invite you to explore our GitHub repository, where you will find the Visual Testing Automation Template with Selenium.