Dialog Boxes

In this lesson from the "Test Guild UI Automation with Playwright" course, Artem Bondar explains how to automate interactions with dialog boxes. Here’s a summary of the key points covered:

### Introduction to Dialog Boxes
- **Types of Dialog Boxes**: There are two types of dialog boxes in web applications:
- **Web Dialog Boxes**: Part of the DOM, straightforward to automate by inspecting the element.
- **Browser Dialog Boxes**: Not part of the DOM, belong to the browser, and are trickier to automate.

### Automating Web Dialog Boxes
- **Example**: Clicking a button to open a web dialog box.
- **Automation**: Inspect the element, find the locator, and interact with the dialog box using standard methods.

### Automating Browser Dialog Boxes
- **Example**: Deleting a row in a table, which triggers a browser dialog box.
- **Inspection**: Navigate to the element that triggers the dialog box (e.g., a trash icon).
- **Locator Strategy**: Identify the table, the specific row, and then the delete icon within that row.

### Step-by-Step Automation Process
1. **Navigate to the Target Page**:
- **Code**:
```javascript
await page.goto('URL');
await page.click('selector');
```
2. **Locate the Delete Icon in the Table**:
- **Inspect Elements**: Identify the table structure and find unique identifiers (e.g., email in a row).
- **Code**:
```javascript
const row = page.locator('table tr').filter({ hasText: 'email@example.com' });
await row.locator('.nb-trash').click();
```

### Handling Browser Dialog Boxes
- **Default Behavior**: Playwright automatically cancels browser dialog boxes.
- **Overcoming Default Behavior**:
- **Code**:
```javascript
page.on('dialog', async dialog => {
expect(dialog.message()).toBe('Are you sure you want to delete?');
await dialog.accept();
});
```

### Asserting the Deletion
- **Validation**: Ensure the row is deleted by asserting the absence of the email.
- **Code**:
```javascript
await expect(page.locator('table tr:first-child')).not.toHaveText('email@example.com');
```

### Full Test Example
- **Combined Steps**:
```javascript
test('Automate Browser Dialog Box', async ({ page }) => {
await page.goto('URL');
await page.click('selector'); // Navigate to the specific page

// Set up the dialog handler
page.on('dialog', async dialog => {
expect(dialog.message()).toBe('Are you sure you want to delete?');
await dialog.accept();
});

// Locate and click the delete icon
const row = page.locator('table tr').filter({ hasText: 'email@example.com' });
await row.locator('.nb-trash').click();

// Assert the row is deleted
await expect(page.locator('table tr:first-child')).not.toHaveText('email@example.com');
});
```

### Summary
- **Web Dialog Boxes**: Automate using standard element locators and interactions.
- **Browser Dialog Boxes**: Use `page.on('dialog')` to handle dialog boxes and perform assertions.

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