0
315
VistasCypress: prueba de que existe una alerta específica del navegador al enviar una entrada no válida
Estoy tratando de probar que la entrada no válida advierte al usuario. El "tipo" html de esa entrada es "correo electrónico", por lo que el navegador muestra esta burbuja en lugar de un elemento que exponemos en el sitio.
Esta burbuja en cuestión, por lo que puedo decir, es específica del navegador y, por lo que puedo decir, no aparece en el DOM. Además, no puedo usar la herramienta de cursor "seleccionar un elemento" en él, ignora esa burbuja como si no estuviera allí. Si ayuda, es un evento específico del navegador activado por el formulario de entrada.
¿Hay alguna manera de confirmar que esta alerta existe usando aserciones de Cypress?
3 Respuestas
Responde la pregunta0
Para el registro, encontré un gran ejemplo aquí
Ejemplos de Cypress (v9.4.1) - Validación de formularios
<form id="form-validation" action="/action_page.php"> <div> <label for="item">Item:</label> <input id="item" type="text" name="item" required /> </div> cy.get('#item:invalid') .invoke('prop', 'validationMessage') .should('equal', 'Please fill out this field.')0
Bien, encontré una solución viable. Si alguien tiene una solución mejor, no dude en publicarla.
Como el texto de la burbuja de alerta de validación de formulario HTML es específico del navegador, probablemente no sea una buena idea probar contenido específico dentro de la burbuja. En su lugar, podemos probar que el formulario activó un evento no válido y le dio al formulario de input la :invalid , y que el navegador bloqueó el envío del formulario.
Estas dos cosas suceden independientemente del navegador. La forma más fácil de detectar este comportamiento en el DOM es pasar de seleccionar input a afirmar que input:invalid existe y que no se inició sesión.
0
Como se menciona en los documentos de Cypress, puede hacer la validación de esta manera:
cy.get('username-selector').then(($input) => { expect($input[0].validationMessage).to.include( `Please include an '@' in your email address.` ) })