Cypress+Cucumber中通过API登录后自动退出页面问题排查

核心问题排查 #

1. Token存储格式错误：当前代码把整个响应体res.body存入localStorage的token字段，若后端返回结构是{token: "xxx"}，前端读取时会因格式不匹配导致身份验证失败，触发自动退出。
2. Session验证逻辑不合理：validate函数直接执行cy.visit("/home")，若此时token无效（或未正确加载），页面会跳转到登录页，Cypress会判定session失效并重新执行登录逻辑，引发状态混乱。
3. 重复页面跳转干扰：beforeEach中先执行loginViaAPI（内部已处理登录状态），再调用cy.visit(platform.host)，重复跳转可能导致localStorage的token被清空或未正确携带。

修正后的代码实现 #

1. 自定义命令loginViaAPI优化 #

// command.js
Cypress.Commands.add("loginViaAPI", (user, pass) => {
  cy.session([user, pass], () => {
    // 拼接完整登录接口URL
    cy.request({
      method: "POST",
      url: `${Cypress.env("platform").host}/login`,
      body: {
        username: user,
        password: pass
      }
    }).then(res => {
      expect(res.status).to.eq(200);
      // 仅存储后端返回的token字段（根据实际返回结构调整）
      const token = res.body.token; 
      window.localStorage.setItem("token", token);
      // 若后端用cookie验证，无需手动存localStorage，cy.request会自动保存cookie
    });
    // 登录后直接访问首页，确保状态生效
    cy.visit(`${Cypress.env("platform").host}/home`);
  }, {
    validate() {
      // 验证session有效性：检查localStorage中存在有效token
      cy.window().then(win => {
        const token = win.localStorage.getItem("token");
        expect(token).to.exist.and.not.be.empty;
      });
      // 可选：验证页面登录状态元素是否存在
      cy.get(".user-info").should("be.visible");
    }
  });
});

2. Step Definition调整 #

// Step Definition
beforeEach(function () {
  const platform = Cypress.env("platform");
  // 调用登录命令，无需重复执行visit
  cy.loginViaAPI(platform.admin_username, platform.password);
});

Given("进入首页", () => {
  // 验证当前页面是否为首页，无需重复跳转
  cy.url().should("include", "/home");
});

When("执行操作", () => {
  // 业务操作逻辑
});

Then("验证结果", () => {
  // 结果验证逻辑
});

额外注意事项 #

• 匹配后端验证机制：若后端使用cookie而非localStorage做身份验证，无需手动设置localStorage，cy.request会自动将响应中的cookie存入浏览器，后续cy.visit会自动携带。
• 跨文件复用Session：若需要在多个测试文件间复用登录状态，可在cy.session的第三个参数中添加cacheAcrossSpecs: true。
• 调试技巧：在validate函数中添加cy.debug()，或通过浏览器开发者工具查看localStorage、cookie状态，确认token是否正确存储。

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