通过Cypress.IO执行Percy视觉回归测试时字体显示异常

1. 修正字体加载检测逻辑 #

你当前用cy.document().its("fonts.status").should("equal", "loaded")判断字体加载，但fonts.status并非标准API，无法精准识别自定义字体的加载状态。建议改用以下两种可靠方式：

方式A：用Web Font Loader监听加载 #

在测试中注入Web Font Loader并监听目标字体加载完成：

describe("Article page", () => {
  it("passes", () => {
    cy.visit("/articles/augustas-story-being-youth-advisor-0", {
      onBeforeLoad(win) {
        const script = win.document.createElement('script');
        script.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';
        script.onload = () => {
          win.WebFont.load({
            custom: { families: ['Helvetica LT Std Bold'] }
          });
        };
        win.document.head.appendChild(script);
      }
    });

    // 等待字体加载完成后再截图
    cy.window().its('WebFont').then(webFont => {
      return new Cypress.Promise(resolve => webFont.active(resolve));
    });

    cy.percySnapshot();
  });
});

方式B：用FontFace API验证加载 #

describe("Article page", () => {
  it("passes", () => {
    cy.visit("/articles/augustas-story-being-youth-advisor-0");

    cy.window().then(win => {
      const font = new win.FontFace(
        'Helvetica LT Std Bold', 
        'url(/themes/custom/planuk/fonts/HelveticaLTStd-Bold.woff2)'
      );
      return font.load().then(() => win.document.fonts.add(font));
    });

    cy.percySnapshot();
  });
});

2. 调整font-display属性测试 #

你设置了font-display: swap，浏览器会先显示 fallback 字体，待自定义字体加载后再替换。Percy截图时机可能卡在替换前，临时修改为font-display: block验证：

@font-face {
  font-family: 'Helvetica LT Std Bold';
  src: url('/themes/custom/planuk/fonts/HelveticaLTStd-Bold.woff2') format('woff2'),
       url('/themes/custom/planuk/fonts/HelveticaLTStd-Bold.woff') format('woff'),
       url('/themes/custom/planuk/fonts/HelveticaLTStd-Bold.ttf') format('truetype'),
       url('/themes/custom/planuk/fonts/HelveticaLTStd-Bold.svg#HelveticaLTStd-Bold') format('svg');
  font-weight: bold;
  font-style: normal;
  font-display: block; /* 临时修改测试 */
}

3. 验证Percy的字体资源访问权限 #

• 确认字体文件路径绝对正确，保证Percy爬虫能通过测试环境域名拼接后访问到文件
• 检查服务器是否有防盗链、IP白名单等限制，阻止Percy请求字体文件

4. 延长Percy快照等待时间 #

在cy.percySnapshot中添加配置，强制延长页面稳定等待时长：

cy.percySnapshot('Article page', {
  waitForTimeout: 5000 // 调整为5秒等待时间
});

5. 对齐测试环境浏览器版本 #

确保Cypress运行的浏览器与Percy使用的浏览器环境一致（如均为Chrome），避免因浏览器差异导致字体渲染不同。

内容的提问来源于stack exchange，提问作者Behzad Lashkari