Capturing Full Page Screenshots with Percy Tool

TABLE OF CONTENTS

1. Overview

2. Prerequisites

3. Updating the POM file

4. Generating the Percy Token

5. Setting the Path in the Environment Variables

6. Setting the Percy Token in two ways

7. Execution of the algoQA generated scripts using Percy Tool

1. Overview

Percy is a visual testing tool that helps capturing screenshots of your application and compares them against baseline images to identify any visual regressions. In this article, you will be using the Percy tool's feature to capture full page screenshot. If your app requires multiple scrolls to get to the end of the page, then you can use Percy tool feature to automate this test and find the differences.

For example, when you first build your website, you take screenshots of what the site looks like in a perfect, error-free state. These screenshots are the baseline images. Later, when you make updates or changes to the website, you take new screenshots. Percy then compares these new screenshots with the baseline images to check if anything looks different (such as colors, positions, or layout).
If there are any differences between the new screenshot and the baseline, that's when visual regressions are detected, indicating something has changed unintentionally in the design or appearance.

2. Prerequisites

To install Percy globally using npm, run the following command in the command prompt:

npm install -g @percy/cli- This command helps in using Percy across your projects, you can install it globally on your system. This allows you to access the Percy command-line tool from any directory or project without needing to install it for each individual project.

To verify if the tool is installed, run the following command in the command prompt:

percy --version

Alternatively, click here to add the Percy tool as a Chrome extension.

3. Updating the POM file 

To include the Percy Java Selenium dependency in your Maven project, perform the following:

1. Navigate to the algoQA script generated folder structure.
2. Click the POM file, as shown:
   
3. Add the following code snippet to your pom.xml file under the <dependencies> section. If already exists, update the version to 1.3.0.

   <dependency>
       <groupId>io.percy</groupId>
       <artifactId>percy-java-selenium</artifactId>
       <version>1.3.0</version>
   </dependency>

4. Save the changes.
5. Navigate to the ApplicationSettings.xml file and make sure you set the <EnablePercy>yes</EnablePercy> parameter to yes.

4. Generating the Percy Token

Perform the following: 

1. Enter the https://percy.io/visual-testing into the address bar.
2. Click the Get App button available on the upper-right corner.
3. Click Create Project button available in the status bar.
4. In the Create a new project page, enter the Project Name and scroll down to click Create Project button.
5. In waiting for your first build page, copy the Percy token generated for windows and paste it in your notepad for later use. Token generated is valid for 30 days.

5. Setting the Path in the Environment Variables

 Perform the following:

1. In the Task bar, search for Environment Variables
2. In the System Properties pop-up window, click the Environment Variables button:
   
3. Environmental Variables window appears. In this window,
   (1) select the Path in the System variables section and click Edit. (2) In the Edit environment variable window, click New and add the Path as follows:

   C:\Users\DELL\AppData\Roaming\npm

   (3) Click OK and OK again to save the changes.

6. Setting the Percy Token in two ways

1. You can set the token using command prompt. Navigate to the script generated folder and type cmd in the folder path and run the following command:
   set PERCY_TOKEN=your_percy_project_token

   
   

2. You can also add the token in the environmental variables. By setting this in the environmental variables, the token is fetched automatically when scripts are executed.  Navigate to Environmental variables window as explained in the previous steps a and b.  
   
   In the Environment Variable window, click New button in the System Variable section.
   New System Variable pop-up window appears, in this window, add Variable Name as Percy_Token and paste the token generated in the Variable Value text box.
   

7. Execution of the algoQA generated scripts using Percy Tool 

Perform the following:

1. Navigate to the algoQA script generated folder which is extracted and downloaded in your local folder.
2. Highlight the folder path and enter cmd
3. Run the following command:

   percy exec -- mvn test

4. Execution report displays the build number, as shown:
   
   
5. Navigate back to the Percy tool to view the same build number generated in the previous step to track the differences in the images, as shown. Click Unreviewed link to view the snapshot differences.
   
   The following screenshot displays the screenshot differences using Percy Tool: