fix(visual): make founder quote visible in visual regression snapshots
- Set reducedMotion:'reduce' on all visual regression projects. - ScrollReveal/StaggerReveal now render visible by default. - Scroll to bottom then top in waitForPageStable before screenshot. - Add L2 element snapshot for founder-quote-section. - Redesign quote as light card (bg-bg-primary/95) with ink text. - Verified: type-check ok; lint 0 errors; visual:update 23/23.
This commit is contained in:
@@ -21,6 +21,16 @@ const VISUAL_TEST_PAGES = [
|
||||
async function waitForPageStable(page: Page) {
|
||||
await page.waitForLoadState('networkidle');
|
||||
await page.waitForTimeout(2000);
|
||||
|
||||
// 触发全页 ScrollReveal / StaggerReveal:先滚到底再回顶,让所有 below-the-fold
|
||||
// 模块的 whileInView 动画进入最终态,避免全页截图时内容停在 opacity:0 初始态。
|
||||
// 视觉回归项目已统一 reducedMotion:'reduce',此滚动作为双保险,覆盖任何媒体查询
|
||||
// 在 viewport resize 期间短暂失真的边界情况。
|
||||
await page.evaluate(() => window.scrollTo({ top: document.body.scrollHeight, behavior: 'instant' }));
|
||||
await page.waitForTimeout(800);
|
||||
await page.evaluate(() => window.scrollTo({ top: 0, behavior: 'instant' }));
|
||||
await page.waitForTimeout(200);
|
||||
|
||||
await page.evaluate(() => {
|
||||
document.querySelectorAll('img').forEach(img => {
|
||||
if (!img.complete) {
|
||||
@@ -103,6 +113,15 @@ test.describe('L2: 组件视觉状态测试', () => {
|
||||
}
|
||||
});
|
||||
|
||||
test('创始团队观点 - 桌面端视觉', async ({ page }) => {
|
||||
await page.goto('/', { waitUntil: 'domcontentloaded' });
|
||||
await waitForPageStable(page);
|
||||
|
||||
const founder = page.locator('[data-testid="founder-quote-section"]');
|
||||
await founder.scrollIntoViewIfNeeded();
|
||||
await expect(founder).toHaveScreenshot('founder-quote-section.png');
|
||||
});
|
||||
|
||||
test('表单输入框 - 默认/聚焦状态', async ({ page }) => {
|
||||
await page.goto('/contact', { waitUntil: 'domcontentloaded' });
|
||||
await waitForPageStable(page);
|
||||
|
||||
Reference in New Issue
Block a user