Cypress uncaught:exception处理器在Magic.link谷歌登录流中失效遇错误

问题原因 #

ResizeObserver loop limit exceeded是谷歌登录页面内部的非致命警告，但Cypress默认会拦截所有未捕获异常。你在support/commands.js中设置的全局异常处理器无法作用于cy.origin切换后的独立上下文——因为cy.origin('https://accounts.google.com')会创建一个隔离的测试环境，全局的Cypress.on('uncaught:exception')监听不会穿透到这里。

解决方案1：在cy.origin上下文内添加异常过滤 #

直接在谷歌登录页面的测试上下文中注册异常处理器，针对性忽略ResizeObserver错误：

describe('my auth flow', () => {
    it('can auth with google', () => {
        // 点击站点内的登录按钮
        cy.get('button')
            .contains('sign-in')
            .click();

        cy.origin('https://accounts.google.com', () => {
            // 仅在谷歌登录页面上下文内处理异常
            Cypress.on('uncaught:exception', (err) => {
                // 忽略ResizeObserver循环超限错误
                if (err.message.includes('ResizeObserver loop limit exceeded')) {
                    return false;
                }
                // 保留对其他异常的默认处理
                return true;
            });

            // 输入邮箱
            cy.get('input[type=email]')
                .type('myuser@mydomain.com');

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

            // 等待密码页面加载完成
            cy.get('#password')
                .should('exist')
                .and('be.visible');

            // 输入密码
            cy.get('#password input[type=password]')
              .type('mypassword');

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

解决方案2：优化等待逻辑减少DOM触发频率 #

频繁的元素可见性检查可能加剧ResizeObserver的触发，改用网络请求等待来替代直接的DOM检查：

describe('my auth flow', () => {
    it('can auth with google', () => {
        cy.get('button').contains('sign-in').click();

        cy.origin('https://accounts.google.com', () => {
            Cypress.on('uncaught:exception', (err) => {
                return !err.message.includes('ResizeObserver loop limit exceeded');
            });

            cy.get('input[type=email]').type('myuser@mydomain.com');
            cy.get('button').find('span').contains('Next').click();

            // 等待密码页面的核心网络请求完成，再操作元素
            cy.intercept('GET', '**/password').as('passwordPageLoaded');
            cy.wait('@passwordPageLoaded', { timeout: 10000 });

            cy.get('#password input[type=password]').type('mypassword');
            cy.get('button').find('span').contains('Next').click();
        });
    });
});

关键说明 #

• 不要直接返回false忽略所有异常，针对性过滤特定错误可以避免漏掉真正的业务异常
• cy.origin的上下文是完全隔离的，所有针对该域名的配置、事件监听都必须在回调内部设置
• 以上方案无需启用Magic测试模式，可完整执行真实的UI登录流程

内容的提问来源于stack exchange，提问作者quickshiftin