如何直接定位<li>元素并验证其内容及href链接（Cypress场景）

// 验证第一个<li>的内容和href
cy.get('[role="listbox"] li:nth-child(1)')
  .should('contain', 'P')
  .and('contain', '15569')
  .and('contain', 'Senior big data engineer')
  .find('a') // 假设<li>内的链接是<a>标签，按需替换选择器
  .should('have.attr', 'href', '你期望的第一个链接地址');

// 验证第二个<li>的内容和href
cy.get('[role="listbox"] li:nth-child(2)')
  .should('contain', 'A')
  .and('contain', '15585')
  .and('contain', 'DB Developer')
  .find('a')
  .should('have.attr', 'href', '你期望的第二个链接地址');

// 验证第三个<li>（按需添加）
cy.get('[role="listbox"] li:nth-child(3)')
  .should('contain', '第三组对应文本1')
  .and('contain', '第三组对应文本2')
  .and('contain', '第三组对应文本3')
  .find('a')
  .should('have.attr', 'href', '你期望的第三个链接地址');

方法2：批量遍历所有

（更易维护） #

把每个

// 定义测试数据：每个对象对应一个<li>的预期值
const listItemExpectations = [
  {
    content: ['P', '15569', 'Senior big data engineer'],
    targetHref: '第一个li的目标链接'
  },
  {
    content: ['A', '15585', 'DB Developer'],
    targetHref: '第二个li的目标链接'
  },
  {
    content: ['第三组文本1', '第三组文本2', '第三组文本3'],
    targetHref: '第三个li的目标链接'
  }
];

// 遍历验证每个<li>
cy.get('[role="listbox"] li').each(($li, index) => {
  const currentExpect = listItemExpectations[index];
  // 验证所有文本内容
  currentExpect.content.forEach(text => {
    cy.wrap($li).should('contain', text);
  });
  // 验证链接地址
  cy.wrap($li).find('a').should('have.attr', 'href', currentExpect.targetHref);
});

注意事项 #

• 如果
• 内的链接不是<a>标签，把find('a')换成对应元素的选择器即可（比如带href属性的div就用find('[href]')）。
• :nth-child()的索引从1开始，和JS数组的0索引要区分开。

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