PlaywrightPercySDK 1.0.1

PlaywrightPercy

This SDK provides Integration of Playwright C# test project with BrowserStack Percy.

Pre-Requisites

• Node and NPM installed on your machine/agent (in case running in CI/CD pipelines)
• BrowserStack access with Percy Web
• Existing Percy Project Setup in BrowserStack and copy the PERCY_TOKEN : https://www.browserstack.com/docs/percy/get-started/create-project
• Existing Playwright C# project. If you do not have one refer: https://playwright.dev/dotnet/docs/intro

Getting Started with Custom SDK - Updating the code

• Add reference to Nuget package in your project or refer https://www.nuget.org/packages/PlaywrightPercySDK/ other options

dotnet add package PlaywrightPercySDK --version 1.0.0

• Update your test file by adding references to SDK

using PlaywrightPercy;

• Initialise PercyHelper Class Object in your test file

PercyHelper helper = new PercyHelper();

• Finally call the method "CapturePercyScreenshotAsync" by passing your Page object and name for the screenshot:

    [TestMethod]
    public async Task HomepageHasPlaywrightInTitleAndGetStartedLinkLinkingtoTheIntroPage()
    {
        await Page.GotoAsync("https://www.google.com");
        await helper.CapturePercyScreenshotAsync(Page, "firstscreenshot");
    }

• Complete test class will look similar to this:

using System.Text.RegularExpressions;
using System.Threading.Tasks;
using Microsoft.Playwright;
using Microsoft.Playwright.MSTest;
using Microsoft.VisualStudio.TestTools.UnitTesting;
using Newtonsoft.Json.Linq;
using PlaywrightPercy;
using RestSharp;

namespace PlaywrightTests;

[TestClass]
public class UnitTest1 : PageTest
{
    // Initialise the Percy Helper class 
    PercyHelper helper = new PercyHelper();

    [TestMethod]
    public async Task HomepageHasPlaywrightInTitleAndGetStartedLinkLinkingtoTheIntroPage()
    {
        await Page.GotoAsync("https://www.google.com");
        // Call the CapturePercyScreenshotAsync method
        await helper.CapturePercyScreenshotAsync(Page, "firstscreenshot");
    }
}

Run the Tests

• Install Percy CLI by running the following command on your terminal/commad prompt:

npm i @percy/cli -g

• Set the environment variable with Percy Token (as captured in pre-requisites):

export PERCY_TOKEN=<<YOUR PERCY_TOKEN>>

• Set the PErcy build environment variable (your branch)

export PERCY_BRANCH=local

• Start Percy CLI by running following command on terminal/command prompt:

npx percy exec:start

• Run your dotnet test
• After successful tests, stop the percy CLI by closing the terminal.
• Verify the build in Percy Web and you should be able to see the screenshot with given name associated in the percy build.