What is percy and how to integrate percy with puppeteer. In this puppeteer tutorial will see all about percy in details with example.

What is Percy?

Percy is visual testing and review plate form that provide a awesome platform to manage the visuals testing or snapshots. Percy helps to find out the UI bugs that can come after the commit. It a solution for visual regression testing.

Percy provide CI/CD support with many tools like circleCI, Jenkins, codeship, Gitlab, Github TestRail ETC.
Percy supports many testing framework like Cypress, Puppeteer, WebdriverIO, Nightmare, Nightwatch, Protractor, TestCafe and selenium web driver for java and C#.
It serve free with some limitations.
Percy also have the premium support for the more advance services.

Integrate percy with puppeteer

Now let’s see how to integrate percy with puppeteer and manage the visual testing automation suite.

Setup percy project at percy.io

Goto Office website of percy “https://percy.io/” register as new user or login as existing user.
Create a new project and generate a Setup key. This is the uniqe key that will help to connect test suite with percy.
Copy and run that key command on your NPM terminal at the root folder.

$env:PERCY_TOKEN = "Key"

Install npm dependency for percy

npm install @percy/puppeteer

Write a run command into the package.json

"percy-test": "percy exec -- jest ./tests-snapshots/__tests__/percy.test.js"

Write script in puppeteer

In the below example(percy.test.js) we are going to create puppeteer script to launch a browser and Navigate to URL.

const puppeteer = require('puppeteer')
const { percySnapshot } = require('@percy/puppeteer')

describe("Visual testing using percy",()=>{

    let browser
    let page
  
    beforeAll(async function(){
      browser = await puppeteer.launch({
        headless:true,
        slowMo:0
      })
      page = await browser.newPage()
      
    })

    test('Percy visuals', async function (){
      await page.goto("https://example.com/")
      await page.waitForSelector('h1')
      await percySnapshot(page, "Snapshot1");
       
    })

    afterAll(async function(){
       await browser.close()
    })
  
});

Command to run the script:

npm run percy-test

Now refresh the percy page and check the recent build. Its provide option to approved or change request.

How to integrate Percy with puppeteer || Percy Tutorial