Cypress是否支持if条件中用&&做多条件校验？相关代码执行报错如何解决？

首先明确：Cypress完全支持使用&&做多条件校验 #

你的报错和&&语法无关，是代码本身的逻辑和写法问题，具体问题如下：

• 1. 选择器不匹配现有HTML结构
     你提供的HTML中每一行<tr>下仅包含3个<td>子元素，但你的代码中选择的是:nth-child(6)、:nth-child(7)、:nth-child(8)，根本找不到对应的目标元素，拿到的结果不符合预期，自然会触发校验错误。
• 2. eq()方法使用错误
     你已经通过父元素 > .index_textBlock_20DCh选中了当前父元素下单个文本块元素，此时再调用eq(0)/eq(1)/eq(2)完全多余，甚至会从全局匹配的同class元素列表里取对应下标的元素，拿到的根本不是当前父元素下的目标文本块。
• 3. 同步DOM查询的执行时机错误
     Cypress.$是同步执行的jQuery调用，会在测试代码初始化阶段就直接执行，此时页面大概率还没渲染完成、数据也没加载到位，拿到的是初始状态的DOM内容，和你预期的运行时状态完全不一致，这是你报错“应为空但检测到内容”的核心原因。
• 4. 代码冗余严重
     你外层已经写了for循环，完全不用硬编码nth-child(1)/nth-child(2)这类固定下标，既难维护也容易写错。

优化后的实现方案 #

你可以按照如下逻辑改写代码，先通过Cypress的异步命令拿到最新的DOM内容再做校验：

// 先获取所有行元素，再逐行校验
cy.get('tr.index_tr_2P').each(($tr, index) => {
  // 取出当前行的三个文本块的内容，trim()可以排除空格干扰
  const text1 = $tr.find('td:nth-child(1) .index_textBlock_20DCh').text().trim()
  const text2 = $tr.find('td:nth-child(2) .index_textBlock_20DCh').text().trim()
  const text3 = $tr.find('td:nth-child(3) .index_textBlock_20DCh').text().trim()
  
  // 三个内容都为空则执行点击
  if(text1 === '' && text2 === '' && text3 === '') {
    cy.wrap($tr).find('td:nth-child(1)').click()
    // 如果只需要点击第一个符合条件的行，加上return false终止遍历即可
    return false
  }
})

注意：如果你的实际业务场景中td的下标确实是6、7、8，把上面代码里的nth-child参数对应修改即可。

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