Cypress：将登录函数从before/beforeEach钩子迁移至独立文件后token未正确传递的问题解决

你遇到的核心问题是Cypress命令的异步特性，以及对TypeScript函数返回值和参数传递的误解。我们一步步拆解问题，再给出可行的解决方案。

为什么原来的代码会失效？ #

1. Cypress命令是异步的：cy.request是异步执行的，你的fetchUser函数会在cy.request完成前就返回，所以主测试文件里token = fetchUser(token)拿到的是undefined，而不是接口返回的token。
2. 参数传递是值传递：你试图在fetchUser里修改传入的token参数，但TypeScript中基本类型是值传递，函数内部修改的只是副本，不会影响外部的token变量。
3. TypeScript类型错误：你声明fetchUser返回string，但函数本身没有任何返回语句（then里的return token是回调函数的返回，不是fetchUser的返回），所以会触发类型警告。

解决方案1：用Cypress环境变量存储token（推荐） #

这种方式不需要手动处理异步赋值，利用Cypress的环境变量共享token，代码更简洁：

support/authentification.ts #

export function fetchUser() {
  // 请求接口后，把token存入Cypress环境变量
  return cy.request('POST', 'https://my-api', {
    email: Cypress.env("USER_LOGIN"),
    password: Cypress.env("USER_PASSWORD"),
  })
  .its('body.token')
  .then((token) => {
    Cypress.env('authToken', token);
  });
}

export function setUser() {
  // 从环境变量取出token，用as string做类型断言
  const token = Cypress.env('authToken') as string;
  cy.visit('/projects', {
    onBeforeLoad(win) {
      win.localStorage.setItem('token', JSON.stringify({ token }));
      for (let i = 0; i < 5; i++) {
        win.localStorage.setItem(`guidedTour${i}`, 'true');
      }
    },
  });
}

主测试文件 #

import { fetchUser, setUser } from "../support/authentification";

before(() => {
  // Cypress会自动等待这个异步命令完成，再执行后续代码
  fetchUser();
});

beforeEach(() => {
  setUser();
});

it('my test', () => {
  // 测试逻辑
});

解决方案2：利用Cypress链式命令传递token #

如果你更倾向于在变量中存储token，可以让fetchUser返回Cypress的链式对象，在before中通过then接收token：

support/authentification.ts #

import { Chainable } from 'cypress';

// 明确返回类型为Chainable<string>，让TypeScript正确推断类型
export function fetchUser(): Chainable<string> {
  return cy.request('POST', 'https://my-api', {
    email: Cypress.env("USER_LOGIN"),
    password: Cypress.env("USER_PASSWORD"),
  })
  .its('body.token');
}

export function setUser(token: string) {
  cy.visit('/projects', {
    onBeforeLoad(win) {
      win.localStorage.setItem('token', JSON.stringify({ token }));
      for (let i = 0; i < 5; i++) {
        win.localStorage.setItem(`guidedTour${i}`, 'true');
      }
    },
  });
}

主测试文件 #

import { fetchUser, setUser } from "../support/authentification";

let token: string;

before(() => {
  // 在then回调中赋值token，Cypress会等待异步操作完成
  fetchUser().then((fetchedToken) => {
    token = fetchedToken;
  });
});

beforeEach(() => {
  setUser(token);
});

it('my test', () => {
  // 测试逻辑
});

关键知识点提醒 #

• Cypress的所有命令都是异步的，但它会自动管理命令队列，确保前一个命令完成后再执行下一个。
• 不要试图用普通函数的返回值接收Cypress命令的结果，而是通过then回调或者Cypress的环境变量、自定义命令来共享数据。
• TypeScript中，函数的返回类型必须和实际返回值匹配，如果函数内部是异步操作，不要声明返回基本类型，而是返回Chainable<T>或者Promise<T>。

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