How to click form button in cypress without triggering page load

Question

When clicking a form button in a cypress test, I fail to be able to do any additional testing on the page until the page response has finished. This is a problem, as I'm trying to test for the visibility of a loading spinner, after clicking the form button.

Test example that doesn't work:

 cy.get('#username').type('testusername')
    .get('#password').type('password')
    .get('#login-button').click().then(() => {
       cy.get('#login-spinner').should('be.visible');
    });

The problem is that the last part, cy.get('#login-spinner').should('be.visible'); is not executed until the page has loaded. I have tried moving it outside the .then() clause as well, but the result is the same - cypress seems very adamant on having to wait for the form response to load:

cy.get('#login-spinner').should('be.visible'); is then executed on the page that loads after the form click, at which point the spinner is hidden again, causing the test to fail.

Answer 1

You can attach an event listener to the form and stop the event like so:

cy.get('#username').type('testusername')
cy.get('#password').type('password')
cy.get('<add-form-selector-here>').then(form$ => {
   form$.on('submit', e => {
     e.preventDefault();
   });
})