Input Fields | Bondar Academy

Lesson Summary

Welcome to the new section, Mastering UI Elements , where we will explore how to automate various UI components. This section includes regular homework assignments for automating specific test cases, which will be submitted for code review. Lesson Overview In this lesson, we will focus on: Automating input fields Making assertions on the values within these fields Setting Up the Test We begin by creating a new spec file named Components.spec.ts . The setup includes: Importing necessary modules Using a beforeEach hook to navigate to the test application Creating a test suite for the form layout page Automating Input Fields To automate input fields, we use the following methods: Locator Creation: Use page.locator to define the input field. Filling Input: Use fill method to input text (e.g., await using the grid email input.fill('[email protected]') ). Clearing Input: Use clear method to remove text. Simulating Keystrokes: Use press sequentially to simulate typing with optional delays. Making Assertions Assertions can be made in two ways: Generic Assertion: Extract the input value using input value and validate it. Locator Assertion: Use to have value method to check the expected value directly from the locator. Summary In this lesson, we learned how to: Use fill to input text Clear input fields with clear Simulate typing with press sequentially Make assertions using input value and to have value See you in the next lesson!