noriste / cypress-wait-until

Add the Cypress waiting power to virtually everything 🎉

I'm a passionate JavaScript engineer, currently focused on React and TypeScript. I love creating high-quality products, learning and sharing my knowledge, helping people, speaking at conferences, and facing new challenges.

• 🗣 Did you attend a talk of mine? You can find the slides on slides.com/noriste
• 📋 Did you read an article of mine? You can find all of them on Medium or dev.to
• 📖 Check out my UI Tesing Best Practices book
• 👨‍🏫 Are you looking for a Cypress course? Reach me at [email protected]

A list of all my articles, courses, packages, etc. is available on my my-contributions repository. You can find me on Twitter for everything else ❤️

cypress-wait-until's Issues

WaitUntill works only with Cypress methods

It is more like a question, or a request for clarification. I was not able to find an answer in docs.
So in my case I have a class with method that is responsible for fetching some data from API. This method uses waitUntil and returns a Cypress' promise.
So now in test I want to fetch this data till the returned json will have certain value. In order to do it I wrote:
cy.waitUntil(() => apiClient.get(item.id).then(i => i.items[0].Name === item.items[1].Name));
What happened during execution was Cypress waited indefinitely long for this wait. Timeout was never raised (although time passed).
So in my second attempt I wrapped the whole expression in cy.wrap:
cy.waitUntil(() => cy.wrap(apiClient.get(item.id).then(i => i.items[0].Name === item.items[1].Name)););
In this form, the wait worked flawlessly.
My question is, whether waitUntil is limited only to cy commands, or is it some kind of the defect. Maybe usage of two waitUntil is the issue here?

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: undefined. Note: this is a nested preset so please contact the preset author if you are unable to fix it yourself.

Timed out retrying after 4000ms: Expected to find element

Hello,

I am trying to use this, as such (magento 2 site)

cy.waitUntil(() => cy.get('.loader > img').length == 0, {
            interval: 100 // performs the check every 500 ms, default to 200
        });

which is to detect if a loader is busy in checkout process, however, once that loader is removed in DOM, I get

Timed out retrying after 4000ms: Expected to find element: .loader > img, but never found it.

Because this error occurred during a before each hook we are skipping the remaining tests in the current suite: Checkout Payment Methods
cypress/integration/checkout_methods_spec.js:58:31
  56 |         cy.get('#top-cart-btn-checkout').should('be.visible')
  57 |         cy.get('#top-cart-btn-checkout').click()
> 58 |         cy.waitUntil(() => cy.get('.loader > img').length == 0, {
     |                               ^
  59 |             interval: 100 
  60 |         });
  61 | 

Image for visual

Likely just a syntax/usage issue, but can't figure it out.
Appreciate your effort.

Problem waiting for count to be true

Hello,

I'm using this code but its not doing anything, am I doing something wrong?

cy.waitUntil(() => cy.document().then(doc => {
            Boolean(doc.readyState === 'complete' && WaitFunctions.ajaxCounter === 0), {
                errorMsg: 'HTTP requests took more than 1 minute to resolve',
                timeout: 60000, // waits up to 60000 ms, default to 5000
                interval: 500 // performs the check every 500 ms, default to 200
            }
        }));

Add Optional Support to avoid failing a test

Is it possible to fail silently or ignore the error so that if cy.waitUntil() condition is not satisfied at all and is timedout but still the test is not failed and still want to proceed further with the execution?

I believe I have gone through the documentation but haven't found a way if this can be achieved. The usecase may not be regular but still I have ended up with such case.

So I think it would be nice if there is a way possible by setting a config param which will avoid the test to fail and allow it to proceed further eventhough the cy.waitUntil() condition is not met.

Another option could be to have an optional onTimedOut() callback let's say to be triggered on time out and which is expected to return a Boolean value which will decide whether to pass or fail cy.waitUntil() finally.

I hope this does make sense to have some kind of control to pass or fail cy.waitUntil().

Cannot use this with webpack preprocessor

