@percy/client

What is @percy/client?

@percy/client is an npm package that provides a client for interacting with the Percy visual testing and review platform. It allows developers to automate visual testing by capturing screenshots of web pages and comparing them against baseline images to detect visual changes.

What are @percy/client's main functionalities?

Initialize Percy Client

This feature allows you to initialize the Percy client with your project token, which is necessary for authenticating API requests.

const Percy = require('@percy/client');
const percy = new Percy({ token: 'your-project-token' });

Create a Build

This feature allows you to create a new build in Percy. A build is a collection of snapshots that will be compared against the baseline images.

const build = await percy.createBuild();
console.log(`Build created: ${build.data.id}`);

Upload a Snapshot

This feature allows you to upload a snapshot to a specific build. A snapshot is a screenshot of a web page at different widths.

await percy.uploadSnapshot(build.data.id, {
  name: 'Home Page',
  url: 'http://localhost:3000',
  widths: [375, 768, 1280]
});

Finalize a Build

This feature allows you to finalize a build, which triggers Percy to process the snapshots and compare them against the baseline images.

await percy.finalizeBuild(build.data.id);
console.log('Build finalized');

Other packages similar to @percy/client

backstopjs

BackstopJS is a visual regression testing tool that uses headless browsers to capture screenshots of web pages and compare them against baseline images. Unlike @percy/client, BackstopJS is a standalone tool that does not require a separate service for storing and comparing images.

cypress

Cypress is an end-to-end testing framework that includes built-in support for visual testing through plugins like cypress-image-snapshot. While Cypress is primarily focused on functional testing, it can be extended to perform visual regression testing similar to @percy/client.

webdriverio

WebdriverIO is a testing framework for Node.js that supports visual regression testing through plugins like wdio-visual-regression-service. It allows you to capture and compare screenshots during your end-to-end tests, similar to @percy/client.

README

@percy/client

Communicate with Percy's API to create builds and snapshots, upload resources, and finalize builds and snapshots. Uses @percy/env to send environment information with new builds. Can also be used to query for a project's builds using a read access token.

• Usage
• Create a build
• Create, upload, and finalize snapshots
• Create, upload, and finalize comparisons
• Finalize a build
• Query for a build*
• Query for a project's builds*
• Wait for a build to be finished*

Usage

import PercyClient from '@percy/client'

const client = new PercyClient(options)

Options

• token — Your project's PERCY_TOKEN (default process.env.PERCY_TOKEN)
• clientInfo — Client info sent to Percy via a user-agent string
• environmentInfo — Environment info also sent with the user-agent string

Create a build

Creates a percy build. Only one build can be created at a time per instance. During this step, various environment information is collected via @percy/env and associated with the new build. If PERCY_PARALLEL_TOTAL and PERCY_PARALLEL_NONCE are present, a build shard is created as part of a parallelized Percy build.

await client.createBuild()

Create, upload, and finalize snapshots

This method combines the work of creating a snapshot, uploading any missing resources, and finally finalizng the snapshot.

await client.sendSnapshot(buildId, snapshotOptions)

Options

• name — Snapshot name
• widths — Widths to take screenshots at
• minHeight — Miniumum screenshot height
• enableJavaScript — Enable JavaScript for screenshots
• clientInfo — Additional client info
• environmentInfo — Additional environment info
• resources — Array of snapshot resources
  • url — Resource URL (required)
  • mimetype — Resource mimetype (required)
  • content — Resource content (required)
  • sha — Resource content sha
  • root — Boolean indicating a root resource## Create, upload, and finalize snapshots

Create, upload, and finalize comparisons

This method combines the work of creating a snapshot, creating an associated comparison, uploading associated comparison tiles, and finally finalizing the comparison.

await client.sendComparison(buildId, comparisonOptions)

Options

• name — Snapshot name (required)
• clientInfo — Additional client info
• environmentInfo — Additional environment info
• externalDebugUrl — External debug URL
• tag — Tagged information about this comparison
  • name — The tag name for this comparison, e.g. "iPhone 14 Pro" (required)
  • osName - OS name for the comparison tag; e.g. "iOS"
  • osVersion - OS version for the comparison tag; e.g. "16"
  • width - The width for this type of comparison
  • height - The height for this type of comparison
  • orientation - Either "portrait" or "landscape"
• tiles — Array of comparison tiles
  • sha — Tile file contents SHA-256 hash
  • filepath — Tile filepath in the filesystem (required when missing content)
  • content — Tile contents as a string or buffer (required when missing filepath)
  • statusBarHeight — Height of any status bar in this tile
  • navBarHeight — Height of any nav bar in this tile
  • headerHeight — Height of any header area in this tile
  • footerHeight — Height of any footer area in this tile
  • fullscreen — Boolean indicating this is a fullscreen tile

Finalize a build

Finalizes a build. When all is true, all-shards=true is added as a query param so the API finalizes all other parallel build shards associated with the build.

// finalize a build
await client.finalizeBuild(buildId)

// finalize all parallel build shards
await client.finalizeBuild(buildId, { all: true })

Query for a build

Retrieves build data by id.

Requires a read access token

await client.getBuild(buildId)

Query for a project's builds

Retrieves project builds, optionally filtered. The project slug can be found as part of the project's URL. For example, the project slug for https://percy.io/percy/example is "percy/example".

Requires a read access token

// get all builds for a project
await client.getBuilds(projectSlug)

// get all builds for a project's "master" branch
await client.getBuilds(projectSlug, { branch: 'master' })

Filters

• sha — A single commit sha
• shas — An array of commit shas
• branch — The name of a branch
• state — The build state ("pending", "finished", etc.)

Wait for a build to be finished

This method resolves when the build has finished and is no longer pending or processing. By default, it will time out if there is no update after 10 minutes.

Requires a read access token

// wait for a specific project build by commit sha
await client.waitForBuild({
  project: 'percy/example',
  commit: '40-char-sha'
}, data => {
  // called whenever data changes
  console.log(JSON.stringify(data));
})

Options

• build — Build ID (required when missing commit)
• commit — Commit SHA (required when missing build)
• project — Project slug (required when using commit)
• timeout — Timeout in milliseconds to wait with no updates (default 10 * 60 * 1000)
• interval — Interval in miliseconds to check for updates (default 10000)