使用Cypress提取DOM及节点文本，为失败测试补充更多信息

当前我的无障碍测试仅提示页面存在3个问题就直接失败，无法看到具体的失败细节。我希望让测试报告明确展示失败测试项、问题内容以及触发问题的元素，这些信息在测试运行后的控制台输出节点中可以找到。

现有测试代码 #

describe('Womens T20 Cricket Test',() => {
it('Should log any accessibility failures critical impact 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']})
    cy.checkA11y({ runOnly: { type: "tag", values: ['wcag2a', 'wcag2aa', ]}})
    cy.contains('a11y error!')
    .parent('td')
    .invoke('text')
    .then((text) => {
    cy.log(text)


    });
  });
});

控制台相关截图 #

• 无障碍错误提示：
  
• 节点中的详细信息：
  
• 全屏视图：
  

解决方案：自定义回调提取详细违规信息 #

默认的cy.checkA11y在发现违规时会直接抛出错误终止测试，无法获取详细的违规数据。可以通过传入自定义回调函数，在测试过程中收集所有违规信息，然后格式化输出到日志中：

修改后的测试代码 #

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();
    
    // 自定义回调函数，收集并输出详细违规信息
    const logAccessibilityFailures = (violations) => {
      if (violations.length === 0) {
        cy.log('✅ 未检测到无障碍违规问题');
        return;
      }

      cy.log(`❌ 检测到 ${violations.length} 个无障碍违规问题：`);
      
      // 遍历每个违规项，输出详细信息
      violations.forEach((violation, index) => {
        cy.log(`--- 问题 ${index + 1} ---`);
        cy.log(`测试项：${violation.ruleId} (${violation.impact} 级别)`);
        cy.log(`问题描述：${violation.description}`);
        cy.log(`修复指南：${violation.help}`);
        cy.log(`触发元素数量：${violation.nodes.length}`);
        
        // 输出每个触发元素的选择器和文本内容
        violation.nodes.forEach((node, nodeIndex) => {
          cy.log(`元素 ${nodeIndex + 1} 选择器：${node.target.join(', ')}`);
          if (node.html) {
            cy.log(`元素 ${nodeIndex + 1} 内容：${node.html.substring(0, 100)}...`); // 截断过长内容
          }
        });
      });

      // 抛出错误终止测试（可选，根据需求决定是否保留）
      throw new Error(`无障碍测试失败，共检测到 ${violations.length} 个问题`);
    };

    // 调用checkA11y并传入自定义回调
    cy.checkA11y(
      null, 
      { 
        includedImpacts: ['critical', 'serious', 'moderate'],
        runOnly: { type: "tag", values: ['wcag2a', 'wcag2aa'] }
      },
      logAccessibilityFailures // 传入回调函数
    );
  });
});

关键说明 #

1. 合并配置：把两次cy.checkA11y调用合并成一次，避免重复扫描页面
2. 自定义回调：通过logAccessibilityFailures函数接收所有违规数据，格式化输出每个问题的规则ID、影响级别、描述、修复指南，以及触发元素的选择器和内容
3. 灵活控制测试结果：最后可选择是否抛出错误终止测试，也可以只记录信息不终止，根据测试需求调整

修改后，测试日志会清晰展示每个无障碍问题的详细信息，无需再去控制台节点中手动查找内容。

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