AI agents are now live in Website Scanner! Enter your URL and fix website issues 3x faster with AI. Explore now!
No Result Found
Connect & Get help from fellow developers on our Discord community. Ask the CommunityAsk the Community

Run Percy visual tests in BrowserStack with the MCP server

Use natural language prompts in your AI assistant to instantly set up, run, and review Percy visual tests on your web projects with BrowserStack MCP server.

Use the BrowserStack MCP server to set up and run Percy visual testing directly from your coding assistant (such as GitHub Copilot, Claude, or Cursor). Skip manual setup and start visual testing with simple prompts.

To get started with BrowserStack MCP server, see the get started with BrowserStack MCP documentation.

To use Percy tools on the MCP server, you need a Percy license. Contact BrowserStack support to enable a license for your account.

Streamline visual testing with Percy

Use the following tools to add Percy snapshots, expand coverage, run visual scans, and review changes all through natural language prompts:

Add Percy snapshot commands (addPercySnapshotCommands)

Add Percy snapshot commands to your test files so Percy can take visual screenshots. Helpful when you already have tests and want visual checks.

Example prompts:

  • “Add Percy snapshot commands to all Playwright tests under tests/e2e/checkout.”
  • “Insert a Percy snapshot after major steps in tests/login.spec.ts with name prefix Login-.”

Expand Percy visual testing (expandPercyVisualTesting)

Configure or expand Percy visual testing for an existing project using Percy Web Standalone or Percy with BrowserStack Automate. The expandPercyVisualTesting tool detects the test files and adds the required Percy configurations and snapshots.

Example prompt: “Expand Percy coverage for project shop-web (Playwright). Add snapshots for checkout and PDP.”

Run Percy scan (runPercyScan)

Run a Percy visual build/scan from your current setup. Use this tool to trigger a scan.

Example prompt: “Run a Percy scan for project shop-web on branch feature/cart-badge.”

For more visual testing tools, refer to the section on Tool reference.

Tool reference

Percy supports a wide range of web frameworks and CI/CD integrations. For the latest supported frameworks and integrations, see the Percy documentation.

Example prompt Description Input parameters Invoked tool
Add Percy snapshot commands to all Playwright tests under tests/e2e/checkout. Adds Percy snapshot commands to your test files so Percy can take visual screenshots. Helpful when you already have tests and want visual checks.
Returns: List of files updated with snapshot commands.		 • testFilePaths (required): Array of test file paths
• snapshotNamePrefix (optional): Prefix for snapshot names		 addPercySnapshotCommands
Expand Percy coverage for project shop-web (Playwright). Add snapshots for checkout and PDP. Sets up or expands Percy visual testing for an existing project. Detects files and adds needed configs/snapshots.
Returns: List of files updated, config changes, and snapshot coverage summary.		 • projectName (required): Project name
• framework (required): Framework type
• targetFiles (optional): Array of files/folders to expand coverage		 expandPercyVisualTesting
Run a Percy scan for project shop-web on branch feature/cart-badge. Runs a Percy visual build/scan from your current setup.
Returns: Percy build ID, status, and link to results.		 • projectName (required): Project name
• branch (optional): Branch name		 runPercyScan
Fetch visual change summary for the latest Percy build in shop-web. Shows a summary of all visual changes between the latest Percy build and the previous one.
Returns: AI-generated summary of changes, per-snapshot diffs.		 • projectName (required): Project name fetchPercyChanges
List all test files under tests/e2e and specs/flows. Lists test files in chosen folders.
Returns: Array of test file paths.		 • folderPaths (required): Array of folder paths listTestFiles
Approve Percy build bld_9731 with note ‘New header styles baseline’. Approves or rejects a Percy build. Approval sets a new visual baseline for future compares.
Returns: Build approval status, notes.		 • buildId (required): Percy build ID
• action (required): approve/reject
• note (optional): Approval/rejection note		 managePercyBuildApproval
Integrate Percy for this project using percyVisualTestIntegrationAgent. Full onboarding for new Percy users. Detects tech stack, installs SDK and deps, adds snapshots, runs Build 1, simulates a safe UI change, runs Build 2, shows diffs, then reverts the demo changes.
Returns: Onboarding summary, demo diff, and next steps.		 • projectPath (required): Path to project root percyVisualTestIntegrationAgent

Example: Using MCP server with Percy using Github Copilot agent on VS Code

Example of GitHub Copilot agent using Percy MCP server to configure visual testing, with automated tool responses displayed in the VS Code terminal

Common workflows

The following workflows are supported on the BrowserStack MCP server to accomplish complex testing scenarios. Each workflow shows the sequence of tools and automated actions that streamline common development tasks:

Ensure you have active licenses for all the BrowserStack products (e.g., Percy, App Automate, Automate) included in your workflows before running these prompts. Contact BrowserStack support to enable a license for your account.

Percy setup for new users

Get Percy running and see visual diffs in minutes.
Tools invoked: percyVisualTestIntegrationAgent

Example prompt:

“Integrate Percy in shop-web and show a two-build diff demo.”

Automated actions (What the MCP server does):

  1. Detects stack (framework/language).

  2. Installs Percy SDK and dependencies.

  3. Adds snapshot commands in a few tests.

  4. Runs Build 1 on BrowserStack.

  5. Simulates a small UI change.

  6. Runs Build 2.

  7. Shows visual diffs (what changed).

  8. Reverts the demo change (keeps setup).

Percy setup and expansion, run scan, AI change summary, and approve baseline build

Expand Percy visual testing by adding Percy snapshots commands in relevant test cases, get a simple natural language summary of visual changes compared to the baseline build, and set the baseline build.
Tools invoked: percyVisualTestIntegrationAgent or expandPercyVisualTesting, runPercyScan, fetchPercyChanges, managePercyBuildApproval

Example prompt:

“Expand Percy coverage for PDP (Product Detail Page) and Cart test cases, run a scan, summarize visual changes, then approve if only header color changed.”

Automated actions (What the MCP server does):

  1. Sets up or expands Percy coverage.

  2. Runs a Percy scan using runPercyScan.

  3. Summarizes visual changes using fetchPercyChanges.

  4. Approves or rejects as baseline using managePercyBuildApproval.

Expand Percy coverage on test cases (existing users)

Expand Percy Coverage by taking snapshots across key test cases.
Tools invoked: expandPercyVisualTesting, listTestFiles, addPercySnapshotCommands

Example prompt:

“List Playwright specs under tests/flows, then add Percy snapshots for the test cases after login and before checkout.”

Automated actions (What the MCP server does):

  1. Lists candidate files using listTestFiles.

  2. Plans where to snapshot (key pages/states).

  3. Inserts snapshots using addPercySnapshotCommands.

  4. Runs Percy scan and reviews results.

Need help?

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked





Thank you for your valuable feedback

  • ON THIS PAGE

    Is this page helping you?

    Yes
    No

    We're sorry to hear that. Please share your feedback so we can do better

    Contact our Support team for immediate help while we work on improving our docs.

    We're continuously improving our docs. We'd love to know what you liked





    Thank you for your valuable feedback!

    Talk to an Expert
    Download Copy Check Circle