Integrate Percy with Selenium and CSharp

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.

export BROWSERSTACK_USERNAME="YOUR_USERNAME"
export BROWSERSTACK_ACCESS_KEY="YOUR_ACCESS_KEY"

$env:BROWSERSTACK_USERNAME="YOUR_USERNAME"
$env:BROWSERSTACK_ACCESS_KEY="YOUR_ACCESS_KEY"

setx BROWSERSTACK_USERNAME "YOUR_USERNAME" 
setx BROWSERSTACK_ACCESS_KEY "YOUR_ACCESS_KEY" 
set BROWSERSTACK_USERNAME=YOUR_USERNAME
set BROWSERSTACK_ACCESS_KEY=YOUR_ACCESS_KEY

Install BrowserStack SDK using Maven Archetype

Run the given command to install the BrowserStack SDK and create a browserstack.yml file in the root directory of your project.

• The browserstack.yml config file holds all the required capabilities to run tests on BrowserStack.

• The BrowserStack.TestAdapter works on top of your framework test adapter to run parallel tests on BrowserStack across multiple platforms mentioned on the browserstack.yml file.

dotnet add package BrowserStack.TestAdapter
dotnet build
dotnet browserstack-sdk setup --userName "YOUR_USERNAME" --accessKey "YOUR_ACCESS_KEY"

dotnet add package BrowserStack.TestAdapter
dotnet build
dotnet browserstack-sdk setup --userName "YOUR_USERNAME" --accessKey "YOUR_ACCESS_KEY"

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: manual.
   

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

userName: YOUR_USERNAME
accessKey: YOUR_ACCESS_KEY
platforms:
  - os: Windows
    osVersion: 11
    browserName: Chrome
    browserVersion: 103.0
  - os: Windows
    osVersion: 10
    browserName: Firefox
    browserVersion: 102.0
  - os: OS X
    osVersion: Big Sur
    browserName: Safari
    browserVersion: 14.1
parallelsPerPlatform: 1
browserstackLocal: true
buildName: browserstack-build-1
projectName: BrowserStack Sample
debug: false
percy: true
percyCaptureMode: manual

Manually add Percy screenshot method to update test script

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:

using BrowserStackSDK.Percy;
using NUnit.Framework;
namespace Tests;
public class MyTest
{
    [Test]
    public void SampleTest()
    {
        // ...
        PercySDK.Screenshot(driver, "Screenshot name");
    }
}

Run your test script

Create Project

Create a Percy Web project using the Percy dashboard. Explore creating a Percy Web project.

Update your BrowserStack config file

In the browserstack.yml file:

1. Set percy: true.

2. Set a projectName.
   Use the same projectName specified when creating the Percy Web Project.

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, percyCaptureMode and the browserstackAutomation parameters.

userName: YOUR_USERNAME
accessKey: YOUR_ACCESS_KEY
platforms:
  - os: Windows
    osVersion: 11
    browserName: Chrome
    browserVersion: 103.0
  - os: Windows
    osVersion: 10
    browserName: Firefox
    browserVersion: 102.0
  - os: OS X
    osVersion: Big Sur
    browserName: Safari
    browserVersion: 14.1
parallelsPerPlatform: 1
browserstackLocal: true
buildName: browserstack-build-1
projectName: Percy Web Prj
debug: false
percy: true
percyCaptureMode: manual
browserstackAutomation: true

Update your test script

To manually capture snapshot 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.snapshot(driver, name) method at required points in your test script to get the snapshot you want.

Here’s an example:

using BrowserStackSDK.Percy;
using NUnit.Framework;
namespace Tests;
public class MyTest
{
    [Test]
    public void SampleTest()
    {
        // ...
        PercySDK.snapshot(driver, "Snapshot name");
    }
}

Run your test script

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:

export PERCY_TOKEN="<your token here>"

$Env:PERCY_TOKEN="<your token here>"

set PERCY_TOKEN="<your token here>"

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:

npm install --save-dev @percy/cli

Update the .csproj file as shown below:

<PackageReference Include="PercyIO.Selenium" Version="2.0.1"/>

Update your test script
Import the Percy library to use the method and attributes required to take screenshots.

In the following code, the Percy.Snapshot method is used:

require 'percy'
driver = Selenium::WebDriver.for :firefox
driver.navigate.to "https://example.com"
# Take a snapshot
Percy.snapshot(driver, 'homepage')
driver.quit

We are passing the required argument which is name, and are using an <https://example.com> web application. CSharp example as the name of the snapshot within the Percy.Snapshot method.

To learn more, visit Percy snapshot.

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

npx percy exec -- bundle exec rspec

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

[percy] Percy has started!
[percy] Created build #1: https://percy.io/[your-project]
[percy] Snapshot taken "CSharp example"
[percy] Stopping percy...
[percy] Finalized build #1: https://percy.io/[your-project]
[percy] Done!