Cypress 12中使用cy.origin处理Auth0登录弹窗失效问题咨询

Cypress 12 确实支持通过 cy.origin 处理跨源弹窗的认证流程，你的代码存在几个关键问题导致失败，修正后即可正常使用：

核心问题分析 #

1. 域名错误：你代码中 cy.origin 指定的是谷歌域名，但 Auth0 认证的实际域名是你的 Auth0 租户域名（例如 https://your-tenant.auth0.com），而非谷歌域名，这会导致 Cypress 无法匹配到正确的跨源上下文。
2. 弹窗上下文未捕获：点击登录按钮后弹出的是新窗口，cy.origin 默认处理当前标签页的跨源跳转，需要先捕获新窗口的打开事件，确保 Cypress 切换到弹窗的上下文。

修正后的测试代码 #

// 确保 cypress.config.js 中启用 experimentalSessionAndOrigin
// module.exports = defineConfig({
//   e2e: {
//     experimentalSessionAndOrigin: true,
//   },
// });

cy.visit('https://myapp.com');

// 点击登录按钮，触发 Auth0 弹窗
cy.get('login_button').click();

// 监听新窗口打开事件，确认跳转目标为 Auth0 域名
cy.window().then((win) => {
  const originalOpen = win.open;
  cy.stub(win, 'open').callsFake((url) => {
    expect(url).to.include('https://your-auth0-tenant-domain.auth0.com');
    return originalOpen.call(win, url);
  });
});

// 使用正确的 Auth0 租户域名
cy.origin('https://your-auth0-tenant-domain.auth0.com', () => {
  // 等待登录页面加载并验证页面标题
  cy.get('h1').should('contain', 'Sign In'); // 根据你的 Auth0 页面文本调整
  // 输入账号密码
  cy.get('#username').type('test@test.com');
  cy.get('#password').type('testpassword', { log: false });
  // 提交登录（Auth0 默认用 button 而非 input 作为提交按钮）
  cy.get('button[type="submit"]').click();
});

// 认证完成后返回原应用，验证登录状态
cy.visit('https://myapp.com');
cy.get('.user-profile-element').should('be.visible'); // 替换为你的应用登录后可见元素

额外注意事项 #

• 确认 Auth0 登录页面的元素选择器与实际页面一致，部分租户可能自定义了登录页，需要调整选择器。
• 若弹窗为浏览器原生弹出窗口，Cypress 12 的 experimentalSessionAndOrigin 特性已支持跨窗口的上下文切换，无需额外配置。
• 避免使用硬编码的等待时间（如 cy.wait(2000)），优先使用元素断言来等待页面加载。

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