编写快捷方式测试 Cypress 测试答案

【问题标题】：Write short way test Cypress test编写快捷方式测试 Cypress 测试
【发布时间】：2021-08-03 18:16:41
【问题描述】：

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

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

【解决方案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')
    })
})

【讨论】：

【解决方案2】：

如果您只需要在单个 JS 文件中使用此逻辑，则创建一个简单的 JavaScript 函数来提取通用逻辑会更容易。

所以你的测试看起来像：

    describe('test', () => {

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

赛普拉斯文档recommends 尽可能使用函数而不是自定义命令。

【讨论】：