Cypress使用cy.origin()处理魔法链接登录报错问题

问题核心 #

你的代码错误在于cy.origin的使用方式——它需要接收域名而非完整链接，且直接访问/无法触发魔法链接的验证逻辑。另外跨域场景下需要正确处理域名跳转或提取验证凭证。

方案1：正确使用cy.origin访问魔法链接 #

通过URL对象解析魔法链接的域名和完整路径，在cy.origin中指定对应域名后直接访问链接：

cy.request({
  method: "GET",
  url: "https://mailsac.com/api/addresses/xxxx@mailsac.com/messages",
  headers: {
    "Mailsac-Key": "here-goes-the-key",
  },
}).then((res) => {
  // 优先验证links数组有效性，避免索引报错
  if (!res.body[0]?.links?.length) {
    throw new Error("未在邮件中找到魔法链接");
  }
  const magicLink = res.body[0].links[0];
  const url = new URL(magicLink);
  
  // 传入完整链接到cy.origin的回调中访问
  cy.origin(url.origin, { args: { magicLink } }, ({ magicLink }) => {
    cy.visit(magicLink);
    // 等待登录跳转完成，比如检查测试环境主页元素
    cy.get('[data-test="main-page"]').should('be.visible');
  });
});

方案2：提取验证凭证直接注入测试环境 #

如果魔法链接包含可复用的验证token（如URL参数中的token/code），可以跳过跳转直接将凭证注入测试环境的存储（Cookie/LocalStorage），避免跨域跳转：

cy.request({
  method: "GET",
  url: "https://mailsac.com/api/addresses/xxxx@mailsac.com/messages",
  headers: {
    "Mailsac-Key": "here-goes-the-key",
  },
}).then((res) => {
  const magicLink = res.body[0].links[0];
  const url = new URL(magicLink);
  // 从链接参数中提取验证token（根据实际参数名调整）
  const authToken = url.searchParams.get('token');
  
  // 先进入测试环境域名
  cy.visit('/');
  // 将token注入LocalStorage（根据后端验证方式调整为Cookie）
  cy.window().then(win => {
    win.localStorage.setItem('auth_token', authToken);
  });
  
  // 直接访问主页，此时已通过token验证
  cy.visit('/dashboard');
});

方案3：启用跨域会话管理简化流程 #

在Cypress配置中开启experimentalSessionAndOrigin，直接访问魔法链接并保存登录状态，后续测试可复用会话：

第一步：修改cypress.config.js #

module.exports = {
  e2e: {
    experimentalSessionAndOrigin: true,
    // 其他配置项
  }
}

第二步：测试代码中使用cy.session #

// 定义登录会话，仅执行一次
cy.session('magic-login', () => {
  cy.request({
    method: "GET",
    url: "https://mailsac.com/api/addresses/xxxx@mailsac.com/messages",
    headers: {
      "Mailsac-Key": "here-goes-the-key",
    },
  }).then((res) => {
    const magicLink = res.body[0].links[0];
    // 直接访问魔法链接，Cypress自动处理跨域跳转
    cy.visit(magicLink);
    // 验证登录成功
    cy.get('[data-test="user-avatar"]').should('exist');
  });
});

// 后续测试直接访问主页，无需重复登录
cy.visit('/dashboard');

额外注意事项 #

• 若Mailsac返回的links数组为空，可通过邮件HTML内容正则提取链接：

  const emailHtml = res.body[0].html;
  const magicLinkMatch = emailHtml.match(/https:\/\/[^"]+\/magic-login[^"]+/);
  if (!magicLinkMatch) throw new Error("未匹配到魔法链接");
  const magicLink = magicLinkMatch[0];
  

• 确保魔法链接未过期，测试时建议获取最新邮件（可添加时间过滤参数到Mailsac API）。

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