Tengo el siguiente código html con varios elementos en un menú desplegable. Solo quiero hacer clic en un elemento si está seleccionado (tiene la clase seleccionada) o, como puede ver AQUÍ en la pantalla de impresión, tiene esa marca de verificación delante del nombre. ¿Cómo puedo hacer esto con IF en ciprés?
Intenté algo como esto pero no funcionó:
clickOnDropdown(name: string){ cy.get('#SelectedPractitionersIds').parent().click(); // #SelectedPractitionersIds is the id for dropdown cy.get('.selected').contains(name).then(($button) => { // ".selected" it is a class which appears only when the item is checked and selected if ($button.hasClass('check-mark')) { cy.get('.selected').contains(name).parent().click(); } }); Y llamando desde la prueba como clickOnDropdown('PPNCFPCCPE PPNCFPCCPE')
<div class="dropdown-menu open" style="max-height: 205.2px; overflow: hidden; min-height: 0px;"> <ul class="dropdown-menu inner selectpicker" role="menu" style="max-height: 193.2px; overflow-y: auto;"> <li rel="0" class=""><a tabindex="0" class="" style=""><span class="text"> PPNCFPCCPE PPNCFPCCPE</span><i class="glyphicon glyphicon-ok icon-ok check-mark"></i></a></li> <li rel="1" class="selected"><a tabindex="0" class="" style=""><span class="text">alex pract2</span><i class="glyphicon glyphicon-ok icon-ok check-mark"></i></a></li> <li rel="2" class="selected"><a tabindex="0" class="" style=""><span class="text">ppncfpccpe2 ppncfpccpe2</span><i class="glyphicon glyphicon-ok icon-ok check-mark"></i></a></li> </ul> </div>Espero haber proporcionado todos los detalles esenciales.
La clase check-mark que busca está en un descendiente de $button, así que use .find('.check-mark') en su condición if() .
A diferencia .contains() que puede buscar texto en todos los descendientes, .hasClass() solo mira el elemento actual.
const name = "alex pract2"; cy.get(".selected") .contains(name) .then(($button) => { if ($button.find('.check-mark').length) { cy.get(".selected").contains(name).parent().click(); //or just $button.click() } });