javascript - 链接可以在 Cypress 中抽象出来吗？

Question

我正在用 cypress 编写一个 UI 断言测试，我看到了很多重复的链接。有没有一种方法可以将其抽象为辅助方法，以便于维护(并减少代码重复)？

示例代码:

it('displays the table column headers', () => {
      DivisionPage.divisionNameColumnHeader()
        .should('be.visible')
        .and('have.css', 'text-transform', 'capitalize')
        .and('have.css', 'color', 'rgb(35, 40, 43)')
        .and('have.css', 'background-color', 'rgb(195, 202, 206)')
        .and('have.css', 'cursor', 'pointer')
        .and('have.css', 'font-family', '"Open Sans"')
        .and('have.css', 'position', 'sticky')
      DivisionPage.teamsColumnHeader()
        .should('be.visible')
        .and('have.css', 'text-transform', 'capitalize')
        .and('have.css', 'color', 'rgb(35, 40, 43)')
        .and('have.css', 'background-color', 'rgb(212, 217, 220)')
        .and('have.css', 'cursor', 'pointer')
        .and('have.css', 'font-family', '"Open Sans"')
        .and('have.css', 'position', 'sticky')
      DivisionPage.playersColumnHeader()
        .should('be.visible')
        .and('have.css', 'text-transform', 'capitalize')
        .and('have.css', 'color', 'rgb(35, 40, 43)')
        .and('have.css', 'background-color', 'rgb(212, 217, 220)')
        .and('have.css', 'cursor', 'pointer')
        .and('have.css', 'font-family', '"Open Sans"')
        .and('have.css', 'position', 'sticky')
})

请注意，我使用的是页面模型，因此 DivisionPage.divisionNameColumnHeader() 等于如下所示:cy.get('[data-cy="division-name-column -header"]')

Answer 1

一个函数或方法是可行的，但是一个Custom Command更好，因为您的重复代码是 Cypress 断言。

如果您在 /support/commands.js 中定义这些命令，那么这些命令对于所有测试都是全局的。

Cypress.Commands.add('isStickyVisibleAndCapitalizedInCorporateColors',
  {prevSubject:true},
  (subject) => {
    cy.wrap(subject)
      .should('be.visible')
      .and('have.css', 'text-transform', 'capitalize')
      .and('have.css', 'color', 'rgb(35, 40, 43)')
      .and('have.css', 'background-color', 'rgb(212, 217, 220)')
      .and('have.css', 'cursor', 'pointer')
      .and('have.css', 'font-family', 'Open Sans')
      .and('have.css', 'position', 'sticky')
})

// Used like a composite assertion
DivisionPage.divisionNameColumnHeader().isStickyVisibleAndCapitalizedInCorporateColors()

或者一次选择所有元素并迭代集合

it('displays the table column headers', () => {

  cy.get('[data-cy="division-name-column-header"], [data-cy="division-teams-column-header"], [data-cy="division-players-column-header"]')
    .each($el => {
      cy.wrap($el)
        .should('be.visible')
        .and('have.css', 'text-transform', 'capitalize')
        .and('have.css', 'color', 'rgb(35, 40, 43)')
        .and('have.css', 'background-color', 'rgb(195, 202, 206)')
        .and('have.css', 'cursor', 'pointer')
        .and('have.css', 'font-family', '"Open Sans"')
        .and('have.css', 'position', 'sticky')
    })
})