cypress - 编写快捷方式测试 Cypress 测试

Question

我正在尝试为此测试编写简短的测试柏树，如何编写它的最佳方法？

describe('test', () => {
    it('test 1', () => {
        cy.get('[data-cy=edit]').first().click()
        cy.get('[data-cy=t-input]').clear().type('123123123123123')
        cy.get('[data-cy=s-button]').click()
        cy.get('[data-cy=popup]').should('be.visible')
      })
    
      it('test2', () => {
        cy.get('[data-cy=edit]').first().click()
        cy.get('[data-cy=t-input]').clear().type('1231231231231216')
        cy.get('[data-cy=s-button]').click()
        cy.get('[data-cy=c-div]').find('div')
          .should('have.class', 'error')
          .and('exist')
      })
})

标签： cypress

Answer 1

您可以创建自定义命令并在那里编写重复的行。从您的测试中，我可以看到这三行重复，您可以在自定义命令下添加这些：

cy.get('[data-cy=edit]').first().click()
cy.get('[data-cy=t-input]').clear().type('123123123123123')
cy.get('[data-cy=s-button]').click()

去cypress/support/commands.js写：

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

在你的测试中，你可以写：

cy.addCardDetails('123123123123123')

所以现在你的测试看起来像：

describe('test', () => {
    it('test 1', () => {
        cy.addCardDetails('123123123123123')
        cy.get('[data-cy=popup]').should('be.visible')
    })
  
    it('test2', () => {
        cy.addCardDetails('1231231231231216')
        cy.get('[data-cy=c-div]').find('div').should('have.class', 'error').and('exist')
    })
})