Lists and Dropdowns | Bondar Academy

Lesson Summary

In this lesson, we explore how to automate lists and drop-downs in web applications. The focus is on selecting elements from lists and looping through them to perform various operations. Understanding the List Element The example application features a drop-down list that changes the application's color upon selection. It's important to note that the visual representation of the list does not correspond directly to the DOM structure. The actual list is often located in a separate section of the website, which necessitates different locators for the list and its items. Automating the Scenario Identify the locator for the drop-down box. Use page.locator to create a constant for the drop-down menu. Expand the list by clicking the identified locator. Selecting Items from the List To interact with the list, the recommended methods are: page.getByRole('list') for the entire list. page.getByRole('listitem') for individual items (if applicable). In this case, since the items are represented by <nb-option> tags, we create a locator for these items directly. Assertions and Validations Assertions can be made using await expect() to validate that the list contains the expected items. For example: await expect(optionList).toHaveText(['Light', 'Dark', 'Cosmic', 'Corporate']); Looping Through Items To validate color changes for each selection, we loop through an object containing color values. The loop iterates through each color, selects it, and asserts the corresponding background color: for (const color in colors) { await optionList.filter({ hasText: color }).click(); await expect(header).toHaveCSS('background-color', colors[color]); } In summary, when automating lists: Use getByRole methods for selection. Utilize locator assertions for validating list content. Implement loops for iterating through items and validating changes. These techniques enhance the automation of web elements effectively.