Input Fields | Bondar Academy

Lesson Summary

In this lesson, we focus on the specifics of test automation for UI components, particularly input fields . The following key concepts and methods are discussed: Setup A new spec file named uicomponents.spec.ts is created. The initial setup includes: A beforeEach block to navigate to the homepage. A describe block with another beforeEach to navigate to the form layouts page. Interacting with Input Fields To interact with the email input field, the following methods are used: Method fill : Use this method to type into the input field. Example: fill('[email protected]') . Method clear : Use this method to clear the input field. Example: clear() . Method pressSequentially : Simulates keystrokes with an optional delay. Example: pressSequentially('[email protected]', { delay: 500 }) . Extracting and Asserting Values To extract the value from the input field: const inputValue = await locator.inputValue(); For assertions, prioritize locator assertions : await expect(locator).toHaveValue('[email protected]'); For partial matches, use regular expressions: expect(locator).toHaveValue(/test\.com$/); Summary Key takeaways: Use fill to type into input fields. Use clear to empty input fields. No need to click the input field before using fill . Use inputValue to extract values. Always use locator assertions with toHaveValue . In the next lesson, we will cover more advanced topics.