Cypress异步命令处理：优化IndexedDB Token获取与API调用

1. 能否直接await异步函数？ #

可以，但要适配Cypress的执行逻辑：

• 直接在测试用例顶层代码中await可能引发时序问题，因为Cypress命令基于队列异步执行。
• 正确用法是在cy.then()回调或自定义命令中使用await，这类回调会嵌入Cypress命令队列的执行流程：

// 测试用例内的正确写法
cy.then(async () => {
  const token = await getTokenFromIndexedDB();
  // 携带token发起请求
  cy.request({
    method: 'GET',
    url: '/api/data',
    headers: { Authorization: `Bearer ${token}` }
  });
});

2. 高效复用Token的最优方案 #

避免重复查询IndexedDB，可在测试套件初始化时一次性获取Token并缓存：

步骤1：前置钩子中获取并缓存Token #

before(async () => {
  const token = await getTokenFromIndexedDB();
  Cypress.env('AUTH_TOKEN', token); // 存入Cypress环境变量
});

步骤2：所有请求直接复用缓存的Token #

后续API请求无需重复调用查询函数，直接读取环境变量即可：

cy.request({
  method: 'GET',
  url: '/api/data1',
  headers: { Authorization: `Bearer ${Cypress.env('AUTH_TOKEN')}` }
});

cy.request({
  method: 'POST',
  url: '/api/data2',
  headers: { Authorization: `Bearer ${Cypress.env('AUTH_TOKEN')}` },
  body: { key: 'value' }
});

3. 封装为自定义命令（可选） #

如果需要全局灵活调用，可封装成Cypress自定义命令：

// 在cypress/support/commands.js中定义
Cypress.Commands.add('getAuthToken', async () => {
  const token = await getTokenFromIndexedDB();
  return token;
});

// 测试用例中调用
cy.getAuthToken().then(token => {
  cy.request({
    url: '/api/data',
    headers: { Authorization: `Bearer ${token}` }
  });
});

额外优化：添加空值容错 #

为避免authUser键不存在导致报错，建议在查询函数中增加空值判断：

export const getTokenFromIndexedDB = async () => {
  const db = await openDB('StorageDB');
  const keys = await db.getAllKeys('LocalStorage');
  const authKeys = keys.filter(key => key.startsWith('authUser'));
  
  if (!authKeys.length) {
    throw new Error('IndexedDB中未找到authUser记录');
  }
  
  const value = await db.get('LocalStorage', authKeys[0]);
  return value?.value?.token || '';
};

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