Trabajando con checkboxes y radio botones

Curso de Automatización de Pruebas UI con Cypress

Introducción al curso

Automatización de Pruebas UI con Cypress

Conociendo Cypress

Pruebas Automatizadas con Cypress: Ventajas y Desventajas

Automatización de Pruebas con Cypress: Instalación y Configuración

Crea tu primer prueba

Estructuración y Configuración de Pruebas en Cypress

Navegación y recarga de páginas con Cypress

Elementos y localizadores

Uso de Cypress para Localizar Elementos en Formularios Web

Búsqueda y Selección de Elementos en Cypress con Contains y Find

Uso de Cypress: Guardar e Interactuar con Elementos DOM

Creando una Prueba

Aserciones en Cypress: TDD, BDD y Chai para Pruebas Efectivas

Optimización de pruebas con hooks en desarrollo web

Debugging en Cypress: Herramientas y Técnicas Esenciales

Esperar por elementos

Esperas y Timeouts en Cypress: Uso Eficiente y Práctico

Ejecución de Cypress

Modos de Ejecución de Pruebas con Cypress

Interactuando con elementos

Uso de Cypress: Click y Eventos en Pruebas Automatizadas

Manejo de Inputs de Texto en Cypress: Escribir y Limpiar Eficazmente

Interacción con Radiobotones y Checkboxes en Cypress

Extracción y manejo de datos en pruebas con Cypress

Interacción con Selects y Dropdowns Dinámicos en Formularios

Interacción y validación de tablas HTML con Cypress

Manejo e Interacción con Date Pickers en Formularios

Interacción con Pop-ups, Modales y Tooltips en Cypress

Simulación de Drag and Drop con Eventos del Mouse

Próximos pasos

Automatización de Pruebas Web con Cypress: Proyecto Final

No tienes acceso a esta clase

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

Si ya tienes una cuenta,

Recursos

¿Cómo interactuar con radiobotones y checkboxes de manera eficiente?

Entender cómo interactuar con radiobotones y checkboxes es fundamental para cualquier tester o desarrollador. Estos elementos son comunes en formularios y su correcta manipulación asegura que las pruebas reflejen el comportamiento real de un usuario. Exploremos las prácticas más efectivas para trabajar con estos elementos utilizando Cypress, evitando errores comunes y sacando el máximo provecho de las herramientas disponibles.

¿Qué es lo primero que debo saber sobre radiobotones y sus identificadores?

Para comenzar a trabajar con radiobotones, lo primero es identificar correctamente el elemento tanto en el HTML como en la interfaz de tu aplicación. Es importante saber que, a veces, los identificadores proporcionados automáticamente por Cypress pueden no ser la mejor opción. En esos casos, es útil inspeccionar manualmente el código para obtener el ID correcto. Por lo general, cada radiobotón está acompañado de un label y un input, siendo el ID del input el que aprovecharemos.

cy.get('#genderRadio1').click();

¿Cómo manejar situaciones donde un elemento está cubierto por un label?

A menudo, nos encontramos con situaciones en las que un radiobotón está cubierto por un label, lo que impide la interacción directa. Existen varias maneras de solucionar esto. Una de las más simples es usar .click({ force: true }). Sin embargo, este método no recrea el comportamiento de un usuario real y puede no ser la mejor práctica.

cy.get('#genderRadio1').click({ force: true });

La recomendación para manejar estas situaciones es seleccionar el label asociado al radiobotón y hacer clic en este, ya que esto refleja mejor la interacción de un usuario en un entorno real.

cy.get('label[for="genderRadio1"]').click();

¿Cómo trabajar con checkboxes y su diversidad de estados?

Los checkboxes son otro de los elementos habituales en formularios y su comportamiento es ligeramente diferente al de los radiobotones. Los checkboxes permiten tanto marcar como desmarcar, acciones que se pueden manejar con los comandos check y uncheck sin necesidad de forzar la acción, salvo que estén cubiertos.

Existen dos enfoques para interactuar con checkboxes:

Usar el método check/uncheck:

cy.get('#hobbiesCheckbox1').check({ force: true });
cy.get('#hobbiesCheckbox1').uncheck({ force: true });

Usar el label del checkbox:

Al igual que con los radiobotones, seleccionar el label que acompaña a un checkbox es otra manera eficiente de interactuar con él, siendo una práctica preferida para emular el comportamiento del usuario.

cy.get('label[for="hobbiesCheckbox1"]').dblclick();

Recomendaciones finales para testers

Siempre que sea posible, intenta recrear en tus pruebas el comportamiento natural de un usuario. Esto no solo asegura que las pruebas sean más realistas, sino que también ayuda a prevenir falsos positivos. Aunque el uso de force: true es una herramienta poderosa, debe ser utilizada con mesura. En lugar de eso, considera seleccionar labels o ajustar el HTML si eres responsable de su desarrollo. Esta práctica mejorará la mantenibilidad y confiabilidad de tus pruebas a largo plazo.

Con estas estrategias y opciones, puedes mejorar notablemente la forma en que tus pruebas automáticas interactúan con los radiobotones y checkboxes. ¡Sigue aprendiendo y practicando para dominar estas herramientas!

Aportes 2

Preguntas 2

Ordenar por:

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

Emmanuel Rodríguez

hace 3 años

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'])

Jahel Chacón Jiménez

hace 2 años

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