Cypress Cheat Sheet (Traversing DOM Elements)

In the last blog, we learned some of the most commonly used cypress commands. This blog is a continuation of the same. In this blog, I have shared some of the important commands to traverse the DOM elements in Cypress.

(1) .eq()

This command is used to select a nth/specific element within a set of elements that match a given selector. It takes an index argument, specifying the element's index that should be selected. The index starts with 0.

Here is an example of how to use eq() command to retrieve the second li element (which is Item 2) from the HTML code below and check that its text content is ‘Item 2’.

Sample HTML:

<ul>
 <li>Item 1</li>
 <li>Item 2</li>
 <li>Item 3</li>
</ul>

Code:

cy.get('li').eq(1).should('have.text', 'Item 2')

Note that the index is zero-based, so eq(0) would retrieve the first element, eq(1) would retrieve the second element, and so on

Here are some more examples of how to use .eq()

1) cy.get(.figure-img-wrapper).eq(1)
2) cy.get(.figure-img-wrapper).eq(1,{timeout:2000}).click()
3) cy.get(.figure-img-wrapper).eq(1).type('testing')
4) cy.get(.figure-img-wrapper).eq(1).should('have.text','testing')

It is often used in conjunction with other commands, such as click() or type(), to perform actions on the specific element in a set.

(2) .first()

This command in Cypress is used to select the first element in a set of elements. It is similar to using the .eq(0) command, which also selects the first element in a set of elements.

Here’s an example of how to retrieve the first li element (which is Item 1) from the below sample HTML and check that its text content is ‘Item 1’.

Sample HTML:

<! - sample.html →
<ul>
 <li>Item 1</li>
 <li>Item 2</li>
 <li>Item 3</li>
</ul>

Code:

cy.get('li').first().should('have.text', 'Item 1')

Here are some more examples of how to use .first()

1) cy.get(.figure-img-wrapper).first()
2) cy.get(.figure-img-wrapper).first({timeout:2000}).click()
3) cy.get(.figure-img-wrapper).first().type('testing')
4) cy.get(.figure-img-wrapper).first().should('have.text','testing')

It is often used in conjunction with other commands, such as click(),type(), or should, to perform actions on the first element in a set.

(3) .last()

This command is used to select the last element within a group of elements that match a specific selector. It can be useful for selecting and interacting with the last element within a group of elements.

Here’s an example of how you can use it to retrieve the last li element on the page (which is Item 3) and check that its text content is ‘Item 3’.

Sample HTML:

<! - sample.html →
<ul>
 <li>Item 1</li>
 <li>Item 2</li>
 <li>Item 3</li>
</ul>

Code:

cy.get('li').last().should('have.text', 'Item 3')

Here are some more examples of how to use .last()

1) cy.get(.figure-img-wrapper).last()
2) cy.get(.figure-img-wrapper).last({timeout:2000}).click()
3) cy.get(.figure-img-wrapper).last().type('testing')
4) cy.get(.figure-img-wrapper).last().should('have.text','testing')

It is often used in conjunction with other commands, such as click(), type(), or should, to perform actions on the first element in a set.

(4) .next()

This command in Cypress is used to get the next sibling element of the current DOM element.

Here’s an example of how to retrieve the next sibling element of the first span element (which is the second span element with the text ‘Item 2’) and check that its text content is ‘Item 2’.

Sample HTML:

<div class="container">
 <span>Item 1</span>
 <span>Item 2</span>
</div>

Code:

cy.get('span').first().next().should('have.text', 'Item 2')

Here are some more examples of how to use .next()

1) cy.get(.figure-img-wrapper).next()
2)cy.get('.traversal-ul').contains('apples').next({timeout:2000}).should('contain', 'oranges')
3) cy.get('.traversal-ul').next().should('contain', 'oranges')
4) cy.get('.traversal-ul').find(.active).next().should('contain', 'oranges')
5) cy.get('label.text-label').next().type('testing')
6) cy.get('label.text-label').next().click()

It is often used in conjunction with other commands, such as click(),type()or .should().

(5) .nextALL()

This command is used to get all the next siblings of an element. It is similar to the .next() method, which gets the next sibling element, but .nextAll() gets all the next siblings.

