Compare Visual Changes against Alternate Environment

Easily compare visual differences between your current and alternate environments.

Visual scanning continuously observes and analyzes the visual elements of a system, application, or website. It helps you maintain a bug-free experience by conducting quick checks on specified URLs and scheduling routine scans.

The Compare with alternate environment feature allows you to analyze differences between environments, such as staging and production or staging and local, within the same scan. This feature is particularly helpful for teams aiming to identify visual discrepancies early, reduce deployment risks, and ensure a consistent user experience across environments.

To use this feature, follow these steps:

Step 1: Sign in to Percy, navigate to Visual Scanner, and you are redirected to the Website Scanner. Click Create a new scan.

Step 2: Enter the page URL in the Enter page URL field, then either manually add it using Add manually or use Add via sitemap. Click Add page or Add sitemap to include it in the scan. Click Next.

Step 3: After adding pages, you see Compare with an alternate environment (currently works only for Visual Scan). Toggle this option, and the Enter alternate environment URL field appears. Enter a valid staging domain name, and the corresponding pages are added automatically. Click Next.

Step 4: Create a scan by entering the required fields.

Step 5: To review the scan results, select the scan you created from the Scan Summary page and click the external links to view the visual differences on the Percy dashboard. The URL specified in the alternate environment is compared to the scan URL labeled as the Baseline scan.

By using the Visual Scanner and the Compare with alternate environment feature, you can seamlessly monitor visual changes, ensuring consistency and reliability across your environments.