Wait for Animation to Complete Cypress Community #i-need-help

Wait for Animation to Complete

echoing-tent-95037

01/19/2023, 4:59 PM

Hey everyone! I'm having an issue with one of my tests and would love some advice. Currently the test is set to insure a user is able to download a file. All that works, but it is occasionally flaky due to our loading animation. It appears that Cypress is clicking the download button before the animation finishes and a request never gets sent, so my wait for a 200 in the response obviously fails. I've tried adding

should('not.be.visible')

for the svg elements of the animation but it always passes even though the animation is still going. Any input on how to handle this is much appreciated. If it helps our svg for this is:

Copy code

<svg xmlns="http://www.w3.org/2000/svg" width="80px" height="80px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
    <circle cx="50" cy="50" fill="none" stroke="#3F80F3" stroke-width="10" r="30" stroke-dasharray="141.37166941154067 49.12388980384689" transform="rotate(182.503 50 50)">
        <animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;360 50 50" keyTimes="0;1" dur="2s" begin="0s" repeatCount="indefinite" />
    </circle>
</svg>

gray-kilobyte-89541

01/19/2023, 5:09 PM

but it keeps rotating no? Does the animation SVG get removed at the end? That is what you want to wait for, no?

echoing-tent-95037

01/19/2023, 5:16 PM

Hey @gray-kilobyte-89541 First I just want to say thanks for all you do for the Cypress community. Your blog is very helpful and very well written. So even when the animation is finished I can still see the svg in the dom, so it doesn't seem like it's getting completely removed.

echoing-tent-95037

01/19/2023, 5:16 PM

This is seen after animation is no longer loading on the page.

echoing-tent-95037

01/19/2023, 5:17 PM

I know this isn't ideal, but here is how I was attempting to handle this in a custom command:

echoing-tent-95037

01/19/2023, 5:17 PM

Copy code

Cypress.Commands.add('waitForSpinner', () => {
  cy.get('body').then((body) => {
    if (body.find('[id="SPINNER"]').length > 0) {
      cy.getById('SPINNER').should('not.be.visible');
    }
  });
});

gray-kilobyte-89541

01/19/2023, 5:18 PM

I think there is a better way, but I don't understand what is happening. Can you make an HTML page showing the spinner and how it is removed? Does it go away when something loads? Does it stop?

echoing-tent-95037

01/19/2023, 5:20 PM

It does go away from view once it stops, but it also doesn't seem to cover any elements from cypress to interact with. Hence the request never really getting sent when the download button is selected.

echoing-tent-95037

01/19/2023, 5:21 PM

I'm pretty new to this so making an HTML page to show as an example would take a lot longer than it would be worth 😀

gray-kilobyte-89541

01/19/2023, 5:53 PM

something like

https://youtu.be/Abv7m9H_15Y▾

and https://github.com/bahmutov/cypress-examples/commit/d1b419423e55c6cb64d2d91843e7025ce254a248

echoing-tent-95037

01/19/2023, 6:02 PM

That's awesome! Thanks for doing that so quickly. I'll go into the code and see how that load icon is called and use the class like you have here to check for the

exist

gray-kilobyte-89541

01/19/2023, 6:31 PM

Also look at https://github.com/bahmutov/cypress-examples/commit/1b9a5e5801086ed2817ad8c0565af96e98cc761a

echoing-tent-95037

01/19/2023, 7:41 PM

Thanks again, that put me on the right track. I found that I was checking for elements within our Sprite sheet that was always getting rendered. Currently going in and adding a data-testid to use to check if it exists to continue with test.

10 Views

Previous Next