In Cypress automation testing, locating web elements is one of the most common and essential actions. Cypress provides a powerful command called cy.get() to find elements on a web page.
✅ Using cy.get() in Cypress
You can find an element in Cypress using the following syntax:
cy.get(‘locator’)
Cypress automatically waits for the element to appear in the DOM before performing any action. The default timeout is 30 seconds, which ensures your tests are more reliable and less flaky.
If needed, you can change the default wait time by updating the Cypress configuration file (cypress.config.js) or by specifying a custom timeout in your command:
cy.get(‘.submit-button’, { timeout: 10000 }) // waits up to 10 seconds
⚙️ Performing Actions with cy.get()
Once you locate an element using cy.get(), you can chain different Cypress commands to interact with it. For example:
// Click on a button
cy.get(‘.submit-button’).click()
// Type text into an input field
cy.get(‘#username’).type(‘testuser’)
// Get text from an element
cy.get(‘.message’).should(‘contain’, ‘Success’)
Cypress commands are asynchronous but automatically handle waiting and retries, which simplifies test automation significantly.
🧩 CSS vs XPath in Cypress
By default, Cypress supports CSS selectors for locating elements, which are fast and reliable. However, if you prefer to use XPath locators, you’ll need to install an additional plugin:
npm install -D cypress-xpath
Then include the following line in your Cypress support file (usually cypress/support/e2e.js):
require('cypress-xpath')
After installation, you can use the cy.xpath() command:
cy.xpath('//button[text()="Submit"]').click()
🚀 Summary
- Use
cy.get('locator')to locate elements in Cypress. - Cypress automatically waits for elements with a default timeout of 30 seconds.
- You can chain commands like
.click()or.type()to interact with elements. - CSS selectors are supported by default; XPath requires the Cypress XPath plugin.