Here’s a sample of how to retrieve all of the next sibling elements of the first span element (which are the second, third, and fourth span elements) and check that there are 3 of them.

HTML Sample:

<div class="container">
 <span>Item 1</span>
 <span>Item 2</span>
 <span>Item 3</span>
 <span>Item 4</span>
</div>

Code:

cy.get('span').first().nextAll().should('have.length', 3)

Here are some more example of to use .nextAll():

1) cy.get(.figure-img-wrapper).nextAll().should('have.length',3)
2)cy.get('.traversal-ul').contains('apples').nextAll({timeout:2000}).should('have.length',3)

(6) .nextUntil()

This command is used to retrieve the next sibling elements of the selected element until the specified selector is met. This command is particularly useful when you have a set of elements that are not necessarily adjacent, but you want to perform the same action on all of them.

Here’s an example of how you to use the .nextUntil() command to retrieve the next element sibling elements of the first span element until the element with the class stop is reached (which are the second and third span elements) and check that there are 2 of them from the below HTML sample:

Sample HTML:

<! - sample.html →
<div class="container">
 <span>Item 1</span>
 <span>Item 2</span>
 <span class="stop">Item 3</span>
 <span>Item 4</span>
</div>

Code

cy.get('span').first().nextUntil('.stop').should('have.length', 2)

Here are some more examples of how to use .nextUntil():

1) cy.get(.figure-img-wrapper).nextUntill('.data')
2)cy.get(.figure-img-wrapper).nextUntill('.data',{timeout:2000}).should('have.length',3)

(7) .parent()

This command is used to retrieve the parent element of the currently selected element. This is useful when you need to perform an action on the parent element of an element, rather than the element itself.

Here’s an example of how to use the parent() command in a Cypress test to get the parent element of the child-element div:

Sample HTML:

<html>
<body>
 <div class="container">
 <div class="parent-element">
 <div class="child-element">I'm a child element</div>
 </div>
 </div>
</body>
</html>

Code:

cy.get('.child-element').parent().should('have.class', 'parent-element')

Here are some more examples of how to use .parent():

1) cy.get(.figure-img-wrapper).parent({timeout:2000})
2) cy.get(.figure-img-wrapper).parent('.active',{timeout:2000}).click()
3) cy.get(.figure-img-wrapper).parent().type('testing')
4) cy.get(.figure-img-wrapper).parent().should('have.length',2)

Keep in mind that the .parent() command only works on the currently selected element, so you’ll need to make sure that you’ve selected the correct element before using it.

(8) .parents()

This command is used to traverse through the ancestor elements of a selected DOM element. It is similar to the .parent() command, but instead of returning just the immediate parent element, it returns all of the parent elements from the immediate parent up to the root element of the DOM.

Here’s an example of how to use the parents() command in a Cypress test to get all the ancestors of the child-element div like this:

Sample HTML:

<html>
<body>
 <div class="grandparent-element">
 <div class="parent-element">
 <div class="child-element">I'm a child element</div>
 </div>
 </div>
</body>
</html>

Code:

cy.get('.child-element').parents().should('have.length', 2)

You can also use the parents command to filter the ancestors by a CSS selector.

For example, to get only the ancestors that have the class parent-element, you can use the below code:

cy.get('.child-element').parents('.parent-element').should('have.length', 1)

Here are some other examples of how to use .parents():

1) cy.get(.figure-img-wrapper).parents({timeout:2000})
2) cy.get(.figure-img-wrapper).parents('.active',{timeout:2000}).click()
3) cy.get(.figure-img-wrapper).parents().type('testing')
4) cy.get(.figure-img-wrapper).parents().should('have.length',2)

(9) .parentsUntil()

This command is used to retrieve all the parent elements of a given DOM element up to, but not including, the element specified in the argument. This command can be useful when you want to traverse up the DOM tree to find a specific ancestor element.

Here’s an example of how to use parentsUntil() to get all the ancestors of the child-element div up to but not including the grandparent-element:

Sample HTML:

<html>
<body>
 <div class="grandparent-element">
 <div class="parent-element">
 <div class="child-element">I'm a child element</div>
 </div>
 </div>
