Integrate Percy with Cucumber-TestNG

Set BrowserStack credentials

Save your BrowserStack credentials as environment variables. It simplifies running your test suite from your local or CI environment. You can export the environment variables for the Username and Access Key of your BrowserStack account or you can set it in the config file.

Install or Upgrade BrowserStack SDK

Update your BrowserStack config file

In the browserstack.yml file:

1. Set percy: true.

2. Set a projectName.
   After you run a test, an Automate project and a Percy project are created with the project name you set here.
   If a Percy project by the name you set in the browserstack.yml file already exists, your screenshots are added to the same project. However, if the name matches an App Percy project, your visual tests will continue to run, but an error message will appear in your logs. Your functional tests still run as expected.

3. Set percyCaptureMode: auto.
   There are other supported automated capture modes in the percyCaptureMode parameter. The table below lists and describes all the acceptable modes.

Below sample browserstack.yml file shows how to set the percy, the projectName, and the percyCaptureMode parameters.

Additional configuration settings (Optional)

To manually capture screenshots alongside the auto mode, implement the following steps in your test script:

1. Import the BrowserStack Percy SDK in your test script.
2. Add the PercySDK.screenshot(driver, name) method at required points in your test script to get the screenshots you want.

Here’s an example:

Run your test script

You can continue running your tests as you have been previously.

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 set your environment variable in the next step.

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

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

To learn about environment variables in Percy, see Percy environment variables.

Install Percy dependencies
Install the following components to establish the integration environment for your test suite.

Install Percy CLI by running the following command:

If you’re using Maven, add percy-java-selenium and cucumber-java to your project dependencies. The Percy SDK declares Cucumber as a provided dependency, so you supply your own Cucumber version (7.x is recommended):

Set up Cucumber hooks
Pass your WebDriver instance to PercySteps from a Cucumber @Before hook, and reset it in an @After hook. The setDriver method also registers the Cucumber wrapper in your Percy build information.

Add the io.percy.selenium.cucumber package to your Cucumber glue path so that the step definitions are discovered:

Write a feature file
Use the Percy steps in your Gherkin scenarios. The following feature file takes a basic snapshot, a responsive snapshot, and a snapshot that ignores a region:

To pass several options at once, use the with options: step with a Cucumber data table:

For the full list of available steps, see Available step definitions.

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

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