How to Use Reg-suit with Angular Website Screenshots

Reg-suit compares screenshot image files; it does not render Angular pages or capture screenshots. For an Angular site, first capture deterministic screenshots with a browser workflow such as Puppeteer, place them in a known directory, configure that directory as Reg-suit’s actualDir, then run Reg-suit in CI to compare against the expected baseline and publish a report.

The workflow has two separate jobs: the browser produces the images, and Reg-suit compares and reports them. The first run can establish a published snapshot set when no baseline exists; later runs compare new images against the expected set. Reg-suit’s project site describes its comparison and HTML reporting role.

1. Choose what to capture

Use Puppeteer against the running Angular website when you need route-level screenshots of complete pages. Use Storybook stories when you want to capture isolated component states. Reg-suit’s project examples include Angular workflows with Puppeteer and Storybook-related tooling. Check current framework, Storybook, and add-on compatibility before selecting a particular capture package: an example existing in a repository does not guarantee that its current versions support your setup.

Approach	Good fit	Decisions to make
Puppeteer against Angular routes	Full pages, navigation, and application states	How to start the app, seed state, wait for readiness, and select routes
Storybook stories	Reusable components and defined component states	Which capture add-on supports your Angular and Storybook versions

2. Install and configure Reg-suit

Add Reg-suit to the project and run its initializer. The initializer guides configuration such as the directory containing actual screenshots, key generation, and publishing or notification plugins. The Reg-suit README documents Git-hash and simple key-generation plugins, publisher plugins, and notifier plugins; consult its current instructions for exact package commands and supported versions.

At minimum, configure actualDir to the directory your capture script writes to. Configure a working directory and choose a thresholdRate deliberately: it influences comparison behavior, so do not blindly copy an example value. Select a key-generation strategy that fits how your CI branches identify snapshots, and configure a publisher for where reports and expected images should be stored.

# Add Reg-suit using the current installation instructions in its README,
# then start its interactive configuration:
npx reg-suit init

Reg-suit configuration and plugin details: official Reg-suit repository and README.

3. Capture Angular pages with Puppeteer

The following is a runnable capture-script pattern for an existing Angular app served at http://localhost:4200. Install Puppeteer using its current official package instructions, save this as capture.cjs, and make sure the app is running before invoking it. The script sets a fixed viewport, visits a route, waits for Angular’s root element, and writes a PNG into screenshots/, which must match Reg-suit’s configured actualDir.

const fs = require('node:fs/promises');
const path = require('node:path');
const puppeteer = require('puppeteer');

async function main() {
  const outputDir = path.resolve('screenshots');
  await fs.mkdir(outputDir, { recursive: true });

  const browser = await puppeteer.launch({ headless: true });
  try {
    const page = await browser.newPage({
      viewport: { width: 1440, height: 900 },
      deviceScaleFactor: 1,
    });

    // Keep animations from producing transient visual differences.
    await page.emulateMediaFeatures([
      { name: 'prefers-reduced-motion', value: 'reduce' },
    ]);

    const response = await page.goto('http://localhost:4200/', {
      waitUntil: 'networkidle0',
      timeout: 60000,
    });
    if (!response || !response.ok()) {
      throw new Error(`Navigation failed: HTTP ${response && response.status()}`);
    }

    // Replace or extend this with an app-specific ready condition when needed.
    await page.waitForSelector('app-root');
    await page.screenshot({
      path: path.join(outputDir, 'home.png'),
      fullPage: true,
      type: 'png',
    });
  } finally {
    await browser.close();
  }
}

main().catch((error) => {
  console.error(error);
  process.exitCode = 1;
});

For a route that renders after asynchronous data arrives, wait for a meaningful application-specific selector or state rather than assuming navigation completion means the page is ready. For example, replace the generic root-element wait with a selector that only appears when the relevant page content has loaded. Keep test data fixed and avoid capturing personalized or time-varying content.

Capture multiple routes

Use stable filenames so the same page maps to the same image between runs. Ensure each route has a known ready condition. This small extension captures a list of paths; adapt the selectors to your app where routes have different readiness states.

const routes = [
  { name: 'home', path: '/' },
  { name: 'pricing', path: '/pricing' },
];

for (const route of routes) {
  await page.goto(`http://localhost:4200${route.path}`, {
    waitUntil: 'networkidle0',
    timeout: 60000,
  });
  await page.waitForSelector('app-root');
  await page.screenshot({
    path: path.join(outputDir, `${route.name}.png`),
    fullPage: true,
    type: 'png',
  });
}

Place this loop after creating page in the earlier script. If a page continually polls or opens long-lived requests, networkidle0 may never be reached; use a more specific readiness condition and an appropriate navigation strategy for that application.

4. Run capture before Reg-suit in CI

The sequence matters: build or serve Angular, capture images, then run Reg-suit. The Reg-suit Puppeteer example demonstrates this ordering with a capture script followed by npx reg-suit run. Its CI configuration is an older example, so use it to understand the workflow rather than copying old CI syntax or package versions verbatim.

# Example job steps; adapt commands to your Angular build and CI provider.
npm ci
npm run build
npm run serve:ci &
# Wait for the local server using your CI provider's readiness mechanism.
node capture.cjs
npx reg-suit run

Keep cloud credentials in your CI provider’s secret-management system, not in tracked project files. A common publisher example uses the Reg-suit S3 plugin. S3 is one supported integration example, not a requirement; choose a publisher and key strategy that match your storage and branch workflow. Notifications, including pull-request reporting through configured integrations, are optional.

