How to Perform Visual Regression Testing using WebdriverIO

Visual regression try ensures that web applications preserve to look how they ’ re supposed to after updates or changes by helping to detect unintended visual discrepancies, like layout shift and missing elements.

This usher ply an in-depth overview of performing use WebdriverIO.

What is Visual Regression Testing?

, to be specific, is intended to check that any codification changes did not affect the UI by comparing screenshots from before and after. Visual regression tests are significant in identifying whether the visual errors experience occurred after get changes to the code. It can be integrate into the live test framework like WebdriverIO using tools that support visual tests.

Visual Regression Testing with WebdriverIO Framework

WebdriverIO is a JavaScript mechanization framework for mobile and web applications. It lets you automatize browser interaction expend Selenium Webdriver or WebDriver protocol and supports a wide range of try scenarios.

WebdriverIO is an effective tool for performing optical testing as it provides an API for persona comparison. It provides service like Wdio-image-comparison-service to compare images in various platforms such as browsers, mobile browsers, and hybrid coating.

What is Wdio-image-comparison-service?

Wdio-image-comparison-serviceis a WebDriverIO plugin used to dovisual fixation testing. It allows you to compare screenshots of your web coating to antecedently captured baseline image.

If there are conflict, it emphasizes the changes. This helps ascertain that new code changes don ’ t unintentionally involve the visual appearing of the application.

It desegregate seamlessly with WebDriverIO, a popular for web applications.

Use Cases of Wdio-image-comparison-service

Wdio-image-comparison-serviceparticularly useful in agile development environments where frequent updates are create, cater developers with the confidence that their modification haven & # 8217; t broken the UI. Below are some key use cases where the service provides substantial benefits.

• Visual Regression Testing: This is the chief use case. It ensures that UI change don & # 8217; t separate the layout or visual components of the covering. Any optical difference between the baseline and the current screenshots are sag.
• : It help check if the application appear reproducible across multiple browser. The image equivalence service can name browser-specific issues by comparing screenshots from different browser.
• UI Consistency Verification: As squad develop new feature, it & # 8217; s crucial to check that the UI remains consistent. The Wdio-image-comparison-service can get any unintended style changes or layout transmutation.
• Integration: It work effortlessly within aContinuous Integration/Continuous Deployment (CI/CD)grapevine. As developers advertize updates, automatize ocular tests can run, ensuring no visual glitch are introduced during deployment.
• Performance Monitoring: Visual changes may indicate potential performance issues like slow-loading picture or unoptimized elements. Image comparison can help monitor and report these issue betimes.

How to Run Visual Regression Test expend WebdriverIO

Visual regression testing ensures that the visual appearing of your web covering remains reproducible across different versions and browsers.

Using WebDriverIO, an mechanisation tool for browser examination, you can easily get screenshots of your application and compare them to baseline images to observe any visual discrepancies. This approach helps in ensuring UI eubstance throughout development cycles.

This guide continue the process of put up WebDriverIO for visual fixation testing, configuring the picture comparison service, indite tests, and reexamine the results.

1. Install WebDriverIO and Required Packages

First, instal WebDriverIO and the necessary dependencies for visual fixation examination:

npm init wdio.

npm install -- save-dev @ wdio/cli @ wdio/local-runner wdio-image-comparison-service webdriverio

2. Configure WebDriverIO

Create or update your wdio.conf.js shape file to include the persona comparison service.

2.1 Add the wdio-image-comparison-service to the service array:

services: ['image-comparison '],

2.2 Configure the imageComparison options:

