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");    }); });