Cypress测试切换选择器选项时触发401错误并登出的问题求助

我遇到一个棘手的问题：页面上有个双选项选择器，用Cypress的select()方法切换选项时，默认选中的第一个选项对应的API请求正常，但切换到Items选项时，会抛出401错误并触发系统登出，直接中断后续所有测试。本地手动操作完全没问题，但Cypress测试就是失败。

我已经做了这些尝试，但都没解决：

• 改用索引0/1代替选项值名称进行选择
• 给请求设置{failOnStatusCode: false}
• 尝试过第三方教程里的Cookie保留方案
• 无法使用已弃用的Cypress.Cookies.preserveOnce

附上测试代码：

it('verifies there are only orders, drafts and/or return orders on all orders grid', () => {
  ordersPage.ordersSelector().trigger('click')
  cy.get('select').select('orders').should('have.value', 'orders');
  cy.url().should('include', 'orders');
  
  const orderNumberPrefix = ['DRAFT-', 'SO0', 'S0-', 'R0']
  cy.get('.ag-center-cols-container div[row-index]')
    .each($row =>{
      const $col = $row.find('[col-id="orderNumber"]')
      const orderNumber = $col.text().trim()
      const correctOrderNumberPrefix = orderNumberPrefix.some(prefix => {
        return orderNumber.startsWith(prefix)
      })
      expect(correctOrderNumberPrefix).to.be.true;
    });
})

it('verifies there are only orders on items grid', () => {
  ordersPage.ordersSelector()
  cy.get('select').select('items').should('have.value', 'items'); // 这里触发401
  cy.url().should('include', 'items');
  
  const orderNumberPrefix = ['SO0']
  cy.get('.ag-center-cols-container div[row-index]')
    .each($row =>{
      const $col = $row.find('[col-id="orderNumber"]')
      const orderNumber = $col.text().trim()
      const correctOrderNumberPrefix = orderNumberPrefix.some(prefix => {
        return orderNumber.startsWith(prefix)
      })
      expect(correctOrderNumberPrefix).to.be.true;
    });
})

可能的解决方向 #

1. 检查请求的身份凭证是否有效

401本质是身份认证失败，先确认切换选项时的API请求是否携带了正确的令牌。可以用Cypress拦截请求查看请求头：

cy.intercept('GET', '/api/items').as('getItems'); // 替换成实际的Items接口路径
cy.get('select').select('items');
cy.wait('@getItems').then(interception => {
  console.log('请求头:', interception.request.headers); // 检查Authorization或身份Cookie是否存在
});

2. 全局保留身份Cookie

弃用preserveOnce后，改用全局Cookie配置保留必要的身份凭证。在cypress/support/e2e.js中添加：

Cypress.Cookies.defaults({
  preserve: ['your-auth-cookie-name', 'session-id'] // 替换成系统实际使用的身份Cookie名称
});

3. 切换前确保身份状态有效

如果测试过程中令牌过期，切换前重新执行登录或刷新令牌：

it('verifies there are only orders on items grid', () => {
  cy.reLogin(); // 假设你有封装好的重新登录/刷新令牌的命令
  ordersPage.ordersSelector()
  cy.get('select').select('items').should('have.value', 'items');
  // ...后续逻辑
});

4. 等待元素就绪再操作

可能页面未完全加载就触发选择操作，导致凭证未就绪。添加状态校验：

cy.get('select').should('be.visible').should('be.enabled').select('items');

5. 调整Cypress配置避免重定向干扰

401后自动跳转到登录页会中断测试，可在cypress.config.js中调整：

module.exports = {
  e2e: {
    baseUrl: '你的项目基础URL',
    chromeWebSecurity: false,
    modifyObstructiveCode: false,
  },
};

内容的提问来源于stack exchange，提问作者Ziya I. Erogul