Cypress/Percy授权失败求助：快照无CSS且报错未知属性

问题原因 #

1. cy.percySnapshot()不支持authorization配置项，因此会抛出「未知属性」错误；
2. cy.visit()返回401未授权状态，页面未正常加载完成，导致CSS等静态资源无法被获取，最终生成的快照丢失样式。

解决方案 #

方案1：Basic Auth场景（直接在cy.visit中传递认证信息） #

修改cy.visit的调用逻辑，添加auth选项完成页面访问阶段的认证：

cy.visit('你的目标URL', {
  auth: {
    username: '**********',
    password: '*********'
  }
});
cy.percySnapshot('快照名称');

页面会以带Basic Auth的方式加载，解决401未授权问题，当页面完整加载后，Percy即可捕获包含完整CSS样式的快照。

方案2：会话认证场景（先登录再访问） #

如果项目采用账号密码登录生成会话（Cookie/Token）的认证方式，需先完成登录流程再访问目标页面：

// 执行登录操作（可封装为自定义Cypress命令复用）
cy.get('#username').type('你的用户名');
cy.get('#password').type('你的密码');
cy.get('button[type="submit"]').click();

// 确认登录成功后访问目标页面
cy.visit('你的目标URL');
cy.percySnapshot('快照名称');

确保登录后页面能正常加载（返回2xx状态码），再执行快照操作。

额外说明 #

• 务必移除cy.percySnapshot()中的authorization配置，该选项不属于Percy快照的合法配置项；
• 当前@percy/cli与@percy/cypress版本兼容，无需调整依赖版本。

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