Lists and Dropdowns | Bondar Academy

Lesson Summary

In this lesson, we explore lists and drop-downs in web applications, focusing on the differences between native and custom drop-downs . Types of Drop-downs Native Drop-downs: These are built-in browser elements represented by a <select> tag in the DOM. Custom Drop-downs: These are designed specifically for the web application and often involve more complex HTML structures. Automation Techniques Automation for these drop-downs varies significantly: For native drop-downs , use the select method to choose values directly without clicking. For custom drop-downs , simulate user actions: click to expand, select a value, and then collapse. Example of Native Drop-down Automation cy.get('label:contains("toaster type")') .parent() .find('select') .select('info') .should('have.value', 'info'); Example of Custom Drop-down Automation cy.get('label:contains("position")') .click() .get('.option-list .nb-option') .contains('bottom right') .click() .should('have.text', 'bottom right'); Looping Through Drop-down Values To automate selecting all values from a drop-down: Expand the drop-down. Retrieve the list of options and loop through them using the each method. Ensure the drop-down is expanded before each selection to avoid DOM errors. In summary, understanding the structure of drop-downs is crucial for effective automation. Use the appropriate methods based on whether the drop-down is native or custom, and manage the DOM state carefully during automation.