Cypress is a powerful testing framework that does writing and running automated tests for web applications easy. When working with Cypress, selectors must target specific elements on a page. This blog’ll explore how to work with selectors in Cypress and write Cypress tests using different commands.
More often, it is required to test the behavior of certain elements on the web application. Selectors help to identify those elements while writing the tests. In Cypress, CSS selectors are the only locators available. However, it can also work with XPath with the help of an additional plugin.
What are CSS Selectors?
When writing Cypress tests, CSS selectors are commonly used to identify and select the desired elements on the page. Here are some common CSS selectors that you can use with Cypress:
D Selector: CSS ID Selector is an attribute passed to an HTML element. One can use the # symbol and the ID attribute’s value to get the element. For Example: cy.get(‘#elementId’)
Class Selector: CSS Class Selector is another attribute of an HTML element that can be used to identify the element using dot (.) with the value of the class attribute. For Example: cy.get(‘.className’)
Tag Selector: The tag selector selects an element specified within an HTML tag. We can use the cy.get() method with the element selector to select an element with a particular tag name. For example: cy.get(‘input’)
Attribute Selector: The attribute selector selects an element based on its attribute name and value. You can use the cy.get() method with the attribute selector to select an element with a particular attribute and value. For example: cy.get(‘[data=”val”]’). In this, “data” is an attribute, and “val” is its value, e.g.: name=”ali.”
Compound Selector: The compound selector selects an element that matches multiple selectors. To select an element that matches multiple selectors, you can separate the selectors with a comma. For example, cy.get(‘.className, [data-attribute=”value”]’). It is the combination of multiple selectors to make your script more efficient and accurate.
Pseudo-class Selector: Pseudo-class selectors are a type of CSS selector that allow you to select elements based on their state or position in the document. They are used to add style to an element when it is in a certain state or has a certain relationship to another element. Cypress supports the selectors such as ‘visible’ and ‘hidden,’ ‘enabled’ and ‘disabled’ etc. For example, to select a div that is currently visible, then its syntax will be: cy.get(‘div:visible’)
Cypress test scripts using different commands
A few commands are covered that are more frequently used during test scripts.
Visit a URL
The cy.visit() command is used to navigate to a URL in your web application.
Interacting with Elements
The cy.get() command is used to select and interact with elements on the page. Such as:
Final Words/ Conclusion
Cypress selectors are powerful and flexible elements that can help to write effective and efficient test scripts for web applications. We can follow the best practices like using specific selectors, avoiding absolute selectors, and using data attributes that can write maintainable test scripts, making it easy to catch any bugs to ensure the quality of the website. This blog covers the most commonly used commands at the basic level, such as cy.visit(), cy.get(), select, type, etc. We also saw which CSS selectors are more often during test script writing. By using these commands, we can write
