CODEWITHSUNDEEP
javascripthtmlautomationcypress
alexandru15059715
alexandru15059715

Reputation: 9

Click on element from a dropdown menu in cypress only if checked

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

Upvotes: 0

Views: 1486

Answers (1)

Fody
Fody

Reputation: 31944

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()

    }
  });

Upvotes: 2

Related Questions