Cypress.io 零基础实现页面登出自动化测试的方法

你拿到的登出元素是Angular框架渲染的a标签，其中带随机哈希的属性（比如_ngcontent-jee-c99）、动态生成的类名（比如ng-tns-c99-0、ng-star-inserted）都不要当选择器用，这类值会随着代码编译、版本更新变化，用例稳定性极差。这个元素上固定的logout类是最稳定的选择依据。

核心登出操作逻辑 #

你可以直接在已有的登录测试代码后追加登出逻辑，点击前先校验元素可见，避免页面未加载完成导致点击失败：

// 定位登出按钮，确认可见后点击
cy.get('a.logout')
  .should('be.visible')
  .click()

完整测试用例参考 #

只写点击操作不算完成测试，必须追加登出成功的断言，验证登录态确实被清除。推荐把重复的登录逻辑放到beforeEach钩子中复用，完整代码如下：

describe('登出功能校验', () => {
  beforeEach(() => {
    // 替换为你的测试页面访问地址
    cy.visit('/')
    // 复用你已经写好的登录流程
    cy.get('input').click()
    cy.get('input[type="email"]')
      .should('be.visible')
      .type('test@test.com')
    cy.get('button[type="submit"]').click()
    cy.get('input[type="password"]')
      .should('be.visible')
      .type('password')
    cy.get('button[type="submit"]').click()
    // 登录完成后先确认登出按钮已加载，避免后续操作找不到元素
    cy.get('a.logout').should('be.visible')
  })

  it('点击登出按钮后成功退回未登录状态', () => {
    // 执行登出操作
    cy.get('a.logout').click()

    // 以下断言根据你的实际业务选1-2个即可，不需要全写
    // 1. 登出按钮消失
    cy.get('a.logout').should('not.exist')
    // 2. 登录表单重新显示
    cy.get('input[type="email"]').should('be.visible')
    // 3. 页面跳转到登录页，替换为你实际的登录页路由
    // cy.url().should('include', '/login')
    // 4. 本地存储的登录token被清除
    // cy.window().its('localStorage.token').should('not.exist')
  })
})

新手注意事项 #

• 不要用Angular生成的动态属性、动态类作为选择器，这类值不固定，会导致用例随机失败
• 所有交互操作前都建议加be.visible断言，Cypress会自带重试机制等待元素就绪，大幅降低用例的不稳定性
• 所有操作后必须加结果断言，不要只执行操作不校验结果，否则无法发现功能异常

内容的提问来源于stack exchange，提问作者Maciej Szymański