Understanding Locators for Automation Testing With Cypress

Locators play a key role in Cypress, helping testers find and interact with web elements during automation testing. They make it easier to target things like buttons, links, or input fields. By using options like IDs, classes, attributes, or CSS selectors, testers can replicate user actions smoothly. Having a solid grasp of locators is essential for building reliable and effective tests, making them a must-know skill for web automation.

Perquisites

Understanding of HTML and JavaScript

What are locators?

Locators are simply identifiers used to find and interact with specific HTML elements on a webpage.

Why are they necessary for automation testing?

Essentially, without locators an automation test cannot be carried out successfully, reason being that a particular part of a webpage cannot be picked to interact with. Cypress as an automation framework is able to select a particular part of a webpage and interact with it accordingly due to the help of locators.

How it works

Listed below are different ways locators are used in cypress for automation:

By ID: elements can be located using their unique id attribute by putting a hash (#) symbol in front of the Id name.
```
 cy.get('#elementID')
```
By Class: Elements can also be located using their class name by putting a dot (.) in front of the class name.
```
 cy.get('.className')
```

By Tag Name: The HTML tag name can be used as a locator.

 cy.get('button')
 cy.get('a') // Selects all anchor tags
 cy.get('p') // Selects all paragraph tags
 cy.get('li') // Selects all list item tags
 cy.get('input') // Selects all input elements
 cy.get('h1') // Selects all <h1> elements
 cy.get('h2') // Selects all <h2> elements

By Attribute: A specific attribute can be used to locate an element on a webpage.
```
 cy.get('[attribute="value"]')
```

By Partial Attribute Match: This works as regular expression, this indicates specific rules while selecting.

 cy.get('[attribute^="prefix"]') // Starts with
 cy.get('[attribute$="suffix"]') // Ends with
 cy.get('[attribute*="substring"]') // Contains

By Text Content (for elements like links or buttons): Contains method in cypress helps to identify a text on a web page
```
 cy.contains('Button Text')
```
By Parent-Child Relationships: In this case, selecting is done from parent to child class. The same can be done with id and attributes too.
```
 cy.get('.parent-class').find('.child-class')
```
By Index: This method selects an element using their index. It helps when there are multiple elements match the same locator.
```
 cy.get('.className').eq(0)
```

By Custom Commands: Custom locators can be created to resolve complex scenarios.

 Cypress.Commands.add('getByDataTest', (selector) => {
     cy.get(`[data-test=${selector}]`)
 })
 cy.getByDataTest('submit-button')

By Chained Selectors: This is the use of combined multiple selectors for precise targeting.
```
cy.get('form').find('input[type="text"]')
```

Each method has its use case depending on the structure and attributes of the elements in the DOM of a webpage.

So, these are the basics of locators for Cypress web automation. With this knowledge, you'll be ready to automate web applications using Cypress easily.

Happy Automation!