5. Establish and review the baseline

1. Run capture and confirm that the expected PNG files exist in the configured actual-image directory.
2. Run npx reg-suit run with the publisher and key-generation configuration available.
3. On an initial run with no previous snapshots, expect new items because there is no baseline to compare against. The published result provides snapshots for subsequent comparisons.
4. For later runs, open the generated report and inspect visual differences. Decide whether each change is intended before accepting the new appearance as the baseline.

Reg-suit’s CLI also provides lower-level workflow commands for synchronizing expected images, comparing, and publishing. Use the combined run workflow unless you have a reason to manage those stages separately.

Make screenshots repeatable

Visual comparisons become noisy when the capture environment changes between runs. Keep these inputs stable:

• Viewport and scale: Use fixed width, height, and device scale factor.
• Application data: Use predictable fixtures or a controlled test account; avoid changing production data.
• Fonts and assets: Wait for the content you compare to render, and make sure required fonts are available before capture.
• Motion: Disable or reduce animations, transitions, and blinking cursors where practical.
• Time-dependent content: Freeze or control clocks, rotating content, randomized values, and personalized elements if they appear in the capture.
• Browser environment: Keep the browser version and CI environment consistent where possible.
• Page readiness: Prefer a selector or application condition that reflects loaded content. A fixed delay can race slow runs and waste time on fast ones.

These are workflow recommendations based on the need for stable browser captures; the example repositories do not establish performance guarantees for any specific Angular application.

Storybook capture considerations

Stories make it easier to capture component states without navigating the full website. Storybook’s Angular visual-testing material presents stories as repeatable test specifications within a broader testing workflow. Reg-suit’s examples list an Angular project using Storybook and screenshot tooling.

Check the exact capture add-on’s current compatibility and maintenance before adopting it. For example, the storybook-chrome-screenshot repository lists an Angular demo while its feature list says Angular support remained a TODO. The storycapture listing describes Puppeteer-based screenshot generation and framework-independent use, including Angular, but verify that its current versions work with your project. A listed demo is not a compatibility guarantee.

Performance, reliability, and cost

• Performance: Capture only the routes and component states that provide useful coverage. Full-page screenshots and more browser sessions add work; choose a fixed viewport and explicit readiness conditions to avoid unnecessary waiting. The research sources provide no benchmark figures.
• Reliability: Run capture and comparison in the same controlled CI workflow, fail clearly when a route cannot load or a screenshot is missing, and preserve CI logs and report access for review. Use CI secrets for publisher credentials.
• Storage and cost: Reg-suit can publish images and reports to external cloud storage; the Puppeteer example uses S3. Storage and CI costs depend on your chosen provider and workload. The available sources do not state pricing or usage costs.

Troubleshooting

Symptom	Likely cause	Fix
Reg-suit finds no actual images	The capture script wrote to a different directory than actualDir, or it ran after Reg-suit.	Check the screenshot output path, confirm files exist, and run capture first.
Navigation times out	The local server is not ready, the URL is wrong, or a page never becomes idle because of ongoing requests.	Wait for server readiness in CI, verify the route, and use a page-specific readiness condition where network idle is unsuitable.
Screenshot is blank or incomplete	The capture happened before Angular rendered the content or before asynchronous data arrived.	Wait for a selector or application state that confirms the target content is ready; validate the app’s test data and server logs.
Images differ on every run	Dynamic content, animation, font loading, viewport changes, or browser environment differences create noise.	Stabilize data and viewport, reduce motion, wait for fonts/content, and keep the capture environment consistent.
First run reports every image as new	No prior expected snapshot set exists.	Review the initial images and report, then use the published snapshots as the comparison baseline for later runs.
Publishing fails in CI	Publisher configuration is incomplete, credentials are missing, or the configured key/storage strategy is wrong.	Check the selected plugin’s current instructions, CI secret names and permissions, bucket or storage settings, and branch key configuration.
Storybook capture does not work with Angular	The selected add-on may not support the installed Angular or Storybook versions.	Check current compatibility and maintenance; choose a supported workflow or capture the running Angular app with Puppeteer.

Or skip the browser setup

ScreenshotNeo can return a website screenshot with one API request. It removes cookie banners, newsletter popups, and chat widgets before capture. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed; response headers report the page verdict and billing status. Its MCP server lets AI agents use take_screenshot, get_page_info, and capture_pdf. The free plan includes 1,000 screenshots per month with no card, and paid plans start at $5 for 3,000 screenshots.

See the ScreenshotNeo API documentation. Example cURL request:

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

Python:

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
    timeout=90,
)
open("shot.webp", "wb").write(r.content)

Node.js:

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
await require('node:fs/promises').writeFile('shot.webp', Buffer.from(await res.arrayBuffer()));

Learn about ScreenshotNeo and sign up for 1,000 free screenshots a month with no card.

FAQ

Does Reg-suit take the screenshot?

No. A browser or screenshot workflow must create image files before Reg-suit compares them.

Do I need S3?

No. S3 is one documented publisher example. Reg-suit uses configured publisher integrations for external snapshot and report storage.

Should I compare full pages or components?

Use route captures for page-level behavior and Storybook stories for isolated component states. Many teams choose based on which states are easiest to make deterministic and useful to review.

Can I use a fixed sleep to wait for Angular?

A fixed delay can work for a simple demo, but a condition tied to the page’s actual ready state is more robust when render time varies.