Run a sample Percy build with Playwright

Clone the sample application
Clone the example-percy-playwright application, change the directory, and compile the sample application by running these commands:

$ git clone https://github.com/percy/example-percy-playwright-python.git
$ cd example-percy-playwright-python
# create virtual environment
$ python3 -m venv env
$ source env/bin/activate
# update the pip if not updated already using [python3 -m pip install --upgrade pip]
# install the required packages
$ pip3 install -r requirements.txt
$ npm install

$ git clone git@github.com:percy/example-percy-playwright.git
$ cd example-percy-playwright
$ npm install

$ git clone git@github.com:percy/example-percy-playwright-java
$ cd example-percy-playwright-java
$ mvn compile
$ npm install

$ git clone git@github.com:percy/example-percy-playwright-dotnet.git
$ cd example-percy-playwright-dotnet
$ npm install

You can explore the sample application by opening the src/main/resources/index.html file.

Create a Percy project
To create a project, follow these steps:

1. Sign in to Percy.
2. In Percy, create a project of the type, Web.
3. Name the project. After the project is created, Percy generates a token.
4. Note down the token. You have to use it to 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.

Generate the first build
In this step, we run the sample test script to take a few snapshots using the percy.snapshot method. The sample application contains an file in which the method is called. The goal is to have a visual build with which to compare a later build.

$ npx percy exec -- python3 tests/web/test.py

$ git checkout -b tutorial-example
$ npm run test-web

$ npx percy exec --verbose  --  mvn test -P web-percy-test

$ cd web
$ npx percy exec --verbose  -- dotnet test --filter "Category=web-percy-test"

On completion, you see logs from Percy confirming that the snapshots were successfully uploaded and a direct URL to the dashboard. There are no visual comparisons yet.

Modify the sample application

$ npx percy exec -- python3 tests/web/after_test.py

<button class="clear-completed" style="font-weight:bold">Clear completed</button>

$ npx percy exec --verbose  --  mvn test -P web-percy-after-test

$ npx percy exec --verbose  -- dotnet test --filter "Category=web-percy-after-test"

Commit your changes

Commit the changes that you made to the sample application.

Generate the second build
Run the test script again.

Follow Step 4 to generate your second build.

This takes new screenshots of our modified application, uploads them to Percy, and compares them with the previous screenshots to show visual differences.

View results

1. Open your project dashboard to view your builds.
2. Open the second build to view the visual differences in comparison to the first build.

On the third pane, you see the screenshots from the first build on the left, and from the second, on the right.

Percy highlights what’s changed visually in the application. Use the options on the screen to review the changes on different browsers and widths.

Clone the sample application

Clone our sample repository and install the dependencies by running the following commands:

$ git clone https://github.com/percy/example-percy-playwright-python.git
$ cd example-percy-playwright-python
# create virtual environment
$ python3 -m venv env
$ source env/bin/activate
# update the pip if not updated already using [python3 -m pip install --upgrade pip]
# install the required packages
$ pip3 install -r requirements.txt
$ npm install

$ git clone git@github.com:percy/example-percy-playwright.git
$ cd example-percy-playwright
$ npm install

$ git clone git@github.com:percy/example-percy-playwright-java
$ cd example-percy-playwright-java
$ mvn compile
$ npm install

$ git clone git@github.com:percy/example-percy-playwright-dotnet.git
$ cd example-percy-playwright-dotnet
$ npm install

Export token
Create a Percy on Automate project and export the Percy token.

Set BrowserStack credentials
Get your BrowserStack credentials and update the sample script.

1. Sign up with BrowserStack for a free trial or purchase a plan.
2. Get your username and access key from the BrowserStack profile page.
3. Use the userName and accessKey variables to set BrowserStack environment variables to authenticate your tests.

export BROWSERSTACK_USERNAME="<your browserstack user_name>"
export BROWSERSTACK_ACCESS_KEY="<your browserstack access_key>"

set BROWSERSTACK_USERNAME="<your browserstack access_key>"
set BROWSERSTACK_ACCESS_KEY="<your browserstack access_key>"

$Env:BROWSERSTACK_USERNAME="<your browserstack access_key>"
$Env:BROWSERSTACK_ACCESS_KEY="<your browserstack access_key>"

Alternatively, update USER_NAME and ACCESS_KEY in the test file.

Run the first build
Run your first Percy build on Automate by using the following command:

$ npx percy exec -- python3 tests/automate/test.py

$ npm run test-automate-before

$ npx percy exec --verbose  --  mvn test -P automate-percy-test

$ cd automate
$ npx percy exec --verbose  -- dotnet test --filter "Category=automate-percy-test"

Your first Percy on Automate build is created. As this is the first build, no comparisons are available yet. You must approve the first build to have a base build for future comparisons.

Modify the sample application
To modify the sample application, perform one of the following:

• Directly run the after_test test file provided in the project using the run command in Step 4. In this case, you can skip Step 6 and directly visit the Automate and the Percy dashboards to see your functional and visual builds.

• Search for the below line in the test file and replace the @id=”1” to @id=”3”:

page.click('//*[@id="1"]/div[4]')

await page.click('\/\/*[@id="1"]/div[4]');

page.click("//*[@id=\"1\"]/div[4]");

await page.ClickAsync("//*[@id=\"1\"]/div[4]");

Commit changes
Commit the changes that you made to the sample application.

Run the second build
Follow Step 4 to generate your second build.

After the script execution is finished, the current build is compared to the previously approved build.

View results
Visit the Automate and the Percy dashboards to see your functional and visual builds.