</body>
</html>

Code:

cy.get('.child-element').parentsUntil('.grandparent-element').should('have.length', 1)

You can also use the parentsUntil() command to filter the ancestors by a CSS selector. For example, to get only the ancestors that have the class parent-element up to but not including the grandparent-element div, you can do like shown below:

Code:

cy.get('.child-element').parentsUntil('.grandparent-element', '.parent-element').should('have.length', 1)

Here are some more examples of how to use parentsUntil() :

1) cy.get(.figure-img-wrapper).parentsUntil({timeout:2000})
2) cy.get(.figure-img-wrapper).parentsUntil('.active',{timeout:2000}).click()
3) cy.get(.figure-img-wrapper).find('.active').parentsUntil('.active')
4) cy.get(.figure-img-wrapper).parentsUntil().should('have.length',2)

(10) .children()

This command is used to select the children of the DOM element(s) that are currently selected. It returns a new Cypress object containing these child elements.

Here’s an example of how to use the children() command in a Cypress test to get the children of the parent-element div

Sample HTML:

<html>
<body>
 <div class="parent-element">
 <div class="child-element-1">I'm a child element</div>
 <div class="child-element-2">I'm a child element</div>
 </div>
</body>
</html>

Code:

cy.get('.parent-element').children().should('have.length', 2)

You can also use the children() command to filter the children by a CSS selector.

For example, to get only the children that have the class child-element-1, you can do like shown below:

Code:

cy.get('.parent-element').children('.child-element-1').should('have.length', 1)

Here are some more examples of how to use .children():

1) cy.get(.figure-img-wrapper).children({timeout:2000})
2) cy.get(.figure-img-wrapper).children('.active',{timeout:2000}).click()
3) cy.get(.figure-img-wrapper).find('.active').children('.active')
4) cy.get(.figure-img-wrapper).children().should('have.length',2)

(11) .siblings()

This command is used to select a sibling element that is a direct child of the same parent element as the current element. It takes a selector argument to specify which sibling element to select.

Here’s an example of how to use the siblings() command in a Cypress test to get the siblings of the child-element-2 div like this:

Sample HTML:

<html>
<body>
 <div class="parent-element">
 <div class="child-element-1">I'm a child element</div>
 <div class="child-element-2">I'm a child element</div>
 <div class="child-element-3">I'm a child element</div>
 </div>
</body>
</html>

Code:

cy.get('.child-element-2').siblings().should('have.length', 2)

You can also use the siblings command to filter the siblings by a CSS selector. For example, to get only the siblings that have the class child-element-1, you can do:

Code:

cy.get('.child-element-2').siblings('.child-element-1').should('have.length', 1)

Here are some more examples of how to use .sibling() command:

1) cy.get(.figure-img-wrapper).siblings({timeout:2000})
2) cy.get(.figure-img-wrapper).siblings('.active',{timeout:2000}).click()
3) cy.get(.figure-img-wrapper).find('.active').siblings('.active')
4) cy.get(.figure-img-wrapper).siblings().should('have.length',2)

(12) .prev()

This command is used to get the immediately preceding sibling of an element. It only gets the first preceding sibling.

Here’s an example of how to use prev() command in a Cypress test to get the previous sibling of the child-element-3 div :

Sample HTML:

<html>
<body>
 <div class="parent-element">
 <div class="child-element-1">I'm a child element</div>
 <div class="child-element-2">I'm a child element</div>
 <div class="child-element-3">I'm a child element</div>
 </div>
</body>
</html>

Code:

cy.get('.child-element-3').prev().should('have.class', 'child-element-2')

You can also use the prev() command to filter the previous sibling by a CSS selector. For example, to get only the previous sibling that has the class child-element-1, you can do like shown below:

Code:

cy.get('.child-element-3').prev('.child-element-1').should('have.length', 1)

Here are some more examples of how to use .prev() in a test:

1) cy.get(.figure-img-wrapper).prev({timeout:2000})
2) cy.get(.figure-img-wrapper).prev('.active',{timeout:2000}).click()
3) cy.get(.figure-img-wrapper).find('.active').prev('.active')
4) cy.get(.figure-img-wrapper).prev().should('have.length',2)
5) cy.get('.birds').find('.active').prev().should('contain','oranges');

