Cypress校验下拉选项字母顺序时断言提前执行问题解决

问题根因 #

• 异步执行顺序问题：Cypress 所有cy.开头的命令都是异步入队执行的，你写的同步expect()断言会比cy.get().each()遍历逻辑更早执行，此时存储选项的数组还未被填充，是空数组，所以会出现expected [] to equal []的错误校验结果。
• 数组对比规则错误：to.equal是引用对比，仅当两个数组是同一个实例时才会返回通过，内容相同的不同数组实例会被判定为不相等，需要用deep.equal做深度值对比。
• 排序方法副作用：JS 原生sort()方法会直接修改原数组，如果直接对存储原始顺序的数组调用sort()再对比，等于自己和自己比，永远返回通过，无法校验顺序是否正确。

修复后实现 #

var optionsArray = []
var optionsArraySorted = []
cy.get('#filter1 option').each(($el, index) => {
    optionsArray.push($el.text())
    optionsArraySorted.push($el.text())
})
.then(() => {
    expect(optionsArray).to.deep.equal(optionsArraySorted.sort())
})

实现说明 #

1. 同时初始化两个数组，分别存储原始顺序的选项文本、用来排序的选项文本副本
2. 遍历下拉选项时同时给两个数组赋值，保证两个数组初始内容完全一致
3. 断言逻辑放在.then()回调中，会等待前面的.each()遍历完全完成后再执行，确保数组已经填充完毕
4. 仅对副本数组调用sort()做字母排序，再用deep.equal和原始顺序数组做深度对比，就能正确校验下拉选项的原始顺序是否符合字母排序规则

内容的提问来源于stack exchange，提问作者TA1-q