TestVagrant
Published in

TestVagrant

Visual Regression Testing with WebDriver IO

What is Visual Regression Testing?

Visual regression testing is the process of validating visual parts of an application or website to ensure that code modifications do not introduce any unintentional changes. It aims to prevent any user interface bugs when implementing new site functionalities or adding new elements.

Importance Of Visual Validation Testing:

No matter how correctly the functionality of your application is working, it won’t be of use to the customer unless it can provide a good user interface and user experience. Ex : Layout design,Positioning, Shape and Size of each element.

Developing modern apps and websites require a good code validation process. Integration and unit tests are a must, but often they do not cover all the changes that are introduced by developers. From a frontend perspective, creating a new component or making simple style adjustments may cause some visual glitches in the other parts of the application.

In today’s practices of continuous integration, visual regression testing becomes very important to ensure that the new changes do not cause any mess in the layout as the application develops from version to version and progresses across browsers.

Out of many Visual Testing tools this article focuses on “wdio-image-comparison-service” with webdriverIO.

About wdio-image-comparison-service:

“wdio-image-comparison-service is a lightweight WebdriverIO service for browsers / mobile browsers / hybrid apps to do image comparison on screens, elements or full page screens”

1.Save or compare screens/elements /full page screens against a baseline

2. Automatically create a baseline when no baseline is there

3.Use different comparison methods

Steps to start with :

1.Install image-comparison-service

npm install — save-dev wdio-image-comparison-service

2.Add image-comparison service as below in wdio.conf.js, this includes folder path and plugin options. More plugin options can be found here

3. Add baseline images, you can add baseline images inbaseLineImages” folder manually or you can follow next step directly.

Baseline Images

4. Add tests for visual tests as below, which does assertion against baseline images.

If you are executing test first time without having baseline images then it will auto generate baseline images and prints info in console as below

Console logs

5.Verify results in “actualImages/diff” with an ‘actual’ subfolder that contains images from the actual test run. If there is any difference to the baseline image it will be a part of diff subfolder.

The diff image shows the differences between the current run and baseline so you can easily identify potential issues. Below image shows the differences in different color so that we can identify the errors easily.

Image Comparison result

As you can see, WebdriverIO and image comparison service has a lot of options and possibilities so it is worth exploring the documentation to see how they can help design and run specific tests!

References:
https://webdriver.io/docs/wdio-image-comparison-service/

Happy Reading….

--

--

--

Testvagrant is a test engineering company which helps shape the testing strategy and take Products a step closer to having a faster, accurate, and more predictable release.

Recommended from Medium

How To Use Bootstrap 5 — Part 1

Repeat Code with LeetCode — Fruits Into Baskets

DIO IN FLUTTER

Why You Need a Good Logging System for Your Applications

Microsoft Exam 70–483 — Programming in C#: Overview and Journey’s Setup

UNIWA 2021 CTF: Fast Calculator Writeup

Decentralised Code Snippet Organiser for Developers

Pre-implementation analysis as a “guarantee” of your IT project success

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Pavan Kumar S

Pavan Kumar S

LEAD SDET | Test Vagrant Technologies

More from Medium

How to Choose Mobile Devices for Testing?

Visual Regression-WebdriverIO

Adopting QA Tools & Frameworks

Software Testing Strategy for QA Localization — Part 1