Visual regression testing for Angular applications

Page-level tests with Playwright

Let Playwright start the Angular dev server and run screenshot assertions against it. The webServer option waits until the app responds before tests begin.

// playwright.config.ts
import { defineConfig } from '@playwright/test';

export default defineConfig({
  webServer: {
    command: 'npm run start',
    url: 'http://localhost:4200',
    reuseExistingServer: !process.env.CI,
  },
  use: { baseURL: 'http://localhost:4200' },
});

// e2e/home.spec.ts
import { test, expect } from '@playwright/test';

test('dashboard layout', async ({ page }) => {
  await page.goto('/dashboard');
  await expect(page).toHaveScreenshot({ fullPage: true });
});

Component snapshots with Storybook

Storybook supports Angular. Writing stories for shared components gives you isolated states — empty, loading, error, long text — that can be snapshot-tested with Chromatic or the Storybook test runner.

Angular-specific stability tips

Wait for the app to be stable before capturing, and keep data deterministic.

• Disable Angular animations in test builds
• Mock HTTP responses with fixed data
• Load fonts locally instead of from a CDN
• Test i18n builds per locale

Localized Angular builds

Angular’s built-in i18n produces one build per locale. Each locale needs its own baselines, and text expansion in German or Finnish is a frequent source of visual regressions.

Or skip the test code entirely

Code-based visual tests only cover the pages and states someone wrote a test for, and only run when the pipeline runs. VisualRunner captures production pages from a sitemap, crawl or URL list, across languages and viewports, and monitors them on a schedule — so CMS edits, translations and third-party scripts are caught too. Engineers can still trigger a monitor from CI through the API.