定义
条件测试是指常见的编程模式：
If X, then Y, else Z
以下是一些常见相关疑问：
- 无论元素是否存在，我该如何做一些不同的事情？
- 我的应用程序做 A/B测试，我该如何解释？
- 我的用户收到”欢迎向导”，但是现有用户没有。我是否可以随时关闭向导，如果没有显示，请忽略它。
- 我可以从Cypress失败的命令中恢复测试程序么？例如
cy.get()找不到元素。 - 我正在尝试编写动态测试，根据页面上的文本执行不同的操作。
- 我想自动找到所有
<a>元素，根据我找到的元素，我想检查每个链接是否有效。
问题是 - 虽然上面的情况看起来很简单，但是以这种方式编写测试通常会导致测试不稳定，随机失败以及难以追踪边缘情况。
让我们来研究为什么以及如何克服这些问题…全文请戳戳
这篇文章我们主要解决第一个问题
无论元素是否存在，我该如何做一些不同的事情？
- 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)
})
结果如下：
可以看到，
cy.get('[type="add"]')是一个chainer实例（类似于promise？），而其最终返回是个用jQuery获取的网页元素。
-
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自动化测试记录
