Wait until cy.get("selector") stops failing

[dialex]

From the examples, I understood that waitUntil will wait until a condition becomes true:

cy.waitUntil(() => cy.getCookie('token').then(cookie => cookie == "some value")));

But what if my condition is Cypress assertion? Using the same example:

// what if you need to wait until the cookie 'token' even exists?
cy.waitUntil(() => cy.getCookie('token')));

My context is, I have a page that will display data that is being updated by a cron job. The page does not update automatically, so the user must manually refresh the page. Sometimes the cron job takes a little longer, so I want to waitUntil a Cypress command or assertion stops failing. The problem is, as soon as the command fails, the test ends with a failure.

How can I make this code work?

waitUntilPaymentIsProcessed() {
  cy.log("Waiting... Payment must be processed by cron job")
  cy.waitUntil(
    () => {
      cy.reload()
      cy.get(activePackageSubtitle).should("exist") // wait until this passes
    },
    {
      interval: 3000,
      timeout: 10000,
      errorMsg: "Timed out waiting for cron to process payment"
    }
  )
  cy.log("Waiting... Done")
}

P.S: Thank you so much for writing this lib. It's so useful and so critical. I don't know why it doesn't come out-of-the-box with Cypress. Well done 😄

[NoriSte]

Hi @dialex, you are welcome! 😊
Well:

• from the very first example you cited: cy.getCookie('token') is not an assertion, it is a Cypress command. cy.waitUntil(() => cy.getCookie('token'))); waits until the token has a truthy value. I know that it is not your point, go on 😉

• this plugin cannot retrieve Cypress assertions at all, in Cypress, a failing assertion forces the whole test to fail and you cannot restore it

• you need to transform your cy.get(activePackageSubtitle).should("exist") assertion in something that does not fail, hence you need to manually control that the element is in the page.
  How could you do that? I am going to show you a potential example that does not work but I am going to explain why later.
  
  Instead of writing

cy.waitUntil(
    () => {
      cy.reload()
      cy.get(activePackageSubtitle).should("exist")
    }
  )

you should write

// ATTENTION: this is just an example, it will not workl
cy.waitUntil(
    () => {
      cy.reload()
      return cy.get(activePackageSubtitle).then($el => $el.length)
    }
  )
cy.get(activePackageSubtitle).should("exist")

so this should not fail because you manually check for the element existence before asserting about that with Cypress

• why the example above should work but it does not? Because cy.get has a built-in assertion, you can find it in the docs

cy.get() will automatically retry until the element(s) exist in the DOM.
cy.get() will automatically retry until assertions you've chained all pass.

So, cy.get() is itself an assertion! And, again, a failing assertion makes the whole test fail, with or without this plugin

• ... And so? Do not worry, the solution is a mix of both approaches! Since we can not use cy.get to query for an element and checking the length of the jQuery element itself... We could, instead, leveraging jQuery without cy.get!
  
  My solution is

cy.waitUntil(
    () => {
      cy.reload()
      return Cypress.$(activePackageSubtitle).length;
    }
  )
cy.get(activePackageSubtitle).should("exist")

Simply, we consume directly the Cypress' exposed jQuery.

Or, more condensed

cy.waitUntil(() => cy.reload().then(() => Cypress.$(activePackageSubtitle).length))
cy.get(activePackageSubtitle).should("exist")

Let me know if it works as you expect 😉

[dialex]

Thank you so much for the fast reply and in-depth explanation on how to solve this problem 🙇

YES, it worked. I spend the whole yesterday trying a solution but I could workaround the "cy.get() is itself an assertion" obstacle. I will add this tip to my "Cypress recipes" notebook!

[NoriSte]

You're welcome 😊

[NoriSte]

Last but not least: if you have looked for a solution on Google/stackoverflow and you haven't found anything useful... Please help the community doing so

• raise a new question on stackoverflow
• explain well your problem and link to all the resources that seemed helpful but they weren't (and why)
• I'll reply with the solution and you accept it

Doing so:

• you don't need to add it the your recipes list, the next time you'll find it directly searching on Google
• you'll help other developers with the same problem
• other useful and alternative solutions could come and we both learn something new

What do you think? 😊

[dialex]

Since this questions was specific to this plugin (and not Cypress) itself, I think I prefer to leave it here. Google will catch it anyway, so we don't lose anything. But it was a good idea nonetheless 😉

P.S: I just like having this personal notebook with my most used Cypress code snippets -- it's faster than searching online or going through bookmarks. It's also shared privately with teammates, my goal is to make it public after I finish my current project :P

[kalpeshchilka]

Thank you so much for the fast reply and in-depth explanation on how to solve this problem 🙇

YES, it worked. I spend the whole yesterday trying a solution but I could workaround the "cy.get() is itself an assertion" obstacle. I will add this tip to my "Cypress recipes" notebook!

Hello @dialex,

I am not sure if it's a lot to ask, but can you please share your "Cypress recipes" notebook. It will be of great help since it's created with all your experience of cypress and plugins.

[dialex]

Of course @kalpeshchilka, glad to help 😉

• My Cypress recipes: https://www.diogonunes.com/blog/cypress-tips-tricks/
• My Cypress template repo: https://github.com/dialex/cypress-sapling/

[goska-malaga]

after hours spent trying to use get (as I found it on stackoverflow) and it is hard to notice a small comment in readme since example of using cy.get is more visible: cy.waitUntil(() => cy.get("input[type=hidden]#recaptchatoken").then($el => $el.val()))
so, after some hours I got here to this thread and it took me some another half day trying until I found another comment about use of brackets #355
all the time it took me for sure is because of low coding skills and like you wrote it is all about the brackets

[dimitur2204]

Simply, we consume directly the Cypress' exposed jQuery.

Or, more condensed

cy.waitUntil(() => cy.reload().then(() => Cypress.$(activePackageSubtitle).length))
cy.get(activePackageSubtitle).should("exist")

Let me know if it works as you expect 😉

@NoriSte Isn't using something like

    cy.waitUntil(function () {
      return Cypress.$('[data-cy="progress-bar-4"]').length;
    });

the same as using cy.wait() or cy.get('#',{ timeout: }). Is it as much of an antipattern as those or is using waitUntil better in some way?