Run a sample Percy build on Automate

Get hands-on experience on running BrowserStack Percy with BrowserStack Automate using our sample repository

Prerequisites

Before you start, ensure that you have the following:

Installed Git and Node 14+ with npm
The following, if your test scripts are in Java:
- TestNG v6.8+
- Java v8+
- For Selenium - Selenium v2.5+ (W3C/JSON Wire)
- For Playwright - Playwright v1.28.8+
- Maven (installed, environment variables set, and bin added to the system path)

Run your Percy build on Automate

Clone the sample application

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

For Selenium:

      
            Python
          
            JavaScript
          
            Java
          
            CSharp
          
          Copy
        
```bash
git clone https://github.com/percy/example-percy-automate-selenium-python.git
cd example-percy-automate-selenium-python

# create virtual environment
python3 -m venv env
source env/bin/activate

# install the required packages
pip3 install -r requirements.txt
npm install
```

            Copy icon
            
        Copy
      
    git clone https://github.com/percy/example-percy-automate-selenium-python.git
cd example-percy-automate-selenium-python
# create virtual environment
python3 -m venv env
source env/bin/activate
# install the required packages
pip3 install -r requirements.txt
npm install

```bash
git clone https://github.com/percy/example-percy-automate-selenium-javascript.git
cd example-percy-automate-selenium-javascript
cd selenium-webdriver
npm install
```

            Copy icon
            
        Copy
      
    git clone https://github.com/percy/example-percy-automate-selenium-javascript.git
cd example-percy-automate-selenium-javascript
cd selenium-webdriver
npm install

```bash
git clone https://github.com/percy/example-percy-automate-selenium-java.git
cd example-percy-automate-selenium-java
mvn compile
```

            Copy icon
            
        Copy
      
    git clone https://github.com/percy/example-percy-automate-selenium-java.git
cd example-percy-automate-selenium-java
mvn compile

```bash
git clone https://github.com/percy/example-percy-automate-selenium-dotnet.git
cd example-percy-automate-selenium-dotnet
dotnet build
```

            Copy icon
            
        Copy
      
    git clone https://github.com/percy/example-percy-automate-selenium-dotnet.git
cd example-percy-automate-selenium-dotnet
dotnet build

For Playwright:

      
            Python
          
            JavaScript
          
            Java
          
            CSharp
          
          Copy
        
```bash
$ 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
```

            Copy icon
            
        Copy
      
    $ 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

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

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

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

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

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

            Copy icon
            
        Copy
      
    $ 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.

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

Copy

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

Copy

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

Copy

    $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:

For Selenium:

      
            Python
          
            JavaScript
          
            Java
          
            CSharp
          
          Copy
        
```bash
npx percy exec --verbose -- python3 tests/test.py
```

            Copy icon
            
        Copy
      
    npx percy exec --verbose -- python3 tests/test.py

```bash
npx percy exec --verbose -- npm run test
```

            Copy icon
            
        Copy
      
    npx percy exec --verbose -- npm run test

```bash
npx percy exec --verbose -- mvn test -P sample-percy-test
```

            Copy icon
            
        Copy
      
    npx percy exec --verbose -- mvn test -P sample-percy-test

```bash
npx percy exec --verbose -- dotnet test --filter "Category=sample-percy-test"
```

            Copy icon
            
        Copy
      
    npx percy exec --verbose -- dotnet test --filter "Category=sample-percy-test"

For Playwright:

      
            Python
          
            JavaScript
          
            Java
          
            CSharp
          
          Copy
        
```bash
$ npx percy exec -- python3 tests/automate/test.py
```

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

```bash
$ npm run test-automate-before
```

            Copy icon
            
        Copy
      
    $ npm run test-automate-before

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

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

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

            Copy icon
            
        Copy
      
    $ 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.

The Percy screenshot command is used to capture screenshots in your Automate session. Refer to the tests mentioned in the git repository.

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”:

For Selenium:

Copy

    WebDriverWait(driver, 10).until(EC.visibility_of_element_located(
        (By.XPATH, '//*[@id="1"]/div[4]'))).click()

Copy

await driver.findElement(By.xpath('//*[@id="1"]/div[4]')).click();

Copy

    WebDriverWait(driver, 10).until(EC.visibility_of_element_located(
    (By.XPATH, '//*[@id="1"]/div[4]'))).click()

Copy

    wait.Until(SeleniumExtras.WaitHelpers.ExpectedConditions.ElementIsVisible(By.XPath("//*[@id=\"1\"]/div[4]"))).Click();

  

For Playwright:

Copy

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

Copy

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

Copy

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

Copy

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.

Congratulations!

You’ve successfully run the sample Percy build. As you’ve seen, Percy helps you capture visual differences in your application that go undetected with functional testing alone.

This was just a sneak peek. Percy can do a lot more. To make the best out of it, integrate Percy with your test suite. To know more check out the related topics.

Integrate functional testing with visual testing

Did this page help you?

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

This page has exactly what I am looking for
This content & code samples are accurate and up-to-date
The content on this page is easy to understand
Other (please tell us more below)

Any additional feedback?

Thank you for your valuable feedback

Is this page helping you?

Yes

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

This page has exactly what I am looking for
This content & code samples are accurate and up-to-date
The content on this page is easy to understand
Other (please tell us more below)

Any additional feedback?

Thank you for your valuable feedback!

Run a sample Percy build on Automate

Prerequisites

Run your Percy build on Automate

Congratulations!

Related topic

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

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

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

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