Input Fields

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('test@test.com')`.
- **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 UsingTheGridEmailInput.press('test2@test.com')`.
- **Delays**: Add a delay between keystrokes to simulate slower typing.
- **Example**: `await UsingTheGridEmailInput.press('test2@test.com', { delay: 500 })`.

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

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!