google-oauthcypresscypress-originmagic.link

Cypress uncaught:exception handler not working with Magic.link flow


I'm using Cypress to test a login flow that uses Magic.link auth on a mobile Web device, which is encountering the ResizeObserver loop limit exceeded error, as it tries to navigate the Google Auth forms. I've looked at numerous posts, and played around with my test, but it seems the handler is not working.

The recommended Google Authentication from the Cypress docs is insufficient, because with Magic, the flow is initiated by a call to magic.oauth.loginWithRedirect, hence I was hoping to drive the process via the UI directly.

You'll see I added a test to ensure the password input is visible. Now the exception is being thrown at that part of the test. If I remove that check the error occurs on the next step where I try to type the password.

describe('my auth flow', () => {

    it('can auth with google', () => {
        // click login button from my site
        cy.get('button')
            .contains('sign-in')
            .click();

        cy.origin('https://accounts.google.com', () => {
            // enter email address
            cy.get('input[type=email]')
                .type('myuser@mydomain.com');

            cy.get('button')
                .find('span')
                .contains('Next')
                .click();

            // wait for password page to show
            cy.get('#password')
                .should('exist')
                .and('be.visible'); // error here...

            // enter password
            // error here if above visibility check removed
            cy.get('#password input[type=password]')
              .type('mypassword');

            cy.get('button')
                .find('span')
                .contains('Next')
                .click();
        });
    });
});

In support/commands.js, I've added the global error handler, which should handle all uncaught exceptions according to the documentation.

Cypress.on(
  'uncaught:exception',
  (err) => false
);

Magic does have a test mode, however I really don't want to bypass the login flow. Ideally I could exercise the login flow without hacks for testing.


Solution

  • The cy.origin() command is an isolated sandbox with different document and window to the primary domain.

    Try adding the exception handler inside the origin command (presuming the error is happening while on the google domain).

    cy.origin('https://accounts.google.com', () => {
      Cypress.on('uncaught:exception', (err) => false)