For Web Application

Integrate your WebdriverIO tests with Percy

Before integration, you can explore Percy’s sample build tutorial for WebdriverIO. Integrate your WebdriverIO automated tests with BrowserStack Percy and here's an overview of the integration steps:

Step 1: Create a Percy project

Sign in to Percy. In Percy, create a project of the type, Web, and then name the project. After the project is created, Percy generates a token. Make a note of it. You have to use it to set your environment variable in the next step.

For details on creating a project, see Create a Percy project.

Step 2: Set the project token as an environment variable

Run the given command to set PERCY_TOKEN as an environment variable:

export PERCY_TOKEN="<your token here>"   // macOS or Linux
$Env:PERCY_TOKEN="<your token here>"   // Windows PowerShell
set PERCY_TOKEN="<your token here>"    // Windows CMD

Step 3: Install Percy dependencies

Install the components required to establish the integration environment for your test suite.

To install the dependencies, run the following command:

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

Step 4: Update your test script

Import the Percy library to use the method and attributes required to take screenshots. The following example uses the percySnapshot() function in the async mode:

import percySnapshot from '@percy/webdriverio';
describe('webdriver.io page', () => {
  it('should have the right title', async () => {
    await browser.url('https://webdriver.io');
    await expect(browser).toHaveTitle('WebdriverIO · Next-gen browser and mobile automation test framework for Node.js');
    await percySnapshot('webdriver.io page');
  });
});

When using WebdriverIO in the standalone mode, provide the browser object as the first argument to the percySnapshot function:

import { remote } from 'webdriverio'

import percySnapshot from '@percy/webdriverio';

const browser = await remote({
  logLevel: 'trace',
  capabilities: {
    browserName: 'chrome'
  }
});

await browser.url('https://duckduckgo.com');
const inputElem = await browser.$('#search_form_input_homepage');
await inputElem.setValue('WebdriverIO');
const submitBtn = await browser.$('#search_button_homepage');
await submitBtn.click();
// the browser object is required in standalone mode
percySnapshot(browser, 'WebdriverIO at DuckDuckGo');
await browser.deleteSession();

The snapshot method arguments are:

percySnapshot(name[, options])

Standalone mode

percySnapshot(browser, name[, options])

• browser (required) - The WebdriverIO browser object
• name (required) - The snapshot name; must be unique to each snapshot
• options - See per-snapshot configuration options

To learn more, see Percy snapshot.

Step 5: Run Percy

Run your tests using the percy exec command as shown below:

If you are unable to use the percy:exec command or prefer to run your tests using IDE run options, you can use the percy:exec:start and percy:exec:stop commands. To learn more, visit Run Percy.

percy exec -- wdio wdio.conf.js

[percy] Percy has started!
[percy] Created build #1: https://percy.io/[your-project]
[percy] Running "wdio wdio.conf.js"
...
[...] webdriver.io page
[percy] Snapshot taken "webdriver.io page"
[...]    ✓ should have the right title
...
[percy] Stopping percy...
[percy] Finalized build #1: https://percy.io/[your-project]
[percy] Done!

Visit the following pages for more details:

• Integrate your WebdriverIO tests with Percy
• Environment variable page
• Integrate using BrowserStack SDK if you are using BrowserStack Automate.

Resource	Description
Official docs	Percy's WebdriverIO documentation
Sample build - Tutorial	Percy's WebdriverIO tutorial
Official video	Visual Testing with Percy
Blog	Introducing Visual Reviews 2.0