如何使用Cypress提取Axe无障碍测试的节点详细数据？

完全可以提取到无障碍问题的详细数据，核心是利用cy.checkA11y的第三个回调参数，捕获Axe扫描的完整结果，其中就包含具体违规元素的节点信息、规则描述和修复建议。

修改后的测试代码 #

describe('Womens T20 Cricket Test', () => {
  it('Should log detailed accessibility failures on a competition page', () => {
    cy.visit('https://www.skysports.com/cricket/ICC-Womens-World-T20');
    cy.iframe('#sp_message_iframe_758392').find('.sp_message-accept-button').should('be.visible').click()

    cy.injectAxe();
    cy.checkA11y(
      null, 
      { includedImpacts: ['critical', 'serious', 'moderate'] },
      // 回调函数处理扫描结果
      (violations) => {
        // 在Cypress控制台打印完整问题详情
        cy.log(`共发现 ${violations.length} 个无障碍问题:`);
        violations.forEach((violation, idx) => {
          cy.log(`--- 问题 ${idx + 1} ---`);
          cy.log(`描述: ${violation.description}`);
          cy.log(`规则ID: ${violation.id}`);
          cy.log(`受影响元素:`);
          // 输出每个违规元素的选择器和HTML代码
          violation.nodes.forEach((node, nodeIdx) => {
            cy.log(`元素 ${nodeIdx + 1} 选择器: ${node.target.join(', ')}`);
            cy.log(`元素HTML:`, node.html);
          });
          cy.log(`修复建议: ${violation.help}`);
        });

        // 可选：若有违规则抛出错误，标记测试失败
        if (violations.length > 0) {
          throw new Error(`无障碍测试未通过，共 ${violations.length} 个问题，详情见控制台`);
        }
      }
    );
  });
});

关键说明 #

• 回调参数violations是一个数组，每个元素对应一个无障碍问题，包含以下核心字段：
  • nodes：受影响元素的集合，每个节点的target字段是元素的CSS选择器，html字段是元素的DOM代码片段
  • description：问题的简短描述
  • help：对应的修复指导
• 运行测试后，打开Cypress的Console标签，就能看到所有元素节点的具体信息，直接定位需要修复的DOM元素
• 如果需要在测试报告中展示这些详情，可以结合Cypress报告插件（如Mochawesome），将violations数据写入报告内容

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