Visual Testing Best Practices

Name: testing-visual
Rating: 65
Author: blueprintui

Visual tests capture screenshots of components to detect visual regressions across changes. They ensure consistent rendering across themes and component states.

Commands

bash

# Run visual tests (warn slow to complete)
pnpm run test:visual

# Run single file visual test
pnpm run test:visual -- src/COMPONENT_DIR/element.visual.ts

Test File Structure

•Performance test files should be named element.visual.ts
•Place them alongside the component file in the same directory

Test Template

typescript

import { html } from 'lit';
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
import { visualDiff } from '@web/test-runner-visual-regression';
import { createVisualFixture, removeFixture } from '@blueprintui/test';
import * as component from './element.examples.js';
import '@blueprintui/components/include/component.js';

describe('bp-component', () => {
  let fixture: HTMLElement;

  beforeEach(async () => {
    fixture = await createVisualFixture(
      html`
        ${unsafeHTML(component.example())} ${unsafeHTML(component.vertical())} ${unsafeHTML(component.horizontal())}
        ${unsafeHTML(component.compact())} ${unsafeHTML(component.validation())}
      `,
      { width: '800px', height: '600px' } // Optional sizing
    );
  });

  afterEach(() => {
    removeFixture(fixture);
  });

  it('light theme', async () => {
    await visualDiff(fixture, 'component/light.png');
  });

  it('dark theme', async () => {
    document.documentElement.setAttribute('bp-theme', 'dark');
    await visualDiff(fixture, 'component/dark.png');
  });
});