In this lesson from the "Test Guild UI Automation with Playwright" course, Artem Bondar teaches how to automate input fields and make assertions of the values inside them. Here's what you'll learn:

1. **Introduction to Mastering UI Elements**:
- **Overview**: This section focuses on automating various UI components, starting with input fields.
- **Setup**: Create a new spec file `uiComponents.spec.ts` and set up necessary imports and hooks for the test.

2. **Automating Input Fields**:
- **Navigating to Form Layouts**: Use the `beforeEach` hook to navigate to the Form Layouts page.
- **Locating Input Fields**: Define locators for input fields using `page.locator`.
- **Example**: `const UsingTheGridEmailInput = page.locator('nb-card:has-text("Using the Grid")').locator('role=textbox[name="Email"]')`.

3. **Typing into Input Fields**:
- **Typing Text**: Use the `fill` method to type text into input fields.
- **Example**: `await UsingTheGridEmailInput.fill('')`.
- **Clearing Text**: Use the `clear` method to clear text from input fields.
- **Example**: `await UsingTheGridEmailInput.clear()`.
- **Press Sequentially**: Simulate keystrokes with optional delays.
- **Example**: `await'')`.
- **Delays**: Add a delay between keystrokes to simulate slower typing.
- **Example**: `await'', { delay: 500 })`.

4. **Making Assertions**:
- **Generic Assertions**: Extract the text from the input field and assert its value.
- **Example**:
const inputValue = await UsingTheGridEmailInput.inputValue();
- **Locator Assertions**: Use the `toHaveValue` method for direct assertions on locators.
- **Example**: `await expect(UsingTheGridEmailInput).toHaveValue('')`.

5. **Practical Examples**:
- **Typing and Clearing Text**: Demonstrate typing, clearing, and retyping text in input fields.
- **Simulating Keystrokes**: Show how to simulate slow typing using the `press` method with delays.
- **Assertions**: Perform both generic and locator-specific assertions to validate input field values.

6. **Summary**:
- **Typing Text**: Use the `fill` method to input text.
- **Clearing Text**: Use the `clear` method to remove text.
- **Simulating Keystrokes**: Use the `press` method for keystrokes and add delays as needed.
- **Assertions**: Extract values with `inputValue` for generic assertions or use `toHaveValue` for locator assertions.

By the end of this lesson, you will be proficient in automating interactions with input fields and making assertions on their values, ensuring your automated tests accurately reflect user interactions. See you in the next lesson!

Comments are closed.

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