如何将Cypress登录测试场景改造为可在beforeEach调用的函数？

把重复的登录逻辑封装成可复用函数，再通过beforeEach钩子自动执行，能大幅减少代码冗余，让你的测试用例更简洁、可维护。下面是具体的实现方式：

方法一：在测试文件内封装函数 #

如果你的登录逻辑只在当前测试文件中复用，可以直接在文件里定义一个登录函数，然后在beforeEach中调用：

// 封装登录函数
const loginToRiskApp = () => {
  const typedText = 'email@address.com'
  cy.visit('https://bvt-riskassessment.lmkcloud.net')
  cy.get('button').click()
  cy.get('a.auth0-lock-alternative-link').click() // 补全你未写完的操作，比如点击替代登录链接
  // 这里可以继续添加后续的登录步骤，比如输入密码、提交表单等
  // cy.get('#password-input').type('your-secure-password')
  // cy.get('button[type="submit"]').click()
}

describe('My Risk App Tests', function (){
  // 每个测试用例执行前自动完成登录
  beforeEach(function (){
    loginToRiskApp()
  })

  it('Verifies post-login page elements', function (){
    // 这里写登录后的测试逻辑，比如验证核心元素可见性
    cy.get('.dashboard-header').should('be.visible')
  })

  it('Performs a core action after login', function (){
    // 第二个需要登录权限的测试用例
    cy.get('#create-assessment-btn').click()
    cy.get('.assessment-form').should('exist')
  })
})

方法二：全局封装为自定义命令（推荐跨文件复用） #

如果你的多个测试文件都需要用到登录逻辑，可以把它封装成Cypress自定义命令，这样所有测试文件都能直接调用：

1. 在cypress/support/commands.js中添加自定义命令：

Cypress.Commands.add('loginToRiskApp', () => {
  const typedText = 'email@address.com'
  cy.visit('https://bvt-riskassessment.lmkcloud.net')
  cy.get('button').click()
  cy.get('a.auth0-lock-alternative-link').click()
  // 补充完整的登录流程
})

2. 在任意测试文件中直接使用：

describe('My Risk App Tests', function (){
  beforeEach(function (){
    cy.loginToRiskApp() // 直接调用全局自定义命令
  })

  it('Tests a feature requiring authentication', function (){
    // 测试逻辑
  })
})

额外优化提示 #

• 为了提升测试稳定性，建议给元素添加更精准的选择器（比如自定义data-testid属性），避免依赖通用标签选择器（如button）导致测试失效。
• 可以把登录凭证（邮箱、密码）存入Cypress环境变量，比如在cypress.env.json中配置，然后用Cypress.env('loginEmail')读取，避免硬编码敏感信息。

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