TestVagrant

Visual Regression Testing using Percy

visual regression testing using percy
  • Blog

Blog

Visual Regression Testing using Percy

In previous blog we learnt what is Visual Testing and how to use image-comparison-service, this article describes how to perform Visual Testing using Percy.

What is Percy:

Percy helps teams automate visual testing. It captures screenshots, compares them against the baseline, and highlights visual changes. With increased visual coverage, teams can deploy code changes with confidence with every commit.

Percy projects correspond with the apps, sites, or component libraries you want to test. you can add visual testing to all E2E testing tools listed here.

This article focuses on how to integrate Percy with WebdriverIO.

  1. Percy is available with Browserstack, you need to a create account and project, it will show the token for your project as below.

2. Install @percy/webdriverio

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

3. Write a test script with webdriverIO

Test Script

4. Set PERCY_TOKEN environment variable based on OS you are using

Setting up PERCY_TOKEN

5. Execute the test, if the configuration is correct you will get logs as below

Execution logs

After execution, it shows the build number where it has uploaded the snapshot.

6. Check the build in percy.io for results, you can configure for results “Auto-approved” or you want to manually approve the build after checking the results.

Click on the latest build, on first execution base image will not be present it will look like the below screenshot.

7. On the second execution visual comparison it will show the result below.

If any differences with the baseline image during execution it will highlights mismatches in a different colour.

Mismatch in the latest execution and previous execution

Visual review workflow:

Now that you’ve seen your first visual diff, If you’re happy with your changes, you can approve individual snapshots or hit “Approve all” to signify that everything looks good.

Alternatively, if the detected changes were unintentional or otherwise are not ready to be merged, marking them as “Changes requested” will block the build from being approved. This feature, coupled with snapshot comments, makes it easy for teams to collaborate and stay on the same page throughout visual reviews.

Share This Article

Other Related Articles

See More Articles
See More Articles
Scroll to Top