List and Dropdowns

In this lesson from the "Test Guild UI Automation with Playwright" course, Artem Bondar explains how to automate interactions with lists and dropdowns. Here's what you'll learn:

1. **Introduction to Lists and Dropdowns**:
- **Overview**: Learn how to select elements from lists and dropdowns, loop through the elements, and perform various operations.
- **Setup**: Navigate to the test application and locate the dropdown menu at the top of the page.

2. **Understanding List Structure**:
- **Visual vs. Actual Structure**: Understand that visually connected elements might be separate in the DOM.
- **Inspecting Elements**: Inspect the DOM to identify the actual structure of the dropdown and list items.

3. **Automating List Interaction**:
- **Expanding the Dropdown**: Create a locator for the dropdown button and click to expand the list.
- **Example**:
```javascript
const dropDownMenu = page.locator('ngx-header nb-select');
await dropDownMenu.click();
```
- **Selecting List Items**: Use Playwright's `getByRole` method to interact with list items.
- **Example**:
```javascript
const optionList = page.locator('nb-option-list nb-option');
await optionList.filter({ hasText: 'Cosmic' }).click();
```

4. **Performing Assertions**:
- **Validating List Items**: Use locator assertions to validate the presence of expected items in the list.
- **Example**:
```javascript
await expect(optionList).toHaveText(['Light', 'Dark', 'Cosmic', 'Corporate']);
```

5. **Validating CSS Properties**:
- **Checking Background Color**: Validate that selecting a list item changes the background color as expected.
- **Example**:
```javascript
const header = page.locator('nb-layout-header');
await expect(header).toHaveCSS('background-color', 'rgb(50, 50, 89)');
```

6. **Looping Through List Items**:
- **Creating a Color Validation Loop**: Loop through each list item, select it, and validate the background color change.
- **Example**:
```javascript
const colors = {
Light: 'rgb(255, 255, 255)',
Dark: 'rgb(34, 34, 34)',
Cosmic: 'rgb(50, 50, 89)',
Corporate: 'rgb(32, 32, 32)'
};

for (const color in colors) {
await optionList.filter({ hasText: color }).click();
await expect(header).toHaveCSS('background-color', colors[color]);
if (color !== 'Corporate') {
await dropDownMenu.click();
}
}
```

7. **Practical Examples**:
- **Interacting with Dropdowns**: Demonstrate how to expand the dropdown, select items, and validate changes.
- **Looping Through Items**: Show how to loop through list items to perform repetitive tasks and assertions.

8. **Summary**:
- **Interacting with Lists**: Use `getByRole` methods to interact with lists and list items.
- **Validating List Content**: Use `toHaveText` assertions to validate the content of the list.
- **Looping Through Lists**: Use JavaScript loops to iterate through list items and perform actions.

By the end of this lesson, you will be proficient in automating interactions with lists and dropdowns, ensuring your automated tests accurately reflect user interactions with these elements. See you in the next lesson!

Comments are closed.

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}