Lists and Dropdowns | Bondar Academy

Lesson Summary

In this lesson, we explore the automation of lists and drop-downs in HTML, focusing on two main types of drop-downs and their automation approaches. Types of Drop-downs Standard Drop-down: Utilizes the <select> tag with <option> elements for values. Custom Drop-down: Often styled with buttons and overlays, lacking direct <option> elements in the HTML structure. Automation Techniques For automation, the approach differs based on the type of drop-down: Standard Drop-down Automation Use getByRole with the role combobox to locate the drop-down. Select an option using the selectOption method without needing to click the drop-down. To validate the selection, use the assertion expect(locator).toHaveValue('info') . Custom Drop-down Automation Simulate user behavior by clicking the drop-down and selecting a value. Use locators to find the drop-down and its options, either by targeting the list or individual items. For validation, use expect(locator).toHaveText('selectedValue') . Advanced Techniques To extract all options from a custom drop-down: const allListValues = await page.locator('nbOption').allTextContents(); This allows looping through the values for further logic in your tests. In summary, understanding the structure of drop-downs is crucial for effective automation, with distinct methods for standard and custom types.