Skip to content

Set up Playwright-based visual regression tests #23

@kurtbruns

Description

@kurtbruns

Goal

Establish a comprehensive reference image set that serves as the ground truth for the library's visual output. This is a prerequisite for any large refactoring effort (e.g., #27 Node.js support).

Details

  • Add Playwright as a dev dependency (in wumbo-site-images initially, move to vector repo later)
  • Use headless Chromium to render scenes and capture screenshots against the FIGMA export target (which already produces fully self-contained, flattened SVGs)
  • Compare against stored reference PNGs (committed to repo)
  • Runnable via npm test or dedicated script, suitable for CI
  • Comprehensive coverage:
    • Core math visuals: plots, coordinate systems, functions, labeled points, TeX
    • Light and dark theme variants
    • Animation key frames (start, middle, end)
    • Interactive elements (sliders, controls) in default states
    • 3D scenes and edge cases

Why

This is the safety net that enables all subsequent refactoring. The current export pipeline already produces correct, fully-inlined SVGs — these tests capture what "correct" looks like so that future changes can be validated against it.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions