我如何等待列表中的每个元素使用 cypress 更新为特定文本

Posted 2023-02-24

【中文标题】我如何等待列表中的每个元素使用 cypress 更新为特定文本

【英文标题】：How can i wait for each element in a list to update to a certain text using cypress

【发布时间】：2019-02-26 10:54:34

【问题描述】：

假设我有一个包含不同颜色项目的列表。如果我添加参数，该列表可以更新为仅列出蓝色项目。如何验证每个项目是否正确？

cy.addParameter('blue'); //Will send graphQL query to fetch the correct items. 

cy.get('data li').each((item)=> 
         cy.wrap(item).should('have.text', ' blue ');
       );

这将失败，因为在我有可能检查每个项目之前，列表中的项目尚未更新。可以等待请求完成，但由于查询在第一次运行后保存，“检查”第二次将不起作用。

【问题讨论】：

这个测试代码从赛普拉斯得到什么错误？超时？

没有。由于在我添加参数之前填充了列表并且它需要几秒钟才能更新，所以 cy.get('data li').each 在更新之前遍历列表

是的，那么您从 cypress 得到的错误是什么？一个失败的断言？许多失败的断言？它说什么？

它会说并非列表中的所有项目都有蓝色文本

如果您想出不同的解决方案，请告诉我们...如果对您有帮助，请接受我的回答。对于寻找相同（或相似）答案的其他用户来说，两者都可能非常有用????

【参考方案1】：

你必须写一个递归的promise函数并自己检查彩色文本，试试下面的

function checkColor(selector, color, maxWait, alreadyWaited = 0) 
  const waitTime = 500;
  // cy.get returns a thenebale
  return cy.get(selector).each((item)=> 
    // it checks the text right now, without unnecessary waitings
    if(!item.text() === color) 
      return false;
    
    return true;
  ).then(result => 
    if(result) 
      // only when the condition passes it returns a resolving promise
      return Promise.resolve(true);
    
    // waits for a fixed milliseconds amount
    cy.wait(waitTime);
    alreadyWaited++;
    // the promise will be resolved with false if the wait last too much
    if(waitTime * alreadyWaited > maxWait) 
      return Promise.reject(new Error('Awaiting timeout'))
    
    // returns the same function recursively, the next `.then()` will be the checkColor function itself
    return checkColor(selector, color, maxWait, alreadyWaited);
  );


// then, in your test...
cy.addParameter('blue'); //Will send graphQL query to fetch the correct items. 
checkColor('data li', 'blue', 10000).then(result => 
  cy.get('data li').each((item)=> 
    cy.wrap(item).should('have.text', ' blue ');
  );
  // or
  expect(result).to.be(true);
);

我尝试尽可能多地评论代码重构我为已接受的similar question 开发的代码。

如果您需要更多帮助，请告诉我?

更新

我们（me 和 Tommaso）编写了一个插件来帮助您进行此类检查，其名称为 cypress-wait-until。

为此感谢Open Source Saturday 社区，我们在其中一个星期六开发了它?