定义

条件测试是指常见的编程模式：
If X, then Y, else Z

以下是一些常见相关疑问：

• 无论元素是否存在，我该如何做一些不同的事情？
• 我的应用程序做 A/B测试，我该如何解释？
• 我的用户收到”欢迎向导”，但是现有用户没有。我是否可以随时关闭向导，如果没有显示，请忽略它。
• 我可以从Cypress失败的命令中恢复测试程序么？例如 cy.get() 找不到元素。
• 我正在尝试编写动态测试，根据页面上的文本执行不同的操作。
• 我想自动找到所有 <a> 元素，根据我找到的元素，我想检查每个链接是否有效。

问题是 - 虽然上面的情况看起来很简单，但是以这种方式编写测试通常会导致测试不稳定，随机失败以及难以追踪边缘情况。

让我们来研究为什么以及如何克服这些问题…全文请戳戳

这篇文章我们主要解决第一个问题

无论元素是否存在，我该如何做一些不同的事情？

1. Cypress所有command都是异步的，不能直接从command种返回，必须使用.then()方法才能拿到，下面的例子是错误的：

const fileList = cy.get('div.annex-list')

要如下书写才是正确的：

cy.get('div.annex-list').then(el => {
    const fileList = el
})

为了比较cy.get('div.annex-list')直接返回的与其最终返回的el之间的区别，我们可以将它们打印出来：

// 换了个元素，一样的道理
console.log(cy.get('[type="add"]'));

cy.get('[type="add"]').then(el => {
    console.log(el)
})

结果如下：

返回打印.png
可以看到，cy.get('[type="add"]')是一个chainer实例（类似于promise？），而其最终返回是个用jQuery获取的网页元素。

2. Cypress内置jQuery。jQuery的一大优势在于它完善的处理机制，即使用jQuery获取的网页元素不存在也不会报错，这是因为$el获取的永远是对象，而不是网页上html构成的一段元素代码。

   
   cypress command最终获取到的对象.png

可以通过打印看出，jQuery获取的对象含length属性：

• 该属性值为0，即该元素找不到；
• 该属性值为1，即该元素存在。
  这个length属性可以用来 做DOM元素存在与否的条件测试

回到我们要解决的问题

无论元素是否存在，我该如何做一些不同的事情？

该问题解决的重点在于，我们需要使用DOM元素进行条件测试，当元素不存在，测试并不会挂掉，而是走另一个逻辑分支。可以利用同步查询Cypress中的元素来控制流程。

重点是，不能对DOM元素进行条件测试，除非：

• 没有异步JavaScript的服务端渲染。
• 仅使用同步渲染的客户端JavaScript。
• 了解应用程序的工作原理至关重要，否则你将编写不稳定的测试。

我们来比较下面两段代码：

// 应用代码
$('button').on('click', (e) => {
  // 随机同步做一些事情
  if (Math.random() < .5) {
    // 添加一个input框
    $('<input />').appendTo($('body'))
  } else {
    // 或者添加一个textarea
    $('<textarea />').appendTo($('body'))
  }
})

// 测试代码
// 单击按钮会新添加一个元素
cy.get('button').click()
cy.get('body').then(($body) => {
  // 从body中同步查询
  // 找到新创建的元素
  if ($body.find('input').length) {
    // input被找到，执行其它的操作
    return 'input'
  }

  // 否则假设它是textarea
  return 'textarea'
})
  .then((selector) => {
    // selector表示一串字符串
    // 我们可以用来找到它的选择器
    cy.get(selector).type(`found the element by selector ${selector}`)
  })

如果<input>或者<textarea>是异步渲染的，则无法使用上面的模式。你将不得不设置一个任意时间的延迟，这种延迟在每种情况下都不会起作用，相反还会减慢你的测试速度，并且仍然会让你的测试不稳定（这是一种完全的反模式）。

在举一个例子：

// 例子1
 if (cy.get('div.comment').find('div-annex-list')) {
      cy.log('该元素存在');
    } else {
      cy.log('该元素不存在');
    };

// 例子2
cy.get('div.comment').then($el => {
      if ($el.find('div-annex-list')) {
        cy.log('该元素存在');
      } else {
        cy.log('该元素不存在');
      }
    });

当'div.comment div-annex-list'元素不存在时，运行结果显示：

• 例子1 运行到find('div-annex-list')时报错停止，测试挂掉
• 例子2 打印出'该元素不存在'，测试通过

Cypress致力于创造可靠的测试。编写良好测试的秘诀是向Cypress提供尽可能多的”状态”和”事实，并”保护”它发出新命令，直到你的应用程序达到所需的状态为止。

想了解更多的文章，可查看以下参考文章：
cypress官方文档：条件测试
Cypress前端E2E自动化测试记录