Let´s say that i have a list with items with different colors. That list can be updated to only list blue items if i add a parameter. How can i verify that the each item is correct?

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 ');
       });

This will fail because the items in the list has not been updated before i have the possibility to check each item. It´s possible to wait for the request to finnish, but as the queries saves after the first run that "check" won´t work the second time.

Let´s say that i have a list with items with different colors. That list can be updated to only list blue items if i add a parameter. How can i verify that the each item is correct?

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 ');
       });

This will fail because the items in the list has not been updated before i have the possibility to check each item. It´s possible to wait for the request to finnish, but as the queries saves after the first run that "check" won´t work the second time.

• javascript
• cypress
• ui-testing

• what error are you getting from cypress with this test code? Timeout? – kuceb Commented Feb 27, 2019 at 18:10
• No. As the list is populated before i add the parameter and it takes a few seconds for it to update, the cy.get('data li').each iterates through the list before it have updated – Tester Commented Feb 28, 2019 at 10:22
• 1 Yes, so what is the error you're getting from cypress? A failed assertion? Many failed assertions? What does it say? – kuceb Commented Feb 28, 2019 at 12:12
• It will say that not all items in the list have text blue – Tester Commented Mar 1, 2019 at 7:52
• 1 am I the only one that finds super weird that Cypress boasts everywhere about "being async aware", "no need to wait everywhere"... BUT at the same time it's unable to elegantly handle this use case? – Lucas Pottersky Commented Aug 2, 2020 at 15:04

2 Answers 2

You must write a recursive promise function and check by yourself the color text, try the following

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);
});

I tried to ment a much as possible the code refactoring the code I developed for an accepted similar question.

Let me know if you need some more help