How to deal with fast actions

[antonioaltamura]

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.

[bahmutov]

Take a look at https://docs.cypress.io/guides/references/assertions#Negative-assertions and at https://glebbahmutov.com/blog/negative-assertions/

I would spy on the query API call and delay it to test the loading spinner in action.