Use Case

Automated Testing & QA

Q: How do I integrate screenshot testing into my CI/CD pipeline?

Add screenshot capture as a step in your GitHub Actions, GitLab CI, or Jenkins pipeline. Capture screenshots after deployment and compare them against baseline images using visual diff tools like Percy or Chromatic.

Q: What's the best way to handle visual test baselines?

Store baseline screenshots in version control or a dedicated storage service. Update baselines when intentional UI changes are made, and use automated diff tools to detect unintended changes.

Q: Can I test responsive designs across multiple viewports?

Yes! Capture the same page at different viewport sizes (mobile, tablet, desktop) to ensure responsive designs work correctly. Our API supports custom viewport dimensions for comprehensive testing.

Q: How do I handle dynamic content in visual tests?

Use our AI-powered element removal to hide timestamps, user-specific data, and dynamic elements. You can also use CSS selectors to hide specific elements that change between test runs.

Integrate visual testing into your CI/CD pipeline. Capture screenshots for regression testing and visual diff comparisons.

Overview

Visual bugs are some of the hardest to catch with traditional unit and integration tests. A button might technically "work" but be invisible, misaligned, or styled incorrectly. Visual regression testing catches these issues before they reach production.

Screenshotly provides consistent, reliable screenshot capture that integrates seamlessly with visual testing workflows. Unlike self-hosted Puppeteer setups that drift over time due to browser updates and configuration differences, our cloud-based capture ensures identical rendering conditions every time.

Use our screenshots as baselines for visual diff tools like Percy, Chromatic, or your own comparison logic. Capture multiple viewport sizes to verify responsive designs. Test across different states (logged in, logged out, error states) to ensure UI consistency. With our API, visual testing becomes a first-class citizen in your CI/CD pipeline.

Key Benefits

Visual regression testing

Cross-browser comparison

Automated QA workflows

CI/CD integration

Results You Can Expect

73%

more visual bugs caught pre-production

< 30s

to capture full page suite

infrastructure maintenance needed

How It Works

Define critical UI states and pages to test (login, dashboard, checkout, etc.)

Capture baseline screenshots during a stable release

Integrate screenshot capture into your CI pipeline (on PR or push)

Compare new captures against baselines using diff tools

Alert on significant visual changes and update baselines as needed

Code Example

// Visual testing integration
const captureForTesting = async (urls: string[]) => {
  const screenshots = await Promise.all(
    urls.map(url => 
      fetch('https://api.screenshotly.app/screenshot', {
        method: 'POST',
        headers: {
          'Authorization': 'Bearer YOUR_API_KEY',
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          url,
          device: 'desktop',
          format: 'png',
        }),
      })
    )
  );
  return screenshots;
};

Frequently Asked Questions

How do I integrate screenshot testing into my CI/CD pipeline?

Add screenshot capture as a step in your GitHub Actions, GitLab CI, or Jenkins pipeline. Capture screenshots after deployment and compare them against baseline images using visual diff tools like Percy or Chromatic.

What's the best way to handle visual test baselines?

Store baseline screenshots in version control or a dedicated storage service. Update baselines when intentional UI changes are made, and use automated diff tools to detect unintended changes.

Can I test responsive designs across multiple viewports?

Yes! Capture the same page at different viewport sizes (mobile, tablet, desktop) to ensure responsive designs work correctly. Our API supports custom viewport dimensions for comprehensive testing.

How do I handle dynamic content in visual tests?

Use our AI-powered element removal to hide timestamps, user-specific data, and dynamic elements. You can also use CSS selectors to hide specific elements that change between test runs.

Want a step-by-step walkthrough?

Read: Visual Regression Testing Guide →

Ready to automate testing?

Get started with 100 free screenshots. No credit card required.

Start Free Trial Try Playground