No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Trabajando con checkboxes y radio botones

16/23
Recursos

Aportes 2

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Checkbox y Radio Button

📚 Documentación
.
Como bien se mencionó en la sesión, tenemos la siguiente estructura:

<div class="checkbox">
   <label>
      <input type="checkbox" value="checkbox1">
         A Simple Checkbox
   </label>
</div>

Generalmente la anatomía nos permite relacionar un elemento label junto con su correspondiente input. Por ello, es posible que seleccionemos un elemento de tipo checkbox [type="checkbox"], mediante su jerarquía o selectores de clase.

// Check all matching or radio button elements.
cy.get('.action-checkboxes [type="checkbox"]')
  .check().should('be.checked')

La regla de sintaxis nos comenta que:

.check()
.check(value)
.check(values)
.check(options)
.check(value, options)
.check(values, options)

Por lo que al solicitar check(value) estamos marcando aquellos elementos con un cierto valor, por ejemplo:

<form>
  <input type="checkbox" id="subscribe" value="subscribe" />
  <label for="subscribe">Subscribe to newsletter?</label>
  <input type="checkbox" id="acceptTerms" value="accept" />
  <label for="acceptTerms">Accept terms and conditions.</label>
  <input type="checkbox" id="rejectTerms" value="reject" />
  <label for="rejectTerms">Reject terms and conditions.</label>
</form>

Donde para marcar el check con valor accept y subscribe, declaramos:

cy.get('form input').check(['subscribe', 'accept'])

Hola! La manera más sencilla que encontré para hacerlo es obtener el ‘label’ en el get() y luego obtener el nombre que tiene de valor con un contains()
Así:

// Encuentra el radio button y le hace click
cy.get('label').contains('Male').click()

// Encuentra el Checkbox y lo selecciona 
cy.get('label').contains('Sports').click()

Es una manera rápida y sencilla, aparte de correcta para buscar y seleccionar, funciona para Checkboxes y radio buttons