Estoy escribiendo una prueba de aserciones de interfaz de usuario con ciprés y veo muchos encadenamientos repetidos. ¿Hay alguna manera de abstraer esto en un método auxiliar para facilitar el mantenimiento (y menos duplicación de código)?
código de ejemplo:
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')
})
Tenga en cuenta que estoy usando modelos de página, por lo que DivisionPage.divisionNameColumnHeader() es igual a algo como esto: cy.get('[data-cy="division-name-column-header"]')
Una función o método es factible, pero un comando personalizado es mejor ya que su código repetido son aserciones de Cypress.
Una ventaja es que estos comandos son globales para todas las pruebas, si los define en /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()
O seleccione todos los elementos a la vez e itere la colección
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')
})
})