Cypress如何存储元素文本到数组并在后续操作中访问对比

问题根本原因 #

Cypress的所有命令都是异步排队执行的，你写在回调外的同步代码（包括标注的无法访问的console.log、用例末尾的数组对比代码）会在Cypress异步命令执行前就运行完成，此时数组还没有被赋值，自然拿不到内容。

正确实现方式 #

只需要把数组对比的逻辑放到.then()回调中，让它等待前面所有遍历、取值的异步命令全部执行完成后再运行即可，修改后的代码如下：

it('My test', () => {
    let arrayOfElementText = [];
    let anotherArray = [];

    // 第一个遍历取数逻辑
    cy.get('#divEl').each(($el) => {
        cy.wrap($el).click();
        cy.get('#input').invoke('val')
            .then(val => {
                arrayOfElementText.push(val);
                console.log(arrayOfElementText);
            });
    })

    // 第二个遍历取数逻辑
    cy.get('#divEl1').each(($el) => {
        cy.get('#input1').invoke('val')
            .then(val => {
                anotherArray.push(val);
                console.log(anotherArray);
            });
    })

    // 用then等待前面所有Cypress命令执行完成，再做数组对比
    cy.then(() => {
        // 此时两个数组都已经填充完成，可以正常访问对比
        console.log(arrayOfElementText, anotherArray);
        // 可替换为自定义的对比逻辑
        expect(arrayOfElementText).to.deep.equal(anotherArray);
    })
});

补充注意事项 #

• 不要依赖同步顺序访问Cypress异步操作产生的变量，所有需要用到异步操作结果的逻辑，都要放到链式调用的.then()回调中执行
• 如果是复杂的多组数据对比，也可以把每个数组的获取逻辑封装成自定义命令，返回值通过cy.wrap()抛出，后续直接链式调用取值即可

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