Add VRT (Visual Regression Testing) with Playwright + Storybook

[Copilot]

Adds screenshot-based visual regression testing leveraging the existing 25 Storybook stories and Playwright's built-in toHaveScreenshot comparison.

Changes

• Playwright config (packages/storybook/playwright.config.ts): Chromium-only, auto-starts http-server against the built Storybook static output
• VRT test (packages/storybook/vrt/vrt.spec.ts): Data-driven test covering 16 stories across core rendering (rect, circle, rrect, text, flex, canvas, path, image), compositing (clip layers, rasterizing), and React components (canvas, text, chunk, scroll-view)
• Baseline snapshots (vrt/__snapshots__/*.png): 16 baseline PNGs committed for comparison
• Scripts: pnpm test:vrt / pnpm test:vrt:update at both package and root level
• Docs: VRT usage section added to README

Usage

pnpm build:storybook    # required: build static storybook first
pnpm test:vrt           # run visual regression tests
pnpm test:vrt:update    # regenerate baselines after intentional changes

Adding new VRT cases

Add an entry to the stories array in vrt/vrt.spec.ts:

{ id: 'category--story-id', name: 'screenshot-name' }

Story IDs are visible in storybook-static/index.json or Storybook's URL bar. Run test:vrt:update to generate the new baseline.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• storybook.js.org
  • Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node node /home/REDACTED/work/canvas-ui/canvas-ui/packages/storybook/node_modules/.bin/../storybook/bin/index.cjs build (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

---

This section details on the original issue you should resolve

<issue_title>增加 VRT（视觉回归）测试</issue_title>
<issue_description>为 alibaba/canvas-ui 项目增加 VRT（视觉回归测试，Visual Regression Test），以确保 UI 组件在修改和升级过程中视觉效果不被意外破坏。

建议方案：

• 选型常用的 VRT 工具如 Percy、Loki 或 Chromatic，或根据项目技术栈采用适合的方案。
• 集成到现有测试流程或 CI/CD。
• 编写基础用例覆盖重要组件。
• 文档说明 VRT 测试用法及开发规范。

如有现有的测试基础，可按需补充。

欢迎讨论具体工具选型或用例范围！</issue_description>

<agent_instructions>注意评估各个 VRT 测试的实现难度，我倾向于使用现有 Storybook 实现 VRT，方便维护测试代码</agent_instructions>

Comments on the Issue (you are @copilot in this section)

• Fixes 增加 VRT（视觉回归）测试 #44

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}