Sign in or start for free
Hey! These docs are for version 1, which is no longer officially supported. Click here for the latest version, 2-web!

### [percy-webdriverio on GitHub](🔗)

[![Package Status](https://img.shields.io/npm/v/@percy-io/percy-webdriverio.svg)](🔗) [![Build Status](https://circleci.com/gh/percy/percy-webdriverio.svg?style=svg)](🔗)

This adds [Percy](🔗) visual testing and review to your [WebdriverIO tests](🔗).

Beta release. Percy for WebdriverIO is in beta. It may change in backwards-incompatible ways until v1.0.0 is released.

# Getting Started





Make sure you have completed [Setup](🔗) of your CI service first. You can also test Percy in your [local development](🔗) environment.

Install `@percy-io/percy-webdriverio` using `npm`:


Or using `yarn`:

Next, update your `wdio.conf.js`:

The asset loader instructs Percy where to find your compiled assets in your filesystem, and where to make them available. Configurable options:
  • `buildDir`: absolute path to your compiled static assets (_not_ source assets).
  • `mountPath`: path prefix to where your webserver serves the assets (ex: `/assets`)
Percy requires the asset loader to be configured correctly so it can quickly find your CSS, images, fonts and other assets required for taking screenshots. If it's misconfigured, you may see screenshots that are missing styles and images.
# Usage

You're now ready to start taking snapshots with `percySnapshot` in your tests:

You can provide several options to `percySnapshot`:

  • `widths`: An array of widths to take screenshots at.
  • `enableJavaScript`: Boolean that instructs Percy whether to run javascript when rendering the page.
  • `minimumHeight`: Adjust the minimum height of your snapshots. The default is 1024px.
You can take multiple snapshots in the same test:

# Ready to go

That's all there is to it. Run `wdio`, and Percy will take your snapshots and prepare your visual review for you.
Whether running in your CI service or locally, it will take the snapshots as long as you've supplied the `PERCY_TOKEN` and `PERCY_PROJECT`environment variables.
# Freezing time and dynamic data

As you start to introduce visual testing into your workflow, you might find that the passing of time or generated data from tools like [faker](🔗) can cause visual diffs.
It's fairly easy to stabilize these diffs. Tools like faker often allow you to provide a [seed](🔗) to ensure that the same data is generated each time faker is run. Libraries like [MockDate](🔗) allow you to override the current date, eliminating variations due to the screenshots being taking at a different date and time. If you use Math.random, you can seed it with [seedrandom](🔗).
# Source code integration

Percy automatically integrates with your source code so you can do visual reviews with each commit or pull request. See our source code integration docs for more info.
  • [GitHub](🔗) 
  • [GitHub Enterprise](🔗) 
  • [GitLab](🔗) 
  • [GitLab self-managed](🔗) 
  • [Bitbucket](🔗) 
# Contributing

  1. Fork it ( <https://github.com/percy/percy-webdriverio/fork> )
  2. Create your feature branch (`git checkout -b my-new-feature`)
  3. Commit your changes (`git commit -am 'Add some feature'`)
  4. Push to the branch (`git push origin my-new-feature`)
  5. Create a new pull request
[Throw a ★ on it!](🔗)