Integrate Percy with Cloudflare Pages

Integrate Percy with Cloudflare Pages, a JAMstack platform for frontend developers

Follow these steps to integrate Percy with Cloudflare Pages:

Configuring Cloudflare Pages environment variables

Start by configuring PERCY_TOKEN, our project-specific, write-only API token. It can be found in your Percy project settings.

In your Cloudflare Pages project, go to Settings > Environment variables and add PERCY_TOKEN. Use the Encrypt option to keep the value hidden in build logs.

Alternatively, you can export the variable as part of your build script:

Commit, branch, and pull request information

Percy auto-detects Cloudflare Pages builds via the CF_PAGES environment variable and reads the following native Cloudflare variables:

• CF_PAGES_COMMIT_SHA — commit SHA
• CF_PAGES_BRANCH — branch name

Cloudflare Pages does not natively expose pull request information to the build environment. To populate the PR field, configure your environment to include PERCY_PULL_REQUEST. See the environment variables docs page for more details.

Run your tests

With your environment configured, run your Percy snapshots via your test suite or another mechanism. Your Percy build will be created with the correct meta-data.

Parallelized build processes

Percy automatically uses Cloudflare Pages’ CF_PAGES_COMMIT_SHA as the parallel build nonce. Set PERCY_PARALLEL_TOTAL to the total number of parallel runs. Because the nonce is the commit SHA, parallel runs from separate redeployments of the same commit will share a nonce; if you need those builds to remain distinct, override PERCY_PARALLEL_NONCE with a unique value per redeploy. See Parallel test suites for more details.

Reference Topic

• Webhook Payloads