How to Compare Environments in Sitepager

Sitepager’s Environment Comparison feature allows you to compare two different environments of your website, such as staging and production, to detect visual and SEO differences.

This guide provides a step-by-step approach to setting up a Check for comparing environments and making the most of this feature.

Why Compare Environments?

Comparing environments helps ensure that:

• Updates are accurately reflected across environments, and new features are thoroughly tested before deployment.

• Content updates are correctly applied across environments, ensuring consistency.

• SEO metadata is optimized and complete, ensuring that no critical tags, descriptions, or headers are missing or unintentionally changed after modifications.

• Visual regressions are caught early.

Flexible Environment Pairings

Sitepager allows you to compare any two environments, customized to your specific needs. Common comparisons include:

• Development vs. Staging: Validate initial changes and ensure stability before moving forward.

• Testing vs. Production: Identify potential issues in testing branches before deployment.

• Staging vs. Production: Confirm that updates and changes are accurately reflected before going live.

• A/B Variant Testing: Compare versions (e.g., Test A vs. Test B) to spot visual and SEO differences.

This flexibility ensures your workflows adapt seamlessly to different stages of your deployment pipeline.

Setting Up an Environment Comparison Check

Follow these steps to set up an environment comparison in Sitepager:

1. Start a New Check:
   Navigate to the All Checks page and click on Create New Check.

2. Enter Primary Environment Details:

   • Website URL: Enter the URL of the environment you want to test (e.g., staging).

3. Enable Environment Comparison:
   Check the box labeled Compare with another Environment and provide the URL for the comparison environment (e.g., production). In this setup, the Comparison URL (e.g., production) acts as the baseline, and the Website URL (e.g., staging) is tested against it.

4. Customize the Check as Needed:
   Configure advanced options to fine-tune your Check:

   • Page Load Wait Time: Adjust for environments with dynamic loading.

   • Visual Comparison Threshold: Define the sensitivity for detecting pixel-level differences.

   • Include/Exclude Patterns: Limit or refine the pages to compare.

   • Selectors for Dynamic or Interactive Elements: Specify selectors to exclude dynamic content, such as carousels, or to simulate hover and click actions for interactive elements.

5. Name and Start the Check:
   Provide a descriptive name for your Check (e.g., "Desktop-Staging-vs-Prod") and click Start Check.

The Check configuration will be automatically saved in the All Configs tab, allowing you to re-run it anytime to compare environments again as needed.

Analyzing Comparison Results

Once the Check is complete, the results are accessible via the Check Report page. The report includes:

1. Visual Differences:

   • Screenshots highlight areas with differences.

2. SEO Differences:

   • Report lists missing or modified metadata, such as alt tags, meta descriptions, or headers.

Best Practices for Environment Comparison

• Ensure Relevant URLs: Clearly define the Website and Comparison URLs to ensure you're targeting the intended environments (e.g., staging vs. production).

• Test Before Deployment: Run Checks on staging environments to identify issues before pushing to production.

• Focus on Key Pages: Use Include and Exclude patterns to test high-priority pages such as landing pages, product pages, or pricing sections.

• Validate SEO and Visual Changes: Pay attention to both content (e.g., alt tags, meta descriptions) and visual differences to catch regressions effectively.

• Adjust Configurations as Needed: Use advanced options like visual thresholds and page wait times to optimize accuracy for environments with dynamic content or interactive elements.

Next Steps

• Optimize Your Comparison Check:

  • How to Configure Visual Comparison Thresholds – Fine-tune sensitivity to detect meaningful changes.

  • How to Include and Exclude Pages – Focus on specific areas of your environments.

  • How to Use Dynamic Content Selectors – Exclude dynamic content like carousels or animations to focus on consistent elements of your page.

• Analyze Your Results:

  • Dive deeper into the Understanding Check Results guide to interpret detected differences effectively.

For additional support, contact us via in-app chat.