I have the following html code with several elements in a dropdown menu. I only want to click on an item if it is selected (has the class selected) or, as you can see HERE in printscreen, it has that check mark in front of the name. How can I do this with IF in cypress?
I tried something like this but it didn't work:
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();
}
});
And calling from test like 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>
I hope I have provided all the essential details
The check-mark class you seek is on a descendent of $button, so use .find('.check-mark') in your if() condition.
Unlike .contains() which can search for text in all descendants, .hasClass() only looks at the current element.
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()
}
});