Como marcar vários checkboxes de uma só vez com Cypress

Aprenda como remover duplicações na chamada do comando .check() quando você quer marcar todos os checkboxes de uma seção da aplicação

Eu não sei você, mas eu não gosto muito de duplicação de código. Portanto, hoje vou te mostrar uma técnica para eliminar um pouco de duplicação quando lidando com checkboxes usando o framework Cypress.

Para exemplificar, irei utilizar uma aplicação exemplo criada só com arquivos estáticos (HTML, CSS e uma imagem de background).

Nesta aplicação, conforme demonstrado abaixo, existe uma seção com o label Selecione as tecnologias que utiliza:

Visto que todos os checkboxes estão contidos em uma div com o id check, posso marcar todos com um único comando da seguinte forma:

// cypress/integration/checkboxes.spec.js

describe('Checkboxes', () => {
  beforeEach(() => {
    cy.visit('https://bit.ly/3vswFBe')
  })

  it('checks all checkboxes with one command', () => {
    cy.get('#check input[type="checkbox"]')
      .as('checkboxes')
      .check()

    cy.get('@checkboxes')
      .each(checkbox => {
        expect(checkbox[0].checked).to.equal(true)
      })
  })
})

E visto que o comando .check() encadeado ao cy.get() marca mais de um checkbox se o seletor utilizado não for específico para um único elemento, todos os checkboxes são marcados.

Com isso, posso fazer um novo cy.get(), dessa vez passando como argumento o alias (`@checkboxes`) criado anteriormente para todos os inputs do tipo checkbox contidos na div com o id check (sem duplicar o seletor), para verificar que realmente todos estão marcados.

Fácil né?

Veja o resultado após a execução dos testes.

Para mais detalhes sobre a funcionalidade .check(), recomendo ler a documentação oficial do Cypress.

E aí, gostou dessa “pitada de Cypress“?

Deixa um comentário.

Ficou curioso e quer aprender mais sobre automação de testes com Cypress? Conheça meus cursos na Escola Talking About Testing e no Udemy.

Este conteúdo foi traduzido para inglês e pode ser encontrado no DEV Community.

👋  Até a próxima e bons testes!