记录和断言以前未知的 DOM 元素的数量

Question

我是第一次使用 Cypress，我已经os完成了我的第一个测试。但要这样做，我需要针对一个未知数进行断言。让我解释一下：

测试开始时，会生成随机数量的元素，我不应该控制这样的数量（这是一项要求）。所以，我试图以这种方式获得这样的数字：

var previousElems = cy.get('.list-group-item').its('length');

我不确定我是否获得了正确的数据，因为我无法记录它（"cypress console" 在我打印它时显示“[Object]”）。但是让我们说这样的行 returns (5) 来举例说明。

在测试期间，我模拟用户创建额外元素 (2) 并删除 (1) 元素。假设用户只是创建了一个额外的元素。

因此，在测试结束时 os，我需要检查具有相同 class 的元素的数量是否等于 (5+2-1) = (6) 个元素.我是这样做的：

cy.get('.list-group-item').its('length').should('eq', (previousTasks + 1));

但我收到以下消息：

CypressError: Timed out retrying: expected 10 to equal '[object Object]1'

那么，我该如何记录和断言呢？提前致谢，

PD：我也试过了：

var previousTasks = (Cypress.$("ul").children)? Cypress.$("ul").children.length : 0;

但它总是 return 是一个固定数字 (2)，即使我之前先等待以确保所有项目都已加载。

我也对 childNodes 进行了同样的尝试，但它总是 return 0.

Answer 1

您的问题源于 Cypress 测试代码在测试开始前一次性运行。命令排队等待运行稍后，因此像您的示例中那样存储变量将不起作用。这就是为什么你总是得到对象而不是数字；您获得的对象称为 chainer，，用于允许您将命令与其他命令链接起来，如下所示：cy.get('#someSelector').should('...');

赛普拉斯有办法解决这个问题；如果您需要直接对某些数据进行操作，您可以使用 .then() 提供一个 lambda 函数，该函数将运行与您的其余命令按顺序排列。这是一个应该适用于您的场景的基本示例：

cy.get('.list-group-item').its('length').then(previousCount => {
    // Add two elements and remove one...
    cy.get('.list-group-item').its('.length').should('eq', previousCount + 1);
});

如果您还没有阅读过，我强烈建议您阅读精彩的 introduction to Cypress in the docs. This page on variables and aliases 在这种情况下应该也很有用。

记录和断言以前未知的 DOM 元素的数量

Logging and asserting the number of previously-unknown DOM elements

cypress