exports.config = {services: ['image-comparison '], imageComparison: {baselineFolder: './tests/baseline ', // Folder to store baseline images formatImageName: ' {tag} ', // Format for make picture screenshotPath: './tests/screenshots ', // Folder to store screenshots savePerInstance: true, // Save screenshot for every instance autoSaveBaseline: true, // Auto-save new baseline if test pass scaleImages: false, // Set to true if scaling ikon is needed blockOutStatusBar: true, // Block out condition bars in screenshots},};

3. Capture a Baseline Image

Before running tests, you need to capture baseline images for comparison. For this, use the following bid:

wdio run wdio.conf.js

This will take screenshots of your web application and store them in the baselineFolder defined in the shape file.

4. Write a Visual Regression Test

Now, write a simple test script to capture a screenshot and compare it with the baseline image:

describe ('Visual Regression Test ', () = & gt; {it ('should not have visual discrepancies with the baseline screenshot ', async () = & gt; {await browser.url ('https: //your-web-app.com '); // Capture screenshot and equivalence await look (browser) .toHaveScreenshot ({gens: 'homepage' // Name of the screenshot for comparison});});});

5. Run the Test

Run your trial script again:

wdio run wdio.conf.js

The trial will compare the current screenshot to the baseline image and report any differences.

6. Review Test Results

After the trial dispatch, WebDriverIO will generate a comparison report. If any visual discrepancy are found, they will be highlighted, and the exam will fail.

This process will aid you set up and run visual fixation tests using WebDriverIO.

Functions available in WebdriverIO for Image Comparison

1. browser.saveScreen (“ ”);

SUSA automates exploratory testing with persona-driven behavior, catching bugs that scripted automation misses.

This command will salve the whole blind that is in the view. It will neither scroll down or up, just capture the current screen.

Example:

await browser.saveScreen (`` examplePaged ''); await await (await browser.checkScreen (`` examplePaged ''})) .toEqual (0);

The first line save the screen and thecheckScreenliken the saved blind in the baseline to the current screen that the framework is capturing.

2. browser.saveElement (“ elementId ”);

This dictation will captivate and salvage a exceptional factor that we wish to capture. We surpass the locator in the use.

Example:

await browser.saveElement (await $ (`` //input [@ name= ' q '] '')); wait expect (await browser.checkElement (await $ (`` //input [@ name= ` q `] '')) .toEqual (0);

In the above example, the first line saves a screenshot of an element with the afford locator. Whereas, the second line expects the saved element and checks utilise thecheckElement command.

3. browser.SaveFullPageScreen ();

This command will capture and save the full page. It will scroll downwardly and up to trance everything that is present in the present screen and save them.

Example:

await browser.saveFullPageScreen (`` fullPage ''); wait expect (await browser.checkFullPageScreen (`` fullPage '')) .toEqual (0);

From the above representative, the first line accepts an argument to save the full page screen. The second line chit whether the saved screen and the current blind are equal using thecheckFullPageScreen command.

4. browser.saveTabbablePage ();

The above command save a full-page screenshot inclusive of all the tab executions.

Example:

await browser.saveTabbablePage (`` save-tabbable ''}); await expect (await browser.checkTabbablePage (`` check-tabbable '')) .toEqual (0);

From the above example, the first line saves the tab executions. The second line captures and compares the tabs in the current page apply the checkTabbablePage command.

Baseline persona are preserve in the folder namedbaselineBuild.The test execute images are captured in.tmpfolder which bear both actual and diff folders which compare the actual and different images.

Using Percy tool for Visual Testing

is ocular testing as a service platform. Percy.io enables you to review visual changes in your application and offers a toolkit for you to get started with visual testing in whatever framework you are using.

Setup

1. Ensure you have Node.js install in your estimator
3. Run the next command from your root work directory to establish Percy.

npm install -- save-dev @ percy/cli @ percy/webdriverio

After installing all the packages, yourpackage.jsonshould be something like this.

Performing Visual Regression Testing using WebdriverIO and Percy

To begin with, we need to create a project in Percy. After logging in with Percy, click on the Create Project and inscribe the project gens.

Once you create the project, you will land on the project dashboard. You will see a singular project token generated. Pass the token in your terminal to incorporate the project with Percy.

Talk to an Expert

Writing Tests with Percy

Now, let ’ s write our tryout case to compare the screenshots with Percy.

const percySnapshot = require (`` @ percy/webdriverio ''); describe ('webdriver.io page ', () = & gt; {it ('should have the correct title ', async () = & gt; {await browser.url ('https: //webdriver.io '); await expect (browser) .toHaveTitle ('WebdriverIO · Next-gen browser and mobile automation test fabric for Node.js | WebdriverIO '); await percySnapshot (browser, 'webdriver.io page ');});});

Initially, we need to require Percy in our exam file. We are compose our test lawsuit using Mocha with describe and it block. We are navigating to the WebdriverIO URL and expecting the title to have WebdriverIO. With thepercySnapshotcommand, we are capturing the screenshot.percySnapshotaccepts three contention.

percySnapshot (browser, & lt; snapshotName & gt;, & lt; options & gt;)

Running the Test

Now, let us run our Percy test case. For it, we want to configure the command in ourpackage.jsonfile. Add this command under scripts.

`` test: Hotspur '': `` percy exec -- wdio run wdio.conf.js ''

To run the test, passnpm run exam: percycommand in your depot. Once you run the tryout, you should see the Percy escape bidding and yield a connectedness to the Percy.

In the above screen, you can see a connection (Finalized build # 9) has be render. When you open the link in the browser, you can see the snapshot of the test in the Percy dashboard. It should look something like this.

Why Use Percy for Visual Regression Testing

improves visual fixation testing in WebdriverIO by adding AI-driven truth, reliable change catching, and streamlined collaboration across teams. It enhances the traditional screenshot comparability workflow by reducing false positive and providing clear insight into every ocular update.

: 

• Effortless Visual Regression Testing:Percy desegregate easily into CI/CD line and works with functional test suites, Storybook, and Figma. It supports other visual validation to help teams identify subject before they reach product.
• Automated Visual Regression:Percy captures screenshots on every commit and compares them with existing baseline. It flags layout displacement, style changes, and component issues so team can review updates with self-confidence.
• :The Visual AI Engine filters out noise from dynamical banners, animations, and former precarious elements. Intelli Ignore and OCR assist Percy focus on meaningful modification that matter for user experience and trim false positives.

• :Percy highlighting important changes with bounding boxes and provides clear sum-up. This meliorate review speed and reduces the time spent formalize visual updates.
• No Code Visual Monitoring:Visual Scanner enables rapid setup without installation. It scans and monitors big set of URLs across many browsers and device. It endorse scheduled scans, region-based ignores, and environment comparisons.
• Flexible and Comprehensive Monitoring:Percy indorse hourly, daily, weekly, or monthly monitoring. It works with authenticated pages, local examination workflow, and environment comparing to aid teams detect issues before liberation.
• Broad Integrations:Percy incorporate with major frameworks and CI tools. Its SDKs support quick onboarding and allow team to scale visual testing with ease.

Pricing Details for Percy:

• Free Plan:Available with up to 5,000 screenshots per month, ideal for getting depart or for modest projects.
• Paid Plan:Starting at $ 199 for advanced features, with custom pricing available for enterprise plan.

Differences in scat with WebDriverIO exclusively vs WebDriverIO + Percy

Now, we saw how to perform Visual testing habituate WebdriverIO and Percy. We ’ ll comparison both the service to understand how they are useful in Visual examination.

WebdriverIO for Visual Regression Testing

Pros

• Service is maintained actively
• Open-source
• Feature-rich (Allows customise testing types)
• Backed by OpenJS Foundation

Cons

• Requires external boilerplate for StoryBook
• The reporting for the WebdriverIO image comparison service is not very clear and it might be unmanageable to name the genuine and different results.

WebDriverIO + Percy for Visual Regression Testing

Pros

• Actively maintained and updated
• Easy Storybook compatibility
• Owned by BrowserStack
• Compatible with several testing frameworks like Selenium, Cypress, WebdriverIO, NightWatch, NightmareJS, Puppeteer, and many more.
• Open and excellent coverage (easy to compare the real and different results)
• Cross-browser visual testing

Cons

• It is quite expensive when we opt for business-level initiative

Conclusion

In conclusion, visual regression testing plays a crucial part in ensuring the lineament and consistency of web application. Tools like WebDriverIO and Percy make it easier to automate these tests, helping to catch UI issues betimes on. WebDriverIO, with its wdio-image-comparison-service offers a flexible solution for integrating optic testing within your live automation setup. Meanwhile, Percy provides a powerful, scalable creature with seamless integration into CI/CD pipelines, cross-browser support, and advanced comparison features.

By contain these tools into your workflow, you can reduce the luck of ocular glitch making their way into production, improve team collaborationism, and control a consistent user experience.

Useful Resources for Optical Testing

Frequently Asked Questions

1. How execute visual fixation testing differ from functional examination in WebdriverIO?

Functional tests validate whether an application acquit correctly. Optic fixation tests focus on how the UI looks. They detect layout shifts, style issues, and visual shortcoming that functional tests often miss.

2. When should I use visual regression testing in a WebdriverIO project?

Visual fixation testing is utilitarian when an application undergoes frequent UI changes or supports multiple browsers and devices. It helps keep consistent design quality and prevents unintended visual updates from reaching production.

3.How do I manage and update baseline ikon in WebdriverIO?

Baseline images should be store in version control so teams can track knowing UI changes. When design updates are approved, running the tests again yield new baseline that supercede the older ones.

Related Guides