noriste / cypress-wait-until Goto Github PK
View Code? Open in Web Editor NEWAdd the Cypress waiting power to virtually everything π
Home Page: https://www.npmjs.com/package/cypress-wait-until
License: Other
Add the Cypress waiting power to virtually everything π
Home Page: https://www.npmjs.com/package/cypress-wait-until
License: Other
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;
});
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?
Hello! Is possible to overwrite the waitUntil command with Cypress.overwrite('waitUntil',.... to set up a global timeout? How can i do this?
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
}
}));
This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.
These updates have all been created already. Click a checkbox below to force a retry/rebase of any.
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.yml
node 10
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
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
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.
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 π
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?
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?
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
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()
})
}
Can i define a timeout value for waitUntil without passing by params?
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!
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
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.
The cy.waitUntil command is not working in cypress run mode.
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().
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.
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.
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.
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?
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()
@all-contributors please add @john20xdoe for doc
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.
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).
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.
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.
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.
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?
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!
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
});
});
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!
I believe cy.xpath
would not work since it has assertions in deep implementation
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?
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?
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
or3xx
.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.
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));
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?
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?
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
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
cy.waituntill
would not execute in an async function, otherwise, you use .then
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 ) );
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.