响应式页面更新后先测临界宽度和长文案响应式问题很少挑常用桌面尺寸出现。长标题、窄屏、字体晚到几百毫秒或者安全区变化都可能把一张看似规整的卡片挤出边界。设备没法每次手点一遍截图回归适合做第一道筛查。视口不要只挑“标准尺寸”选择项目真实覆盖的宽度并补充容易出问题的临界点。组件若有长文案、空状态或错误状态也应单独建基准图。基准图不是永远不变经过确认的视觉改动要更新它避免团队开始忽略红灯。Playwright 用例保持小而明确import { test, expect } from playwright/test; test(card 在窄屏不溢出, async ({ page }) { await page.setViewportSize({ width: 390, height: 844 }); await page.goto(/components/card); await expect(page.locator([data-testidcard])).toHaveScreenshot(card-390.png); });运行前固定时区、语言、字体和动画状态。时间戳、随机头像、远端接口数据应 mock 或遮住否则像素差异只是在报告噪声。截图不替代可用性检查视觉对比擅长找出换行、遮挡和间距变化却看不出焦点顺序、读屏语义或按钮是否能点击。把它和关键交互用例放在一起才是一次版本更新后值得信任的检查。