Cypress循环中如何表示OR条件及跳过指定表格单元格

问题原因分析 #

• 选择器未生效：td:not(:nth-child(5))失效通常有两个原因：一是CSS的:nth-child计数从1开始，若你的列索引计数逻辑和实际DOM结构不符就会匹配错误；二是你写的选择器层级my-table > .my-table使用了直接子元素选择符>，如果两个my-table之间存在其他嵌套DOM节点，就会导致匹配不到目标td元素，规则自然不生效。
• OR校验逻辑失效：JS中||运算符会直接返回第一个真值，你写的'0.1234' || 'have.value'实际运行时会直接返回'0.1234'，等效于你只写了cy.wrap(el).should('have.value', '0.1234')，完全没有实现OR校验的效果。

解决方案 #

方案1：不跳列，直接校验支持正负两种值 #

用Cypress内置的正则匹配规则实现OR校验，代码更简洁：

// 先修正选择器的层级错误，若my-table是标签+类名组合可直接写.my-table
cy.get('my-table.my-table tbody > tr > td > input:not([disabled])')
.each(el => {
  // 正则中^表示值开头，$表示值结尾，-?表示负号为可选项
  cy.wrap(el).should('have.value', /^-?0\.1234$/)
})

如果不需要校验固定值，只需要校验正负合法，调整正则规则即可。

方案2：确实需要跳过第5列 #

推荐在each循环中通过索引判断跳过，比CSS选择器兼容性更强，不受DOM结构变化影响：

cy.get('my-table.my-table tbody > tr')
.each(row => {
  cy.wrap(row).find('td > input:not([disabled])')
  .each((input, index) => {
    // 第5列对应的JS索引为4（索引从0开始计数），匹配到直接返回跳过校验
    if(index === 4) return
    cy.wrap(input).should('have.value', '0.1234')
  })
})

如果要坚持用CSS选择器实现跳过，把原选择器中的my-table > .my-table改为my-table .my-table去掉直接子元素限制，即可正常匹配到第5列以外的td。

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