Exploring the Cypress API – getting and asserting on a DOM element’s children

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

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.

Leave a Reply