(13) .prevAll()

This command is used to select all sibling elements that come before the selected element in the DOM tree.

Here’s an example of how to use prevAll() command to select all the .item elements that come before the .item.active element:

Sample HTML:

<div class="container">
 <div class="item">Item 1</div>
 <div class="item">Item 2</div>
 <div class="item active">Item 3</div>
 <div class="item">Item 4</div>
 <div class="item">Item 5</div>
</div>

Code:

cy.get('.item.active').prevAll('.item')

//yields Item1, Item2

Here are few more examples of how to use .prevAll() in a test:

1) cy.get(.figure-img-wrapper).prevAll({timeout:2000})
2) cy.get(.figure-img-wrapper).prevAll('.active',{timeout:2000}).click()
3) cy.get(.figure-img-wrapper).find('.active').prevAll('.active')
4) cy.get(.figure-img-wrapper).prevAll().should('have.length',2)
5) cy.get('.birds').find('.active').prevAll().should('contain','oranges');

(14) .prevUntil()

This command is used to find all the preceding siblings of an element that match certain criteria, starting from the element that immediately precedes it and going backward. It is useful for finding elements that are not immediately adjacent to the element you are targeting.

Here’s an example of how to use .prevUntil() to get all the previous siblings of the child-element-3 div up to but not including the child-element-1 :

Sample HTML:

<html>
<body>
 <div class="parent-element">
 <div class="child-element-1">I'm a child element</div>
 <div class="child-element-2">I'm a child element</div>
 <div class="child-element-3">I'm a child element</div>
 </div>
</body>
</html>

Code:

cy.get('.child-element-3').prevUntil('.child-element-1').should('have.length', 1)

Here are some more examples of how to use .prevUntil()

1) cy.get(.figure-img-wrapper).prevUntil({timeout:2000})
2) cy.get(.figure-img-wrapper).prevUntil('.active',{timeout:2000}).click()
3) cy.get(.figure-img-wrapper).find('.active').preUntil('.active')
4) cy.get(.figure-img-wrapper).prevUntil().should('have.length',2)
5) cy.get('.birds').find('.active').prevUntil().should('contain','oranges');

(15) .filter()

It is used to select only those elements that match the provided selector.

Here’s an example of how to use the filter() command in a Cypress test to get only the child-element-2 div:

Sample HTML:

<html>
<body>
 <div class="parent-element">
 <div class="child-element-1">I'm a child element</div>
 <div class="child-element-2">I'm a child element</div>
 <div class="child-element-3">I'm a child element</div>
 </div>
</body>
</html>

Code:

cy.get('.parent-element').children().filter('.child-element-2').should('have.length', 1)

Here are some examples of how to use .filter()

1) cy.get(.figure-img-wrapper).filter({timeout:2000})
2) cy.get(.figure-img-wrapper).filter('.active',{timeout:2000}).click()
3) cy.get(.figure-img-wrapper).filter('.active').type('apple')
4) cy.get(.figure-img-wrapper).filter().should('have.length',2)
5) cy.get('.birds').find('>li').filter('.active').should('contain', 'oranges');

Tip:

Here are a few more things to consider when using the Cypress commands for DOM traversal:

The parent, parents, parentsUntil, children, siblings, prev, prevAll, and prevUntil commands are all chainable, which means you can use them in combination with other Cypress commands to perform more complex operations but the filter command when used in combination with other commands will apply its filter function to the set of elements that have already been selected by the previous commands.

Conclusion:

The Cypress commands shared above are commonly used to traverse the DOM elements. These commands, however, cannot be used in combination with commands such as cy.getCookies(), cy.clock(), and cy.refresh().

Thanks for reading. Happy Learning! AB

You can also download the pdf for the cheat sheet.

Thanks, Naveen AutomationLabs for the support and guidance.

Ref: https://docs.cypress.io/api/table-of-contents

Anshita Bhasin
Sr. Automation Engineer

GitHub | LinkedIn | Twitter | Youtube