如何解决Cypress测试中切换视图时自动登出的问题

问题描述 #

我正在用Cypress测试应用中的融资流程表单，该表单分为3个视图。测试执行到点击cy.getByDataCy('button-personal-data-next').click()后会自动登出，导致后续cy.getByDataCy('form-contact-data').should('be.visible')步骤失败，但实际应用中不会出现该问题。

测试代码如下：

describe('finance process logged', () => {
    beforeEach(() => {
      cy.setCookie('token', 'Bearer ' + token)
      cy.intercept('GET', '**/me', { fixture: 'me.json' }).as('getUser')
      cy.intercept('PUT', '**/me', { fixture: 'me.json' }).as('putMe')
      cy.intercept('PATCH', '**/me/gdpr_consents', gdpr_consents).as('patchGDPR')
      cy.intercept('GET', '**/api/v1/payment_methods', {
        fixture: 'purchase-payment-methods.json',
      }).as('getPaymentMethods')
      cy.route({
        method: 'POST',
        url: '**/api/v1/orders',
        status: 200,
        response: {
          uid: '12345',
          status: 'init',
        },
      }).as('newOrder')
      cy.route('GET', '**/api/v1/orders/12345', 'fixture:purchase-order.json').as('getOrder')
      cy.intercept('POST', '**/api/v1/orders/248062de9f2c39e6/payments', 'fixture:financing-payment.json').as('getPayments')
      
    })
    it('finance process ok', () => {
      cy.intercept('POST', '**/api/v1/orders/ca3f258f588ef610/payments', {
        fixture: 'finance-payments-response.json',
      }).as('postPayments')
      cy.intercept('POST', '**/api/v1/transaction_financings/a60ceba307f0dcde/prescorings', {
        fixture: 'finance-update-transaction-response.json',
      }).as('postPrescoring')
      cy.intercept('POST', '**/api/v1/transaction_financings/a60ceba307f0dcde/details', {
        fixture: 'purchase-customer-details.json',
      }).as('postDetails')
      cy.visit('/sportage/sportage-2020-1-6-crdi-isg-6mt-mhev-urban/4c51ed/payment-choose', Cypress.config('VISIT_OPTIONS'))
      cy.getByDataCy('purchase-page').should('be.visible')
      cy.getByDataCy('request-finance').click()
      cy.getByDataCy('financing-page').should('be.visible')
      cy.getByDataCy('start-financing-button').should('be.visible').click()
      cy.getByDataCy('personal-finance-data').should('be.visible')
      cy.getByDataCy('email-input').should('be.visible').should('have.attr', 'disabled')
      fillPersonalData()
      cy.getByDataCy('data-authorization-check').check()
      cy.getByDataCy('button-personal-data-next').click()
      cy.getByDataCy('form-contact-data').should('be.visible')
      fillContactData()
      cy.getByDataCy('button-contact-data-next').click()
      cy.getByDataCy('form-employment-data').should('be.visible')
      fillEmploymentData()
      cy.getByDataCy('button-next-financing').click()
      cy.wait('@postPrescoring')
      cy.wait('@customerOrder')
      cy.wait('@getTariff')
      cy.getByDataCy('finance-requested-page').should('be.visible')
    })
})

解决步骤 #

1. 覆盖所有认证相关接口的拦截 #

点击下一步后，应用可能会发起新的用户认证请求（比如再次调用/me接口），若拦截规则未匹配到实际请求路径，会触发真实请求返回未授权，导致登出：

• 确认cy.intercept('GET', '**/me', { fixture: 'me.json' }).as('getUser')的路径匹配规则是否完整，无前缀/后缀遗漏。
• 在点击下一步后添加cy.wait('@getUser')，验证该请求是否被正确拦截，避免真实请求返回401。

2. 确保认证Cookie全程有效 #

Cypress默认保留Cookie，但页面跳转或特殊请求可能导致Cookie丢失：

• 在beforeEach中添加Cypress.Cookies.preserveOnce('token')，确保tokenCookie在测试用例执行过程中不被清除。
• 点击下一步后，用cy.getCookie('token').should('have.property', 'value', 'Bearer ' + token)验证Cookie的存在性与正确性。

3. 拦截表单提交后的所有相关接口 #

点击下一步后，应用提交表单数据的接口若返回未授权，会触发登出逻辑：

• 检查是否有未被拦截的/transaction_financings/**或其他相关接口，确保它们返回200/201等成功状态。
• 添加临时拦截打印所有请求：cy.intercept('**', (req) => { console.log('Request URL:', req.url) })，排查是否有未处理的认证相关请求返回错误。

4. 验证fixture数据合法性 #

如果me.json等fixture中的用户数据不符合应用认证要求（如过期token、无效用户ID），会导致应用判定用户未登录：

• 检查me.json是否包含应用所需的全部字段（如id、email、authorized状态等），确保数据与实际登录状态一致。

5. 临时禁用自动登出逻辑（极端场景） #

若以上方法均无效，可临时禁用应用的自动登出逻辑：

• 清除应用中的登出定时器：cy.window().then((win) => { if (win.logoutTimer) win.clearInterval(win.logoutTimer) })。
• Stub掉登出方法：cy.window().then((win) => { cy.stub(win.authService, 'logout').callsFake(() => {}) })，阻止登出操作执行。

内容的提问来源于stack exchange，提问作者Danilo.Micucci