I followed the Typescript instructions from https://www.npmjs.com/package/cypress-wait-until#typescript and also added the import to the support command file. However, my project renders Typescript on the fly using https://github.com/cypress-io/cypress-webpack-preprocessor.
While coding, the cy.waitUntil command is visible via intellisense. However, when I run it, I get the following error.

TypeError: cy.waitUntil is not a function

It doesn't matter which command I use. Even simple
cy.waitUntil(() => true);
throws error.
This happens on both UI and Command Line.

Do you have a suggestion on how I can fix this? Please advise.

Add john20xdoe to contibutors

@all-contributors please add @john20xdoe for doc

Cypress UI vs command line - not same results

I'm working on a project, where I should test UI components of a streamlit application.
So I used Cypress.
The thing is when I created a cypress command where I call waitUntill inside of it
cy.waitUntil(function() { return cy.get('p').contains("Loading ...").should('not.exist') })
It works fine when I test it on Cypress UI
but when I call the same cypress test from terminal using npx cypress run --spec cypress/integration/createAsset.spec.js
I get this error

AssertionError: Timed out retrying: Expected not to find content: 'Loading ...' within the element: [ <p>, 1 more... ] but continuously found it.

I tried to find out the issue, but until now no luck.
Does anyone faced the same issue?

Add @allevo to contributors

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

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 😄

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update dependency semantic-release to v21.0.3
• chore(deps): update dependency cypress to v12.14.0
• chore(deps): update dependency typescript to v5.1.3
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

npm

package.json

• cypress 12.13.0
• cz-conventional-changelog 3.3.0
• git-cz 4.9.0
• serve 14.2.0
• start-server-and-test 2.0.0
• typescript 5.0.4
• @semantic-release/npm 10.0.3
• semantic-release 21.0.2

travis

.travis.yml

• node 10

---

• Check this box to trigger a request for Renovate to run again on this repository

Wait for element change

Hello,

the functionality of this package is awesome. However I'm stuck on a little problem.
I have the following markup given:

<div>
    <ul id="list" data-cy="some-timestamp">
        <li>Some item</li>
    </ul>
</div>

How can I detect a status change in the <ul> element assuming that the content which will appear is unknown?

Thank you in advance.

Edit: As I'm using server-side rendered partials I could fetch a timestamp together with the ul element and compare if the two timestamps are different. I'm not sure how this can be achieved as there is some storing of a variable involved. I'm not that proficient with async js. Any thoughts on this?

Wait until the state of an UI Control

Hello,

I'm new in CyPress and with your plugin. I try to use it with SAPui5 framework, and all control have getBusy() function to indicate if the control is beeing working or not.

I want to use your plugin but I do not know how to do it.

here is my tries :

`cy.waitUntil(() => {
cy.get('#id').then((oControl) =>{
oControl.control()[0].getBusy() === true

})`

It's seams doesn't work. Maybe it is because of the syntaxe...

Please advice.

Regards,
Joseph

Element is never found when timeout options are overrided

Hello,

Have an example here of checking if element is visible on the page, but it can appear later so I refresh the page each time. Also, overrided default options.

cy.waitUntil(
        () => {
            cy.reload().then(
                () => Cypress.$(selector).length,
            );
        },
        {
            interval: 10000,
            timeout: 120000,
            errorMsg: 'Element not found',
        },
    );

The problem is that, even if element appeared on the page, waitUntil never stops and fails with Element not found.

And this example fails with You are mixing async and sync code when element is found.

cy.waitUntil(
        () => {
            cy.reload();
            return Cypress.$(selector).length;
        },
        {
            interval: 10000,
            timeout: 120000,
            errorMsg: 'Element not found',
        },
    );

Could you please help? What am I doing wrong?
Thank you

.click() not being retried

I am trying to retry a button click that fails randomly with the error "Timed out retrying: cy.click() failed because this element is detached from the DOM.".

I have figured out the way to use waitUntil to solve my problem but I want to understand why my first approach did not work.

