A common operation during Web UI tests is to view and validate contents of a drop down.
As part of my exploration of the ever likable Cypress automation toolset, I recently wrote a UI workflow tests that amongst other things validated the contents and count of a drop down list’s elements.
I was dreading that I would have to figure out a way using JavaScript/JQuery to select the drop down and iterate my way through the drop down’s children and perform an assertion on the item and count the children.
But, behold.., the fact fact that the Cypress API has handy dandy method to get all the children of a DOM element
Using .children() and the readable Chai assertions made this a joy
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| it('verify the total count and existence of a particular element in the dropdown',() => { | |
| // get the element and it's associated children | |
| cy.get('#sort-by-menu-header > div > ul').children() | |
| // perform the assertion on existence of a particular item in the drop down | |
| .should('contain','New Arrivals') | |
| // perform the assertion on the number of children i.e. options in the drop down | |
| .and('have.length','6') | |
| }) |
Bonus tip-
Note the clever use of “and” in adding multiple assertions on the element , avoiding the use of multiple “shoulds” and making the code human readable.
the reluctant tester 
Leave a Reply