如何在赛普拉斯的 then() 函数中打破 for 循环？答案

【问题标题】：How to break for loop inside Cypress's then() function?如何在赛普拉斯的 then() 函数中打破 for 循环？
【发布时间】：2020-12-14 10:34:49
【问题描述】：

如果.contacts 元素的样式不等于display: none，我想中断 for 循环，但我在 then() 函数中找不到执行此操作的方法。

用例：我想点击表格元素，直到出现联系人面板，然后填写联系人。但是如果我在面板出现后不停止循环，它就会消失，我会得到一个错误。

        cy.get('@count').then($count => {
            for (let i = 1; i <= $count - 1; i++) {
                if (i == 1) {
                    cy.get(`:nth-child(${i}) > .room-type`).eq(1).click()
                }
                else {
                    cy.get(`:nth-child(${i}) > .room-type`).click()
                }
                cy.get('.spinner').should('not.exist')

                cy.get('.contacts').then($contacts => {
                    if ($contacts.attr('style') != 'display: none;') {
                        //I want to break the loop here if condition is met
                    }
                })
            }
        })

【问题讨论】：

循环正在设置 Promise，一旦您输入 then 回调，设置就已经完成。换句话说，您尝试将同步与异步行为混合在一起，这不会像您预期的那样运行。也许通过嵌套更多代码，您将实现您所需要的。
then 表示我答应回答，但它不会在设置的同时执行。一旦你的then 回调被调用，循环可能已经结束。您需要的是同步行为，并尝试使用异步框架来获取它。这行不通。
@VladimirKrygin 您可以通过将上面的循环计数器设置为最大值来中断循环，即添加i = $count 注释//I want to break the loop here
是的，我的错误 - 它是同步和异步代码的混合 - 循环运行速度比 cy.get('.contacts').then(... 解析的速度快。使用 const $contacts = Cypress.$('.contacts'); if ($contacts.attr(... 可能会侥幸成功 - 但它看起来越来越乱了。
这在语义上听起来像cypress-wait-until 的用例，但文档有点薄，无法判断它是否能处理您的情况。在内部，lib 使用递归而不是迭代 - 所以对你来说可能是一个更好的模式。

标签： javascript loops automated-tests cypress break

【解决方案1】：

我相信最好的方法是递归方法。使用递归方法，您的同步和异步代码问题将自动解决。所以你可以用下面这样的方法来解决这个问题。以下代码可能无法正常工作，您可能需要相应地进行一些更改。如果你想避免同步异步代码问题，主要的想法是尝试使用递归方法

cy.get("@count").then(($count) => {
    test_recusive($count);
});

export const test_recusive = (count) => {
if (i == 1) {
    cy.get(`:nth-child(${i}) > .room-type`).eq(1).click();
} else {
    cy.get(`:nth-child(${i}) > .room-type`).click();
}
cy.get(".spinner").should("not.exist");

cy.get(".contacts").then(($contacts) => {
    if ($contacts.attr("style") != "display: none;") {
        //I want to break the loop here if condition is met
        return;
    } else {
        return test_recusive(count - 1);
    }
});

现在您代码中的所有调用都将是同步调用。

【讨论】：