Web site:
Introducción al curso
¿Qué es Cypress?
Conociendo Cypress
Cypress vs. Selenium
Preparando nuestro ambiente y entendiendo la estructura de Cypress
Crea tu primer prueba
Nuestra primer prueba
Navegación
Elementos y localizadores
Tipos de localizadores
Encontrando elementos
Guardando elementos
Creando una Prueba
Aserciones
Hooks
Debuggear con Cypress
Esperar por elementos
Tipos de espera
Ejecución de Cypress
Modos de ejecución en Cypress
Interactuando con elementos
Click
Trabajando con inputs
Trabajando con checkboxes y radio botones
Extrayendo informacion y haciendo validaciones
Trabajando con listas y dropdowns
Trabajando con tablas
Trabajando con date pickers
Trabajando con popups y tooltips
Trabajando con elementos de drag and drop
Próximos pasos
¿Quieres más cursos de Cypress?
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Trabajando con listas y dropdowns
18/23Recursos
Aportes 9
Preguntas 0
Ordenar por:
Una manera más sencilla utilizando la función de Cypress contains , simplemente le decimos el elemento que contenga el texto que queremos y le damos click.
it.only("Interacting with the dropdown elements", function () {
cy.visit("https://react-select.com/home");
cy.get("#react-select-6-input").type(" ");
cy.get("#react-select-6-listbox")
.children()
.children()
.contains("Red")
.click();
});
Comparto los Links:
La razon por la que “no funcionaba” la opcion 5 es que la pagina ya aparece con algunas opciones marcadas y al ser seleccionadas estas dejan de ser opciones, precisamente por ser un select dinamico.
Si intentan con la opcion 8:
- "#react-select-option-8"
si va a encontrar y clickear en este caso a “slate”.
Para el caso del click(), probé con la opción del wrap y me funcionó:
it('Interacting with dynamic selectors', () => {
cy.visit('https://react-select.com/home')
cy.get('#react-select-6-input').type(' ')
cy.get('#react-select-6-listbox')
.children()
.children()
.each(($element, index, $list)=>{
if($element.text() === 'Red'){
cy.log('I am in the if');
//$element.on('click',)
cy.wrap($element).click()
//$element.click()
}
})
})
})
¡Rock n’ Roll! 🤟
La pagina no esta funcionando actualmente, pueden utilizar esta
<https://qa-practice.netlify.app>
Caso alterno, si solo queremos enviar el dato y seleccionar.
it.only('Select Dynamic', function () {
cy.once('uncaught:exception', () => false)
cy.visit('https://react-select.com/home')
cy.get('#react-select-4-input').click().clear().clear()
cy.get('#react-select-4-input').type('Orange{enter}')
})
})
Para buscar un texto en la terminal pueden utilizar Ctrl+F
Los dropdowns siempre dan problemas 😅
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?