Скачать или смотреть Playwright with Typescript|UI Components|Input Fields | 15

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('[email protected]')`.
**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('[email protected]')`.
**Delays**: Add a delay between keystrokes to simulate slower typing.
**Example**: `await UsingTheGridEmailInput.press('[email protected]', { 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('[email protected]');
```
**Locator Assertions**: Use the `toHaveValue` method for direct assertions on locators.
**Example**: `await expect(UsingTheGridEmailInput).toHaveValue('[email protected]')`.

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.