Dynamic Dropdown verification with Cypress

There are numerous types of dropdowns on the webpage. The types of dropdowns are static and dynamic. While the static dropdowns have with the <select> tag, the dynamic dropdowns generally have the <input> or <ul> tags.

The static dropdowns having the <select> tag is handled in Cypress with the help of the in built command called the select(). The dynamic dropdowns are mostly the auto suggestive dropdown where on typing the first few letters of our search, a list of suggested items get displayed.

The logic is to type a few characters inside the dynamic dropdown. Based on that a list of suggestions will be displayed. We shall iterate through that list. Once we encounter our desired option, we will perform the click() operation on it.

Example

Code Implementation with Dynamic dropdown.

// test suite
describe('Tutorialspoint Test', function () {
   // test case
   it('Test Case1', function (){
      // test step to launch a URL
      cy.visit("https://www.tutorialspoint.com/videotutorials/index.php");
      // enter test in the dynamic dropdown
      cy.get("#search-strings").type("Java");
      // wait for some time
      cy.wait(3000);
      // assertion to validate the number of search results
      cy.get('.clsHeadQuestion'). should('have.length',19);
      // iterate through the suggested options
      cy.get('.clsHeadQuestion').each(($el, index, $list) => {
         // condition matching check
         if($el.text() ==="Java"){
            // click() on that option for selection
            $el.click();
         }
      })
      // assertion to check if correct option is selected
      cy.get("#search-strings").should("have.value","Java");
   });
});