UI testing with WebdriverIO and Percy

Announcing major improvements to our WebdriverIO SDK!

Automatic visual testing with Percy & WebdriverIO

We’re thrilled to provide better support for WebdriverIO, the popular front-end friendly JavaScript testing library. WebdriverIO integrates nicely with testing tools like Mocha and Chai, providing an easy-to-use framework to drive browser testing.

Now it’s easier than ever to incorporate visual coverage on top of WebdriverIO!

This updated SDK has out-of-the-box support for snapshotting complex modern web pages without requiring you to use custom loaders, as well as processing and uploading snapshots outside of your test process.

With our WebdriverIO integration, you can easily add Percy snapshots to your tests for automated visual testing across responsive widths and browsers:

Caption: Check out this 2-minute tutorial to see our WebdriverIO integration in action.

Getting started

If you’re integrating Percy and WebdriverIO for the first time, follow the steps below or check out our documentation. If you’re already using our Webdriver integration, read how to upgrade to Percy Webdriver v1.

1. Install @percy/percy-webdriverio with npm or yarn . For example:

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

2. Import percySnapshot() into your test files

const { percySnapshot } = require('@percy/percy-webdriverio')

3. Call percySnapshot() where you’d like to add visual coverage

describe('Integration test with visual testing', async function() {
  it('Loads the example.com site', async function() {
    await browser.url('https://example.com/')
    await percySnapshot(browser, this.test.fullTitle())
  })
})

4. Wrap your test runner command in the percy exec command.

percy exec -- wdio wdio.conf.js

(Note the spaces around the double dash).

That’s it! Now, whenever your tests run — either locally or in CI — Percy will capture DOM snapshots everywhere you’ve called percySnapshot(...). Those snapshots are then rendered in Percy’s environment and compared against baselines to detect visual changes.

WebdriverIO is a powerful testing tool and we’re thrilled to provide first-class support for integrating automated visual testing.

Additional resources:

• For a more in-depth look at adding Percy snapshots to your Webdriver tests, check out our WebdriverIO set up guide.
• To see our WebdriverIO integration in action, check out our 2-minute tutorial and example app with Percy for Webdriver already set up.
• Learn about our other end-to-end testing framework integrations.

Feel free to reach out on Twitter, or send an email to support with any questions or feedback.

Percy is an all-in-one visual testing solution that gives your team confidence in every visual change before it’s shipped. Learn more at https://percy.io. 🤖