如何使用Cypress查找指定名称的label并验证相邻元素

注意事项 #

你的HTML代码中，<span>的文本是cerfiticate uploaded（存在拼写错误，正确应为certificate uploaded），验证时需注意文本匹配的准确性。

原生JavaScript验证方案 #

通过原生JS获取目标元素并验证相邻关系与文本内容：

// 定位文本为"username"的label元素
const usernameLabel = Array.from(document.querySelectorAll('label')).find(el => el.textContent.trim() === 'username');

if (usernameLabel) {
  // 获取label的下一个相邻兄弟元素
  const nextElement = usernameLabel.nextElementSibling;
  
  // 验证元素类型和文本
  const isValid = nextElement 
    && nextElement.tagName === 'SPAN' 
    && nextElement.textContent.trim() === 'certificate uploaded'; // 若需匹配HTML中的拼写错误，替换为'cerfiticate uploaded'

  console.log(isValid ? '验证通过' : '验证失败');
} else {
  console.log('未找到目标label元素');
}

自动化测试场景（以Cypress为例） #

如果是UI自动化测试，可直接使用选择器和断言完成验证：

cy.contains('label', 'username')
  .next('span')
  .should('have.text', 'certificate uploaded'); // 如需匹配HTML中的拼写错误，替换对应文本

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