TestVagrant

Visual Regression Testing with WebDriverIO

visual regression testing with webdriver io
  • Blog

Blog

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 in “baseLineImages” 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….

Share This Article

Other Related Articles

See More Articles
See More Articles
Scroll to Top