This tool fetches snapshots from a specific Percy build via the BrowserStack/Percy API, calculates visual and AI diff percentages, and provides a downloadable CSV report.
- Clone the repository and install dependencies:
npm install
- Get your Token:
- Log into Percy.io.
- Go to Project Settings.
- Copy the Read-only Token.
- Run the App:
npm run dev
- Enter Token: Paste your Percy Read-only token into the first input field.
- Enter Build URL: Paste the full URL of the build you want to analyze (e.g.,
https://percy.io/org/project/builds/1234567). - Generate Report: Click "Get Report". The app will:
- Identify the project slug and organization.
- Fetch all snapshots (handling pagination automatically).
- Calculate diff ratios as percentages.
- Export: Use the "Download CSV" button to save the results for stakeholder reporting.
| Column | Description |
|---|---|
| Snapshot Name | The name defined in your test suite. |
| Visual Diff % | The percentage of pixels changed across all viewports. |
| Percy URL | A direct deep-link to the /changed/ view for that snapshot. |
- Framework: Next.js (App Router)
- Styling: Tailwind CSS + DaisyUI
- Notifications: React-Toastify
- API: Percy JSON:API v1