View Transitions 与 Playwright 端到端测试与过渡验证

View Transitions 与 Playwright 端到端测试与过渡验证概述端到端测试需要在动画与过渡存在时保持稳定与可重复。本文给出在 Playwright 中的动画禁用、等待过渡完成与视觉回归策略。关键参数/概念动画禁用：截图断言可设置 `animations: 'disabled'`，稳定视觉结果。等待过渡：监听过渡结束或 DOM 稳定后再断言。可访问性偏好：测试中可切换 `prefers-reduced-motion` 模式验证降级路径。实践/示例// 示例：禁用动画进行截图比对 import { test, expect } from '@playwright/test' test('导航过渡视觉稳定', async ({ page }) => { await page.goto('/list') await page.click('a.to-detail') // 等待新视图元素出现 await page.waitForSelector('.detail-title') // 截图断言禁用动画，减少过渡影响 expect(await page.screenshot({ animations: 'disabled' })).toMatchSnapshot('detail.png') }) // 示例：INP/LCP 采集与过渡完成等待（简化） test('过渡完成后采集指标', async ({ page }) => { await page.goto('/list') await page.click('a.to-detail') await page.waitForSelector('.detail-title') const metrics = await page.evaluate(() => { return performance.getEntriesByType('largest-contentful-paint').map(e => e.startTime) }) expect(metrics.length).toBeGreaterThan(0) }) 验证方法动画禁用对比：开启与禁用动画下的截图比对差异与稳定性。过渡完成等待：确保断言在新视图稳定后进行，减少波动。降级路径：验证 `prefers-reduced-motion` 下信息可达与视觉一致。注意事项截图断言仅在 Playwright 测试运行器中支持动画选项。网络与后端不稳定会影响指标，应在测试中使用 Mock 或路由拦截。测试模型需与 UI 状态保持同步，减少非确定性路径。参考资料Playwright: `PageAssertions` 与动画禁用（2025 文档）https://playwright.dev/docs/api/class-pageassertions