Initial approach. This fails after first retry:
cy.waitUntil(() => cy.wrap(Cypress.$(ctaLocatorName)).click().then( () => Cypress.$("#getArea").length > 0 ) );

Though if I convert it to below snippet, it works fine:
cy.waitUntil(() => cy.wrap(Cypress.$(Cypress.$(ctaLocatorName).click())).then( () => Cypress.$("#getArea").length > 0 ) );

global timeout and interval settings

Hi,

Awesome library! Is there a way to override the timeout and interval settings for all waitUntil calls? Instead of having to pass it into each waitUntil?

Thanks!

Do not support async/await function in es6 style

cy.waituntill would not execute in an async function, otherwise, you use .then

Update plugin to be compatible with Cypress 10

Hello 👋 I'm writing on behalf of the Cypress DX team. We wanted to notify you that some changes may need to be made to this plugin to ensure that it works in Cypress 10.

For more information, here is our official plugin update guide.

feature request: passing subject from previous chained command to waitUntil

It would be nice if I can pass the subject from the previous command in the chain of cypress commands into my checkfunction without having to use .then like this:

cy.getStore().then(store =>
  cy.waitUntil(
    () => {
      const things = store.getState().things;
      console.log(things, !!Object.keys(things).length);
      return !!Object.keys(things).length;
    }
  )
);

It would be ideal if I can do something like this:

cy.getStore().waitUntil(store => !!Object.keys(store.getState().things).length));

The TypeScript signature does not reflect the way the plugin works

The following code

generates the following TS errors

Argument of type '(subject: any) => any' is not assignable to parameter of type '() => any'.
Argument of type '(subject: any) => boolean' is not assignable to parameter of type '() => boolean | Chainable<boolean> | Promise<boolean>'.
Argument of type '(subject: any) => boolean' is not assignable to parameter of type '() => boolean | Chainable<boolean> | Promise<boolean>'.
Argument of type '(subject: any) => any' is not assignable to parameter of type '() => any'.

that means that the Generics of the signature are wrong.

Some more contributions

Plugin not working as expected - condition is verified over and over again even it returned true

cy.window().then(win => { cy.waitUntil(() => assert.isDefined(win.dataLayer, 'Data Layer is defined')) })

I've been trying to use this plugin for long time but keep getting similar outputs across almost any type of test where I use it.

How to use it with xpath selector?

I believe cy.xpath would not work since it has assertions in deep implementation

Run function option

I needed a way to press a button on the page before I recheck the condition.

I added the following to your code to include a command option that is executed before a retry.

options = options || {}

const TIMEOUT_INTERVAL = options.interval || 200
const TIMEOUT = options.timeout || 5000
const ERROR_MSG = options.errorMsg || 'Timed out retrying'
const COMMAND = options.command || {}
let retries = Math.floor(TIMEOUT / TIMEOUT_INTERVAL)

const check = result => {
if (result) {
return result
}
if (retries < 1) {
throw new Error(ERROR_MSG)
}
cy.wait(TIMEOUT_INTERVAL).then(() => {
retries--
COMMAND();
return resolveValue()
})
}

Not working as expected

I am using this package like this:

before(() => {
    cy.waitUntil(() => cy.request('GET', baseUrl, { failOnStatusCode: false, timeout: 60000 }),  { timeout: 60000 });
});

but Cypress fails with this message:

The response we received from your web server was:

504: Gateway Timeout

This was considered a failure because the status code was not 2xx or 3xx.

If you do not want status codes to cause failures pass the option: failOnStatusCode: false

It is not waiting until it gets a 200 response.

Document Promise.reject() as anti-pattern

RE: cypress-io/cypress#18557

My example code in the aforementioned issue uses resolve and reject. My thinking was that retry would continue even on reject but that's not the case. The correct usage is to only use resolve(true) and resolve(false), but error handling could be improved both by Cypress and this plugin.

Should there be a .catch() block added here? https://github.com/NoriSte/cypress-wait-until/blob/master/src/index.js#L75

Wait without timeout

Hello, I'm trying to use the plugin to wait for something that might not happen, is there a way I could like wait 5 seconds and if nothing happens test keeps running without failing?

Great use of wait-until if you have detached dom problems

I want to share this solution to my problems.

cy.waitUntil(() =>
      cy.get('.someSelector')
        .as('someAlias')
        .wait(10) // for some reason this is needed, otherwise next line returns `true` even if click() fails due to detached element in the next step
        .then($el => Cypress.dom.isAttached($el)),
    { timeout: 1000, interval: 10 })

      .get('@someAlias')
      .click()

Wait until SQL query

Helo people, I'm not being able to make it work on my code, perhaps because inside of the waitUntil chain I'm using a Postgres query from another plugin, I don't know if it should work. I've read docs and tried different ways to use but none worked, I've based in the 5th example of the readme file and reached this code:

cy.waitUntil(() => cy.postgreSQL(sql))
                               .then(answer => expect(answer.status).to.be.equal("READY"))
    })

The result is that it's not retrying any verification

In case, the plugin I'm using: https://www.npmjs.com/package/cypress-postgresql

How to wait until a the route URL changes?

I'm not sure why, but this code doesn't work:

const activeLessonTeach = `${Cypress.config("baseUrl")}/#/lesson/teach/`
cy.waitUntil(() => cy.url().should("include", activeLessonTeach), { timeout: 240000, interval: 1000 })

It just fails right away after checking once, instead of checking each 1000 ms for a total of 240 seconds.

Is my syntax wrong?

I read this somewhere:

You cannot use Cypress' assertions inside cy.waitUntil.

But I still wanna use waitUntil with both cy.get() and cy.url() to make use of its interval.

How can I do this?

Wait for DOM change in order to assert completion of a job

Our platform has a job running feature. The different displayed statuses include: Running, Successful, Failed, Canceled, and Error.

Jobs run via playbooks, and runtime length can vary greatly. We often write tests that require Cypress to wait until a job is finished running in order to assert something.

I want to use cy.waitUntil to wait for 'Running' to no longer be displayed in a certain element in order to proceed with the test commands. I have tried many different things. This is my most recent attempt (so far none of my different ways have worked):

const jobStatusValue = 'Successful'
const checkFunction = () =>
  cy.findByCustomId('job-status-value').then((jobStatus) => jobStatus.text === jobStatusValue)

cy.waitUntil(checkFunction, { timeout: 60000 })

cy.findByCustomId('job-status-value')
  .invoke('text')
  .should((text) => {
    expect(text).to.contain('Successful')
  })

Can you please help me figure out a good way to do this? I would so appreciate it!

timeout doesn't work

Hi,
I love this extension, because I need the slow interval checking and a long timeout.

However, it seems like it doesn't work at all. It seems like it just checks once, then fails, and never checks again.

My code:

cy.waitUntil(() => cy.get(".e2e-my-lessons-grid > *").should("exist"), { timeout: 120000, interval: 1000 })

Any advice much appreciated.

Cant set timeout option

cy.waitUntil(() => cy.wrap('445').should('eq', '44'), {
  timeout: 20000,
  interval:2000
})

Cypress don't wait my timeout, test fails when default time is out..
maybe I set timeout option not correctly?

help?

Hello,

I have this problem I'm trying to solve.

Gleb recommended cypress-wait-until but from the documentation I don't understand how to do it.

You mention a checkFunction that is supposed to be retried but I don't see it anywhere in the code, so I don't know where to put the code that is supposed to be retried.

Global timeout

Can i define a timeout value for waitUntil without passing by params?

Overwrite WaitUntil command

