如何编写简洁的Cypress测试用例？现有重复逻辑用例求最优写法

Cypress测试用例精简方案 #

针对你代码里重复的编辑、输入、提交逻辑，有两种常用的精简方案，改动成本都很低：

方案1：单文件内提取公共逻辑（适合仅当前测试文件复用） #

把重复的前置操作放到beforeEach生命周期钩子，把相同的输入提交逻辑封装成工具函数，调整后代码如下：

describe('编辑功能测试', () => {
  // 所有用例执行前都会先触发该逻辑
  beforeEach(() => {
    cy.get('[data-cy=edit]').first().click()
  })

  // 封装重复的输入+提交操作
  const submitEditContent = (content) => {
    cy.get('[data-cy=t-input]').clear().type(content)
    cy.get('[data-cy=s-button]').click()
  }

  it('合法输入提交后弹出成功弹窗', () => {
    submitEditContent('123123123123123')
    cy.get('[data-cy=popup]').should('be.visible')
  })

  it('非法输入提交后显示错误提示', () => {
    submitEditContent('1231231231231216')
    cy.get('[data-cy=c-div]').find('div')
      .should('have.class', 'error')
      .and('exist')
  })
})

方案2：封装全局自定义命令（适合多测试文件复用该逻辑） #

如果其他测试文件也需要用到编辑提交的操作，可以把逻辑封装为Cypress全局命令：

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

Cypress.Commands.add('submitEditForm', (inputContent) => {
  cy.get('[data-cy=edit]').first().click()
  cy.get('[data-cy=t-input]').clear().type(inputContent)
  cy.get('[data-cy=s-button]').click()
})

2. 测试文件中直接调用全局命令即可：

describe('编辑功能测试', () => {
  it('合法输入提交后弹出成功弹窗', () => {
    cy.submitEditForm('123123123123123')
    cy.get('[data-cy=popup]').should('be.visible')
  })

  it('非法输入提交后显示错误提示', () => {
    cy.submitEditForm('1231231231231216')
    cy.get('[data-cy=c-div]').find('div')
      .should('have.class', 'error')
      .and('exist')
  })
})

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