Locator Syntax Rules | Bondar Academy

Lesson Summary

In this lesson, we explore locator syntax rules for using Cypress to locate web elements on a webpage. The demonstration utilizes the Playground application, focusing on the Form and Form Layouts page. Key Locator Methods in Cypress The primary method for locating elements is cy.get . This method allows you to search for web elements using various attributes: By Tag Name: Use cy.get('input') to find all input elements. By ID: Use cy.get('#input-email-one') , where the hash sign indicates an ID. By Class: Use cy.get('.input-full-width') , where the dot signifies a class. By Attribute: Use cy.get('[full-width]') to find elements with a specific attribute. By Attribute with Value: Use cy.get('[placeholder="email"]') for attributes that have values. Combining Attributes: Combine multiple attributes without spaces, e.g., cy.get('input[placeholder="email"]') . Using Data Attributes: It's recommended to use data-cy attributes for better test automation, e.g., cy.get('[data-cy="input-email-one"]') . Best Practices When writing locators: Use single quotes in Cypress to avoid conflicts with double quotes in HTML. Ensure there are no spaces when combining attributes. Utilize data-cy attributes for unique identification of elements. In summary, understanding these syntax rules will enhance your ability to effectively locate and interact with web elements in Cypress. This lesson concludes with a successful execution of the tests, confirming the functionality of the locators.