英文:
How to wait for the number of list items to change in Cypress?
问题
我有一个列表,我想测试筛选功能(您输入一些文本,然后列表会被筛选)。
因此,在Cypress中,我想等待一段时间,直到项目的数量发生变化。我不知道应该期望多少项目。如果我不关心该数字是大于还是小于初始数字,那将会很好。
我该如何处理这个问题?我尝试了 cy.wait(1000)
,但什么也没发生(我猜是因为列表项已经存在,所以根本没有等待)...
编辑1:
我试图从这段代码中获取项目的初始数量,但 itemsCountBefore
在 lambda 函数内部被设置为 7
,但当它在外部(第二个日志)时,它是 undefined
。
let itemsCountBefore;
cy.get(homePage.elements.anyListItem).then(($listItems) => {
itemsCountBefore = $listItems.length;
cy.log(`itemsCountBefore1: ${itemsCountBefore}`)
});
cy.log(`itemsCountBefore2: ${itemsCountBefore}`)
英文:
I have a list and I want to test filtering (you input some text, and the list gets filtered).
So, in Cypress, I'd like to wait some time for that number of items to change. I don't know the number of items that I should expect. It would also be great if I wouldn't care whether that number is greater or lesser than the initial number.
How should I go with this? I tried cy.wait(1000)
but it did nothing (I guess because the list items are already there, so it didn't wait at all)...
EDIT1:
I'm trying to get the initial number of items from this code, but itemsCountBefore
gets set to 7
inside the lambda function, but when it gets outside (second log) it is undefined
let itemsCountBefore;
cy.get(homePage.elements.anyListItem).then(($listItems) => {
itemsCountBefore = $listItems.length;
cy.log(`itemsCountBefore1: ${itemsCountBefore}`)
});
cy.log(`itemsCountBefore2: ${itemsCountBefore}`)
答案1
得分: 2
问题是,您需要等待外部计数变量更新后再检查其值。
要实现这一点,在执行导致变化的操作(过滤操作)之后,使用.then()
回调。
另外,使用.should()
来进行断言也很有用。如果操作涉及一些异步活动(比如将过滤输入发送到服务器),您需要一些重试来避免测试结果不稳定。
最简单的断言是current
不等于initial
。
let initial;
cy.get(homePage.elements.anyListItem)
.its('length')
.then(count => initial = count)
cy.get('input-filter-selector')
.type('filter-text')
.then(() => {
cy.get(homePage.elements.anyListItem)
.its('length')
.should('not.eq', initial)
})
英文:
The problem is you need to wait for the external count variable to be updated before checking it's value.
To do so use a .then()
callback after the action that makes the change (the filtering action).
Also is useful to use a .should()
to make your assertion. If the action involves some asynchronous activity (like sending the filter input to a server), you need some retry happening to avoid flaky test results.
The simplest assertion is that current
does not equal initial
.
let initial;
cy.get(homePage.elements.anyListItem)
.its('length')
.then(count => initial = count)
cy.get('input-filter-selector')
.type('filter-text')
.then(() => {
cy.get(homePage.elements.anyListItem)
.its('length')
.should('not.eq', initial)
})
答案2
得分: 0
为了实现这一点,您可以按照以下步骤操作:
1- 获取列表中项目的初始数量。
2- 执行触发筛选操作的操作。
3- 使用cy.wait()等待项目数量的变化。
let initialItemCount;
cy.get('list-selector').then(($list) => {
initialItemCount = $list.children().length;
});
cy.get('input-filter-selector').type('filter-text');
cy.waitUntil(() => {
cy.get('list-selector').then(($list) => {
const currentItemCount = $list.children().length;
// 等待直到项目数量从初始计数中改变
return currentItemCount !== initialItemCount;
});
}, { timeout: 5000, interval: 500 });
英文:
To achieve this, you can follow these steps:
1-Get the initial number of items in the list.
2-Perform the action that triggers the filtering.
3-Use cy.wait() to wait for the number of items to change.
let initialItemCount;
cy.get('list-selector').then(($list) => {
initialItemCount = $list.children().length;
});
cy.get('input-filter-selector').type('filter-text');
cy.waitUntil(() => {
cy.get('list-selector').then(($list) => {
const currentItemCount = $list.children().length;
// Wait until the number of items changes from the initial count
return currentItemCount !== initialItemCount;
});
}, { timeout: 5000, interval: 500 });
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论