In this lesson from the "Test Guild UI Automation with Playwright" course, Artem Bondar explains how to automate interactions with web tables and locate specific elements within the table. Here’s a summary of the key points covered:
### Introduction to Web Tables
- **Structure of Web Tables**: Tables are structured with `<table>` tags containing `<thead>` and `<tbody>` tags. Rows are represented by `<tr>` tags, and columns within rows are represented by `<td>` tags.
- **Challenges**: Identifying unique elements within the table can be tricky, especially when trying to select an entire column or a specific cell.
### Automating Scenarios with Web Tables
- **Scenario**: Locate a user by email and update their age.
### Step-by-Step Automation Process
1. **Navigate to the Table Page**:
- **Code**:
```javascript
await page.goto('URL/tables-and-data/smart-table');
```
2. **Locate the Target Row by Unique Identifier (Email)**:
- **Inspect Element**: Find the unique identifier (e.g., email).
- **Code**:
```javascript
const targetRow = page.locator('tr').filter({ hasText: 'email@example.com' });
```
3. **Click the Edit Icon**:
- **Inspect Element**: Locate the edit icon within the row.
- **Code**:
```javascript
await targetRow.locator('.nb-edit').click();
```
4. **Modify the Age**:
- **Code**:
```javascript
const ageInput = targetRow.locator('input[placeholder="Age"]');
await ageInput.fill('35');
```
5. **Save Changes**:
- **Code**:
```javascript
await targetRow.locator('.nb-checkmark').click();
```
6. **Run the Test**:
- **Code**:
```javascript
await page.getByRole('button', { name: 'Save' }).click();
```
### Handling Complex Scenarios
- **Navigating to Specific Pages**:
- **Code**:
```javascript
await page.locator('.smart-pagination').getByText('2').click();
```
- **Locate by Specific Column Value**:
- **Code**:
```javascript
const targetRowByID = page.locator('tr').filter({ hasText: 'ID value' }).locator('td').nth(1).filter({ hasText: '11' });
```
### Asserting the Changes
- **Code**:
```javascript
await expect(targetRowByID.locator('td').nth(5)).toHaveText('test@test.com');
```
### Full Test Example
- **Combined Steps**:
```javascript
test('Automate Web Table Row Update', async ({ page }) => {
await page.goto('URL/tables-and-data/smart-table');
// Navigate to the second page
await page.locator('.smart-pagination').getByText('2').click();
// Locate the target row by ID and click the edit icon
const targetRowByID = page.locator('tr').filter({ hasText: 'ID value' }).locator('td').nth(1).filter({ hasText: '11' });
await targetRowByID.locator('.nb-edit').click();
// Modify the email
const emailInput = targetRowByID.locator('input[placeholder="Email"]');
await emailInput.fill('test@test.com');
// Save changes
await targetRowByID.locator('.nb-checkmark').click();
// Assert the changes
await expect(targetRowByID.locator('td').nth(5)).toHaveText('test@test.com');
});
```
### Summary
- **Locating Rows and Cells**: Use unique identifiers and text within the rows to locate specific elements.
- **Handling Input Fields**: Be aware of the difference between displayed text and input field values.
- **Filtering by Columns**: Use filtering to narrow down specific rows based on column values.
- **Assertions**: Ensure changes are successfully made and assert the final values.
By the end of this lesson, you will be proficient in navigating and automating interactions with web tables, ensuring your tests accurately reflect user interactions with these elements. See you in the next lesson!
Comments are closed.