Working with Elements
Learn about element locators and CI/CD integration across major test automation frameworks.
At the core of test automation scenarios are element locators. Without properly identifying web application elements, the test automation code will not be able to run properly since it can’t find the elements on the web pages and perform actions on them. All four leading test automation frameworks work perfectly well with the elements within the website DOM tree. Some of the frameworks even make element identification and maintenance easier through object spies, page object model support, and even test automation recording.
Cypress working with elements
Unlike Selenium, Cypress queries the DOM and works only on CSS selectors, which include ID, class, and attribute. To use XPATH within the Cypress test code, we will need to install the cypress-xpath plugin. Cypress can also use .contains() to select an element that contains, for example, some text. Additionally, Cypress can find elements by their position in a list by using the .first(), .last(), or .eq() methods:
cy.get('list').first(); // "select first item in the list"cy.get('list').last(); // "select last item in the list"cy.get('list').eq(2); // "select second item in the list"
There are various methods to locate elements in Cypress. We can use the DevTools utilities from the browsers themselves and inspect specific pages and elements, or we can use the Cypress GUI element selector and identify the target elements that we want to perform an automated action on. Another method that can be used is the SelectorsHub Google Chrome extension utility.
Let’s look at an example of identifying web page elements in the Cypress CSS selector. We will perform the following tasks in our to-do list application:
Add ...