Integrate your WebdriverIO and JavaScript with App Percy

Create new app project on percy dashboard

Sign in to Percy and create a new app type project. After you’ve created the project, you’ll be shown a PERCY_TOKEN environment variable. Percy will use the PERCY_TOKEN to know which organisation and project to upload the screenshots to. You will need this PERCY_TOKEN in next steps.

Set the project token as an environment variable

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

Install Percy packages

Install Percy CLI by running the following command:

Install dependencies

Install the Percy Appium app

Update test script

Make sure to import @percy/appium-app in your code.

Below is an example test using the percyScreenshot function. Use this function wherever you have to take a screenshot.

We are passing the required arguments.percyScreenshot method.

The screenshot method arguments are:

• driver (required) - A appium driver instance
• name (required) - The screenshot name; must be unique to each screenshot
• options object (optional)
  • fullscreen: if the app is currently in fullscreen
  • deviceName: custom device name to override SDK fetched name
  • orientation: “portrait”/”landscape” tell SDK which orientation app is in [ Note: This is only for tagging purpose, does not change the orientation of the device ]
  • statusBarHeightIn px if you want to override SDK
  • navigationBarHeight: In px if you want to override SDK
  • fullPage: true/false. [alpha] only supported on App Automate driver sessions
  • In case scrollview is overlapping with other app elements. Offsets can be provided to reduce the area which needs to be considered for scrolling:
    • topScrollviewOffset: (optional) - [alpha] offset from top of scrollview [ needs @percy/cli 1.20.2+ ]; int
    • bottomScrollviewOffset (optional) - [alpha] offset from bottom of scrollview [ needs @percy/cli 1.20.2+ ]; int
  • screenLengths: int [alpha] max screen lengths for fullPage
  • scrollableXpath (optional) - [alpha] scrollable element xpath for fullpage; string
  • scrollableId (optional) - [alpha] scrollable element accessibility id for fullpage; string
  • ignoreRegionXpaths (optional) - elements xpaths that user want to ignore in visual diff; list of string
  • ignoreRegionAccessibilityIds (optional) - elements accessibility_ids that user want to ignore in visual diff; list of string
  • ignoreRegionAppiumElements (optional) - appium elements that user want to ignore in visual diff; list of appium element object
  • customIgnoreRegions (optional) - Custom locations that users want to ignore in visual diffs, with (0, 0) starting at the top left (requires @percy/cli 1.23.0+); list of ignore_region objects.
  • IgnoreRegion:-
    • Description: This class represents a rectangular area on a screen that needs to be ignored for visual diff.
    • Constructor:
      • constructor(top, bottom, left, right)
    • Parameters:
      • top (int): Top coordinate of the ignore region.
      • bottom (int): Bottom coordinate of the ignore region.
      • left (int): Left coordinate of the ignore region.
      • right (int): Right coordinate of the ignore region.
        

Note:

• Error ‘Invalid ignore region parameters’ raises if top, bottom, left, or right is < 0 or if top ≥ bottom or if left ≥ right.result in error as ‘Invalid ignore region parameters’.
  
• Ignore region should be within the boundaries of the screen.

Run your test script

Run your tests using percy app:exec.

This command starts Percy, create a new Percy build, takes snapshots and uploads them to your project, and stops Percy: