I have a table showing the results of a query. When I launch the query, a loading spinner is shown and then, when the server returns data, the results. This simple scenario is weirdly tricky to test in Cypress.
cy.get("table .loadingSpinner", {timeout: 60000}).should("be.visible");
cy.get("table .loadingSpinner", {timeout: 60000}).should("be.not.visible");
cy.get("table", {timeout: 60000}).find("tr[data-index]", {timeout: 60000}).should("have.length.gt", 0);
Sometimes this code fails on the first line because the loading is so fast Cypress can't catch the visibility of the loading spinner. Worst of all, this scenario is making my test results depending on the server load.
Obviously, I can't just check if table tr has length > 0, it would match the previous data shown in the table, not the query I've just made and I want to check the results of.
How to deal with this?
I could wait for the raw server response, but that wouldn't be practical and maybe not even possible, I have dozens of tables querying different endpoints, sometimes more than one for the same table.
Are you testing the functionality of the spinner, or are you testing the result of the query?
If you are testing for the query, just do
{
cy.wait(100)
cy.get("table .loadingSpinner", {timeout: 60000}).should("be.not.visible");
}
And don't look for it to be there, just look for it not to be there. Increase timeout as needed.
If you are testing the spinner, then the application needs to slow down so that you have a chance to catch it.