Input Fields | Bondar Academy

Lesson Summary

In this lesson, we explore the automation of UI components using Cypress , specifically focusing on input fields. Here are the key points covered: Setting Up Tests A new spec file named UIComponents.cy.js is created for testing various UI components. The beforeEach hook is used to set up the test environment without specific navigation, allowing for testing across different pages. Working with Input Fields To type into an input field, use the type method with a locator for the web element. You can specify a typing delay by passing an object with a delay value. To clear an input field before typing, use the clear method. Cypress allows command chaining , enabling multiple actions on the same locator without repeated calls. Locating Input Fields Input fields can be targeted directly by their ID or indirectly through their associated label . Using cy.contains can help locate elements by their visible text. Handling Quotes and Variables Be cautious with quotes when typing strings that contain quotes. Use backticks for string interpolation when including variables in input fields. Assertions and Dynamic Values To avoid test flakiness with dynamic values, assert the input field's value before modifying it. Use not.have.value for negative assertions to ensure the field is not empty before typing. Key Presses and Navigation To simulate key presses, use curly braces with the key name, e.g., {enter} . For tabbing between fields, use the press method instead of type . In summary, when automating input fields with Cypress, utilize the type , clear , and press methods effectively, and always validate input fields to ensure robust tests.