Hello! Is possible to overwrite the waitUntil command with Cypress.overwrite('waitUntil',.... to set up a global timeout? How can i do this?

cy.waitUntil is not a function

Hello,

I keep getting the error cy.waitUntil is not a function, anyone had a similar error?
I already have the line " import 'cypress-wait-until'; " in the correct file

Error of not finding an element even if it shouldn't be there

I'm slowly losing my mind. Locally, when I fire the CLI or GUI test in Cypress, then it detects the lack of an element and passes this test - such an assumption of the test that after clicking "delete" in the modal, the element is thrown out of the DOM.

BUT the issue is that when I push this to GitHub with CircleCI running the tests. And on CircleCI I get an issue. Is there any point here that I can improve the checking process of no elements in DOM?

Test:

it('A user can delete a photo', () => {
      cy.contains('Edit').click();
      cy.uploadFile('jpg-drop');
      cy.get('.photo-container').within(() => {
        cy.contains('Edit').click();
      });
      cy.get('.modal-content').within(() => {
        cy.contains('button', 'Delete').click();
      });
      cy.waitUntil(() =>
        cy.get('.photo-container').then(photoContainer => {
          cy.wrap(photoContainer).should('have.length', 0);
        }),
      );
});

Output:

CypressError: Timed out retrying: Expected to find element: '.photo-container', but never found it.

Example/Document Request: How to catch 'errorMsg' if cy.waitUntil() exceeds 'timeout'?

Using npm module cypress-wait-until, is there a way to catch errorMsg if cy.waitUntil() has completed all possible intervals and exceeded timeout? Thereby, providing a point of failure.

Example code waiting for an entry to be found in a log. Custom command cy.cmdLogVerify() returns an object if entry was found in log, otherwise if not found then returns null. If all attempts by cy.waitUntil() fail return object, then how to catch and isolate this failure?:

    cy.waitUntil(() => cy.cmdLogVerify().then($entryLog => cy.wrap($entryLog)), {
      errorMsg: 'ERROR: Not found in Logs',
      timeout: 20000, // waits up to 20000 ms, default to 5000
      interval: 2000, // performs the check every 2000 ms, default to 200
      verbose: true,
      customCheckMessage: 'CHECK: View Logs'
    }).then($entryLog => {
      expect($entryLog).to.be.an('object').not.empty;
    });

Move the Cypress tests to TypeScript

Today I imported this plugin into a TypeScript-based Cypress project. TS did not like the old definition (that's why I fixed it with #17 ) but we must avoid that the end user discovers it himself.

That's why I propose to move the Cypress test to TypeScript. @allevo do you want to do that? 👋

supporting snapshots with waitUntil would be a game changer

I am using the snapshot plugin linked below to essentially assert large amounts of DOM element state in a single, easy to use command.

https://github.com/cypress-io/snapshot

The problem however is that it is not setup to retry the snapshot state, it checks the DOM once and once only, if the DOM does not match the snapshot, the test will fail, this can happen mostly due to the DOM not being in the correct state because I have failed to find a hook to wait on that is reliable for each test.

I would love to just be able to whack my snapshot command inside a cy.waitUntil() and have it automatically retry the snapshot until it returns true.

It looks like the problem may be because the snapshot plugin throws an error when the snapshot comparison yields a negative result. perhaps I can make an adjustment to this.

Directly throws an error message

Hey,

    cy.waitUntil(()=> {
      cy.get('button[data-tip=btn_aim]')
        .then($el=>{
          return (!$el.attr('disabled'));
        })
    });

I always get an Errormsg.

waitUntil with cy.visit()

Hello!
I saw one of your explanations here:
https://stackoverflow.com/questions/60431148/cypress-do-action-until-element-shows-on-screen/60446878#60446878

But is it possible at all to implement it for this case?
https://stackoverflow.com/questions/60503761/option-to-retry-command-in-cypress-after-it-failed

to use the waitUntil, I'd have to have an exposed jQuery for the cy.visit and I don't think it exists as it is?
Is it possible to add the functionality to your repo?
The issue is the visit() has an assertion in itself on the 'load' event and I can't do it without test failing.

Thank you!

cy.waitUntil doesnt work in run mode

The cy.waitUntil command is not working in cypress run mode.

snapshots can't be used in combination with this plugin?

I am using the following cypress plugin to assert DOM elements to reduce the amount of convoluted steps that must be taken to assert on specific elements of the application under test.

https://github.com/cypress-io/snapshot

I use cy.waitUntil() in many other areas of the testing suite, but for some reason the snapshot feature seems to not like the waitUntil functionality, the snapshot will be checked once, and only once, and if it fails, the waitUntil will not kick into action.

Example code snippet:

cy.waitUntil(() => cy.get('.modal-header').snapshot({name: modelHeader-T001'}))

Is this expected, or am I doing something wrong here?

How to write test code about progess bar by waituntil

hi,
I've seen the usage of cypress-wait-until, but I still don't know how to write a scenario case about progess bar
by this method？
cy.waitUntil(() => { return Cypress.$(XXXXXXXX).length })
The scenario is similar to this picture
What I want to test is that
when backend api change some data and send message to frontend , the frontend monitors the changes and updates the UI,

Another question is whether cypress-wait-until can only end the wait by judging true or false?

Cypress throw an error when returning `true` inside the cy.waitUntil callback

Hello !

I'm using Cypress version 9.2.0 (latest) and cypress-wait-until version 1.7.2.

When I'm using cy.waitUntil( () => condition ), it works nice when the condition is falsy but as long as it become truthy, the test fail and cypress returns the following error:

cy.then() failed because you are mixing up async and sync code.

In your callback function you invoked 1 or more cy commands but then returned a synchronous value.

Cypress commands are asynchronous and it doesn't make sense to queue cy commands and yet return a synchronous value.

You likely forgot to properly chain the cy commands using another cy.then().

The value you synchronously returned was: true

node_modules/cypress-wait-until/src/index.js:64:47
  62 |       throw new Error(msg)
  63 |     }
> 64 |     cy.wait(options.interval, { log: false }).then(() => {
     |                                               ^
  65 |       retries--
  66 |       return resolveValue()
  67 |     })

Something is failing inside the source code... why ? is the wait-until broken after release v9 from Cypress ?

Here more details of my code which is failing:

      const obtainResults = (selector) => {
        let amount = 0;

        return cy.get('body').then($body => {
          amount = $body.find(selector).length;
          const data = { exist: amount > 0, numberOfElements: amount };
          return cy.wrap(data);
        })
      };

      cy.waitUntil(() => {
        return obtainResults("*css_selector**").then(({ exist }) => {
         return exist
        });
      });

Timeout overriden by defaultCommandTimeout

In my project I have in cypress.json defaultCommandTimeout set to one minute.
However, I used wait until in one function, where I wanted to wait for 15 minutes for command to complete.

Unfortunately, timeout from waitUntil is overriden by defaultCommandTimeout from Cypress.
Is it expected? If yes, could you give me a tip how to deal with the overriding, to make my 15 minutes more important than defaultCommandTimeout?

Add proper logging

Today I ran a test using the waitUntil and it works perfectly, but logs a lot of ugly wait 200.
My idea (and I saw a lot of other plugins use it) is name the command to waitUntil and add an option for description (right side of the command).
in code: cy.waitUntil(() => something(), { description: "short description near command name" })
if a description was not supplied, just leave this part empty (no text).

For example:
before this change:

After this change:

not waiting specified wait time between checks

I've been trying to use your package in my Cypress project, but unfortunately I can't get it to wait for the specified interval. From what I can tell it retries the specified checkFunction immediately timeout/interval times and does not wait at all between tries.

Here is my code:

cy.getStore().then(store =>
  cy.waitUntil(
    () => {
      const things = store.getState().things;
      console.log(things, !!Object.keys(things).length);
      return !!Object.keys(things).length;
    },
    {
      errorMsg: 'wait until things loaded error',
      timeout: 10000,
      interval: 1000,
    }
  )
);

I have also tested this without specifying any custom options, but that didn't work either.

Is there anything that I am maybe doing wrong in my implementation? Or is this an issue on your side? Also, looking at your tests it doesn't seem like you have a test that will test whether or not there were sufficient time waited between tries.

Package versions:
cypress 3.4.1
cypress-wait-until 1.3.0