验证 wweb.dev 上的变更
使用 React 岛屿的完全静态 Astro 站点——验证意味着在浏览器中加载构建好的页面并与水合后的岛屿进行交互。
构建 + 服务
yarn install # 如果缺少服务器依赖项(server.mjs 需要 compression/express)
yarn build # 静态构建 → dist/(内嵌 TZ=UTC)
yarn serve # 生产服务器在 http://localhost:4321 上(非 astro preview)
node server.mjs 在 Yarn PnP 相关设置下会直接失败——始终通过 yarn serve 运行。在后台运行;使用 curl -s -o /dev/null -w "%{http_code}" http://localhost:4321/<route> 探测。
驱动页面
仓库中没有 Playwright。在临时目录中安装 playwright-core,并使用系统 Chrome(chromium.launch({ channel: 'chrome', headless: true }))——无需下载浏览器。岛屿是 client:visible 的,因此在断言之前等待岛屿渲染的选择器,并为动画留出约 1 秒。
对生成器工具有用的检查:
- 注入的
<style>输出的计算样式(animation-name、position、size) - 用于可复制 HTML/CSS 代码的 textarea
.inputValue() - 1440px 和约 480px 的截图(多个工具侧边栏在移动设备上切换为
column-reverse)
注意事项
- 控制台应无错误。Vite 资源内联已禁用(
astro.config.mjs中assetsInlineLimit: 0),因为数据 URI 字体违反了 CSP 的font-src 'self'——如果再次出现数据 URI CSP 错误,说明该设置已丢失。 yarn test:parity需要test/baseline/(生产 HTML 快照)但未被检入;没有它测试框架会报 ENOENT 错误。无论如何,它不能替代浏览器验证。