Cypress-wait-until - 等待元素属性改变

Question

我正在测试一个应用程序，它有一个按钮，可以在不重新加载页面的情况下改变屏幕上另一个元素的值。但是，值的变化几乎可以是瞬间的，或者需要几秒钟。显然，我不想使用一些任意等待，也不想使用（硬）断言——这可能会导致测试以失败而停止，而失败并不是失败……所以我我一直在关注 cypress-wait-until ( https://www.npmjs.com/package/cypress-wait-until )。我已经按照以下方式编写了各种变体：

     waitForElemToChange(elem) {
        elem.invoke('attr', val').then((initialVal) => {
        cy.waitUntil(() => elem.invoke('attr', 'value').then((val) => val != initialVal))
    }

但到目前为止没有任何效果 - 大多数尝试都导致“重试超时：cy.invoke() 错误，因为您的主题是：null。您不能调用任何函数，例如空值上的 attr。”

然而，它是同一个主题，刚刚在上一行中返回了一个值？？

原文由 user13123513 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这看起来很复杂。我会通过等待 initialValue 来接近它，然后等待一个不同的值。

 cy.get('input').should('have.value', 'myInitialValue');     // wait for initial value
cy.get('input').should('not.have.value', 'myInitialValue'); // wait for it to change

.should() 将重试断言最多 4 秒。

如果“几秒”是指超过 4 秒，则可以添加一个超时选项，这比任意等待要好，因为它会在断言通过后立即继续。

我假设您的元素是输入，因为您正在访问 val 而不是 text 。

原文由 user12697177 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我浏览了您的功能，我认为使用方面存在几个问题。这可能是与柏树相关的问题或等待插件。

首先，在您的代码中，我认为 elem 您尝试传递类似 cy.get(“path”) 的内容问题是当您首次调用 elem 并尝试重新使用 elem 时，它变为空。因此，如果您希望 cy.get(‘path’) 运行两次，它不会发生。

其次，出于某种原因，在你等到，

 cy.waitUntil(() => elem.invoke('attr', 'value').then((val) => val != initialVal))

//This part becomes true all the time.
elem.invoke('attr', 'value').then((val) => val != initialVal))

第三，

 invoke('attr', 'value')

不会捕获对象的变化属性。请注意，这些观察结果是通过尝试您尝试做的事情而收集的。需要额外的研究来找出函数的确切行为。

考虑到上述事实，我对代码做了一些改动。

• 更改的主要更新是传递 CSS 路径而不是 cypress 对象 ( elem )
• 使用 js 查询选择器操作来获取变化的值（取初始值我们可以使用 invoke ）

示例 1：在 waitUntil 中获取新值并检查变量更改

const CheckElementChange = (path) => {
    //get the initial value of your object
    cy.get(path).invoke('attr', 'value').then($initialVal => {
        //It's better if you can do your click operation here

        //Wait untill the element changes
        cy.waitUntil(() =>
        cy.get(path).then($newVal =>
            $newVal[0].value !== $initialVal),
            //optional timeouts and error messages
            {
                errorMsg: "was expeting some other Value but got : " + $initialVal,
                timeout: 10000,
                interval: 500
              }
        ).then(() => {
            cy.log("Foudn a difference in values")
        })
})
}

示例 2：在提取新值后移动 waitUntill 并等待 newVal !== initialVal 为真

const CheckElementChangew = (path) => {
    //get the initial value of your object
    cy.get(path).invoke('attr', 'value').then($initialVal => {
        //It's better if you can do your click operation here

        //Wait untill the element changes
        cy.get(path).then($newVal => {
            cy.waitUntil(() => $newVal[0].value !== $initialVal, {
                //optional timeouts and error messages
                errorMsg: "was expeting some other Value but got : " + $initialVal,
                timeout: 10000,
                interval: 500
              }).then(() => {
                cy.log("Foudn a difference in values")
            })
        })
    })
}

用法 ：

 it('test',() => {
    CheckElementChange2("#fname");
})

注意：如果您希望点击时值发生变化，除非值变化有几秒钟的时间间隔，否则最好在提取初始值后进行点击（如上面代码中的注释）

原文由 Muditha Perera 发布，翻译遵循 CC BY-SA 4.0 许可协议