User-Visible Locators

In this lesson from the "Test Guild UI Automation with Playwright" course, Artem Bondar teaches you how to use User Visible Locators to interact with web elements as users would. Here's what you'll learn:

1. **Concept of User Visible Locators**:
- **Introduction**: Understand that User Visible Locators are designed to interact with elements visible to users, enhancing the realism of automated tests by mimicking user behavior.

2. **Testing Philosophy**:
- **User Interaction**: Emphasize that tests should verify user-visible behavior, avoiding reliance on implementation details like function names or CSS classes that users don't see.

3. **Using `getByRole` Method**:
- **Role-Based Locators**: Learn to use the `getByRole` method to find elements by their role (e.g., button, textbox) and associated text. This is often the preferred method for locating elements.
- **Example**: Locate an email input field using `await page.getByRole('textbox', { name: 'Email' }).click()`.

4. **Additional User Visible Locators**:
- **`getByLabel`**: Locate elements by their associated label text. Example: `await page.getByLabel('Email').click()`.
- **`getByPlaceholder`**: Locate elements by their placeholder text. Example: `await page.getByPlaceholder('Jane Doe').click()`.
- **`getByText`**: Locate elements by their visible text. Example: `await page.getByText('Using the Grid').click()`.
- **`getByTitle`**: Locate elements by their title attribute. Example: `await page.getByTitle('IoT Dashboard').click()`.
- **`getByTestId`**: Locate elements by a custom data attribute (`data-testid`), often used for more resilient selectors. Example: `await page.getByTestId('sign-in').click()`.

5. **Implementing Locators**:
- **Example Scenarios**: See practical examples of using these locators on a test application. Learn how to inspect elements, identify the right locators, and apply them in your test scripts.

6. **Best Practices**:
- **Mimicking User Behavior**: Emphasize the importance of using locators that reflect what users see and interact with to ensure tests are more robust and user-centered.
- **Avoiding ID/Implementation Details**: Understand why relying on visible text or roles is preferable to using IDs or classes that are not user-visible.

7. **Practical Application**:
- **Creating Tests**: Write and run tests using user-visible locators, demonstrating their effectiveness and ease of use.
- **Handling Multiple Matches**: Learn to handle scenarios where multiple elements match a locator, ensuring the right element is interacted with.

8. **Summary**:
- **Locator Methods**: Review the main methods (`getByRole`, `getByLabel`, `getByPlaceholder`, `getByText`, `getByTitle`, `getByTestId`) and their use cases.
- **User-Facing Approach**: Reinforce the importance of using locators that mimic user behavior for more reliable and meaningful tests.

By the end of this lesson, you will be proficient in using Playwright's User Visible Locators to create robust, user-centered test scripts that accurately reflect how users interact with your application. See you in the next lesson!