test(e2e): add Playwright visual regression tests

[Alain-L]

Summary

Add visual regression tests using Playwright to catch unintended UI changes.

Usage

# Generate snapshots (first time or after UI changes)
npm run test:e2e:update

# Run tests (compare against existing snapshots)
npm run test:e2e

What's included

• 171 tests: 14 samples × 4 tabs (Plan, Grid, Raw, Stats) + Home page × 3 browsers
• Browsers: Chromium, Firefox, WebKit
• Snapshots: Generated locally, not committed (each dev/CI generates their own)

Files added/modified

File	Change
e2e/visual.spec.ts	Test file
playwright.config.ts	Playwright configuration
package.json	Scripts and devDependency
vitest.config.ts	Exclude e2e/ from unit tests
example/src/App.vue	Expose window.samples for tests
.gitignore	Exclude snapshots and reports

Notes

window.samples exposure: Tests load samples via window.samples instead of navigating through the UI. This is faster and more stable, but requires exposing data on window. This could be wrapped in if (import.meta.env.DEV) if preferred.

Snapshots not committed: Snapshots are generated locally and excluded from git. This avoids bloating the repo but means each environment generates its own baseline, which can cause inconsistencies (fonts, rendering). Committing CI-generated snapshots as reference could be considered to follow best practices.

Screenshots in HTML report: By default, screenshots only appear in the report on failure. To include them for passing tests, use testInfo.attach():

test("Plan tab", async ({ page }, testInfo) => {
  // ...
  await testInfo.attach("screenshot", { body: await page.screenshot(), contentType: "image/png" })
  await expect(page).toHaveScreenshot(...)
})