Skip to main content

Integrate functional and visual tests

This guide explains how to integrate functional and visual tests.

Integrating functional and visual testing can greatly enhance your ability to catch UI regressions and ensure the visual consistency of your application. By integrating Percy with your functional testing pipeline, you can seamlessly capture screenshots during your functional test runs and compare them to baseline images.

Browser selection management

Browser selection management enables you to select from a single place all the browsers you want to run your visual tests on. The more the browsers, the higher your visual test coverage.

Users can create a Web Percy project and decide how the browsers should be handled. Percy offers two options listed below:

To select the browsers to test on, first, create a Web project in Percy. You have two ways to select browsers:

  • Percy(Default) - This is Percy’s native cross-browser testing functionality and is selected by default. To know about how this works, see Cross-browser visual testing.
    • If you want to run visual tests only on the latest browsers, select Percy. Your tests run at a high processing speed. If you want twice the speed, purchase the enterprise plan for Percy.
  • Automate - You manage browsers with Automate capabilities. When the functional tests run, Percy directly captures the required screenshots.
    • If you want to run visual tests on a variety of desktop OS, Mobile OS, Mobile devices, and browser combinations, select Automate. If you want to boost the test processing speed, consider purchasing parallels in Automate.

      Handle browser selection

  • A unique Percy token is generated for every project created on Percy.
  • Each selected browser consumes an additional screenshot from your subscription.

Percy on Automate

If you choose the “Automate” option when creating a Percy project, the “browsers selection” option will not appear in the project settings. Instead, the selection of browsers will be based on the capabilities specified in the Automate session.

You can use the Percy Screenshot command to capture a screenshot when a page is rendered during an Automate session. This screenshot is directly sent to the Percy build for comparison.

Check out the video below to get an overview of Percy on Automate:

  • Supported languages and frameworks.
  • Set the browser height and width to get consistent screenshots.
  • For Apple devices, close the tag for smart app banners before taking screenshots.
  • Playwright for Android is currently supported only for NodeJS.

Prerequisite

Before you begin, ensure your Automate script’s capabilities are using Selenium version 3.11.0 and above.

We recommend using Selenium 4 with Percy on Automate to boost performance and ensure increased stability while capturing screenshots.

Integration steps

Integrate Percy on Automate with your test suite to run visual tests. To do that, follow these steps:

Capture a full-page screenshot using the full-page parameter. By default, Percy On Automate captures a single tile, for the full page, refer to the instructions below.

Step 1 - Install the latest Percy CLI

Copy icon Copy snippet

Step 2 - Install the relevant SDK

For Javascript-based frameworks like WebdriverIO, or Mocha

Copy icon Copy snippet
Copy icon Copy snippet
Copy icon Copy snippet

If you are using WebdriverIO, make sure to install percy selenium-webdriver as used in JS-Selenium and make sure WebdriverIO is configured to be used with BrowserStack.

For Python

Copy icon Copy snippet
Copy icon Copy snippet
Copy icon Copy snippet

For Java

Update the pom.xml file as shown below:

Copy icon Copy snippet
Copy icon Copy snippet
Copy icon Copy snippet

For C#

Update the .csproj file as shown below:

Copy icon Copy snippet
Copy icon Copy snippet
Copy icon Copy snippet

Step 3 - In the Percy dashboard make selections as below:

  • Select Web as the platform.
  • Select Automate to handle browser selection.
  • Click Create Project.

Available Integrations

Step 4 - Export the Percy token.

A Percy token will be generated when you create a project. Export this token environment variables.

Copy icon Copy snippet
Copy icon Copy snippet
Copy icon Copy snippet

Step 5 - Update your Automate test script.

(1) Import percy_screenshot from Percy library using the below code:

For Selenium

Copy icon Copy snippet
Copy icon Copy snippet
Copy icon Copy snippet
Copy icon Copy snippet

For Appium

Copy icon Copy snippet
Copy icon Copy snippet
Copy icon Copy snippet
Copy icon Copy snippet

For Playwright

Copy icon Copy snippet
Copy icon Copy snippet
Copy icon Copy snippet
Copy icon Copy snippet

(2) Use the Percy screenshot command to take required screenshots in your Automate session.

For example, in the following Python code, the percy_screenshot("name", "options") method is called twice. In the first instance, we are passing only the required argument which is “name”. In the second instance, we are passing both the required and optional “options”.

For Selenium:

Copy icon Copy snippet
Copy icon Copy snippet
Copy icon Copy snippet
Copy icon Copy snippet

For Appium:

Copy icon Copy snippet
Copy icon Copy snippet
Copy icon Copy snippet
Copy icon Copy snippet

For Playwright:

Copy icon Copy snippet
Copy icon Copy snippet
Copy icon Copy snippet
Copy icon Copy snippet
Arguments Description
name(String) (Required) The screenshot name must be unique for each screenshot captured. For example: name = Screenshot 1.
options() 1. (Optional) freezeAnimatedImage(Boolean) - To determine whether Percy will perform stabilization on the DOM. By default set to false, set to true if stabilization needs to be performed by Percy.
2. (Optional) freezeAnimatedImageOptions(Boolean) - In the case of specific animated images that do not appear to freeze, we can select and submit them for freezing.There are two ways to select it.
i. freezeImageBySelectors.
ii. freezeImageByXpaths.
3. (Optional) percyCSS - Apply Percy-specific CSS to stabilize screenshots.
4. (Optional) ignoreRegions - To ignore a particular set of elements or sections in DOM. There are four ways to pass it.
i. ignoreRegionXpaths.
ii. ignoreRegionSelectors.
iii. ignoreRegionSeleniumElements / ignoreRegionAppiumElements (Only applicable for Selenium & Appium).
iv. customIgnoreRegions.
5. (Optional) considerRegions - To counteract the effects of IntelliIgnore. There are two ways to consider it.
i. considerRegionXpaths.
ii. considerRegionSelectors.
iii. considerRegionSeleniumElements /considerRegionAppiumElements (Only applicable for Selenium & Appium).
iv. customConsiderRegions.
full-page(Boolean) Set to true if we want to take fullpage screenshots, default is false.

Step 6 - Run the build

Copy icon Copy snippet

Results

You can view the visual comparison results on the generated Percy builds.

Percy on Automate Features

  • If there are more than five screen widths, a dropdown menu will show up with different width options. The dropdown will display a maximum of ten entries.
  • The build generation panel now includes a new device selection filter on the left pane.
  • You can easily switch between the Percy and the Automate session.
  • You can use the Intelli Ignore feature to check the contextual differences. Read more.

    View results

Debug in Automate Session

  • The generated Percy builds have a redirect link to your builds on the Automate session.

    Debug on Automate

  • The generated builds on the Automate session have a redirect link to your Percy builds.
  • Once the Automate builds are generated, you can use various logging options such as Text Logs, Network Logs, Other Logs, Issues Detected, and many more to review your builds.

    Automate dashboard

  • To determine the timestamp of a screenshot taken, you can search for the Percy Screenshot command within your Automate session.
  • The Percy screenshot command displays the screenshot name besides it, as shown:

    Automate text logs

Handle dynamic elements

If you have dynamic JavaScript elements or carousels in your test, stabilize the DOM first and then invoke percyScreenshot. This allows for capturing consistent and accurate screenshots.
For example, if you are using bootstrap carousel, handle it as shown below:

Copy icon Copy snippet

Another example is how to handle sticky elements. Suppose the website you’re testing has the cookie banner. You can either accept or reject it. In the following snippet, we’re accepting the cookie:

Copy icon Copy snippet

Full page screenshots

Your webpage may require multiple scrolls to get to the end of a page. You can test these long pages using Percy’s full-page screenshot feature. It offers a comprehensive snapshot of a web page, capturing its entire length and content in a single image.

Things to keep in mind

  • Call percyScreenshot after ensuring the page has loaded.
  • Although we attempt to handle lazy loading, if any issues arise, ensure you scroll to the bottom before calling percyScreenshot.
  • Dynamic elements such as JS based animation, video, carousel need to be paused before full page screenshot.
  • The maximum limit for the length of a full-page screenshot on desktop is 10000px or 10 tiles, whichever is minimum, and for mobile, it is 10 tiles.
  • A website with different layouts based on geolocation can be managed by the user using IP Geolocation, as explained in the BrowserStack Docs.
  • The user needs to handle any popups that might appear while taking a screenshot.
  • Remove meta tags that may hinder the webpage by adding native elements.
  • The customIgnoreRegions from the ignoreRegions option and customConsiderRegions from the considerRegions option do not function with full-page screenshots.

Benefits of Percy on Automate

  • Using Percy on Automate is cost-effective and performant.
    • It supports a single pipeline for functional and visual testing.
    • It saves lot of network traffic as we are directly uploading screenshots from BrowserStack terminal to Percy cloud.
  • Tell us the capture movement and Percy will take screenshot of that movement as it supports css pseudo classes.
  • It supports third party automated testing platforms including in-house setups.
  • Exposure to highest browser and devices coverage while using BrowserStack Automate.

Limitations

  • Internet Explorer is not supported.
  • For Mozilla Firefox, Google Chrome, and Microsoft Edge, browser versions less than 91 are not supported.
  • Mojave and older versions of macOS are not supported.
  • The FreezeAnimatedImage option does not have support for macOS Catalina and earlier versions.
  • Chromium on iPhone is not supported.

Compatibility Matrix

Refer the below matrix to check what frameworks are supported by Percy on Automate.

Note: Write us at support@browserstack.com to raise a feature request.

Testing framework Languages Language specific frameworks
Selenium/Appium Java - Java
- Cucumber
- Gauge
- JBehave
- JUnit 4
- JUnit 5
- Selenide
- Serenity
- TestNG
  NodeJS - NodeJS
- Cucumber JS
- Jest
- Mocha JS
- Protractor
- WD
- WebdriverIO
  Python - Python
- Behave
- Pytest
  .Net - C#
- MBUnit
- NUnit
- PNUnit
- SpecFlow
- XUnit
Playwright Java  
  NodeJS  
  Python  
  .Net  

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked






Thank you for your valuable feedback

Is this page helping you?

Yes
No

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked






Thank you for your valuable feedback!

Talk to an Expert
Download Copy