Skip to main content

Cypress parent command

Cypress parent command gets the parent DOM element of a set of DOM elements. parent() command is different from parents() command, parent() only travels a single level up the DOM tree as opposed to the parents() command which travels multiple levels.

The querying behavior of parent() command is exactly same as JQuery .parent() method which returns the direct parent element of the selected element. 

Syntax

This command has 4 variations

.parent()
.parent(selector)
.parent(options)
.parent(selector, options)

Here in options we can use log and timeout.

Note: This command can not be chained with cy object so you can not type cy.parent()

When you will use parent command after selecting the child element, it will yield the new DOM element. After getting the element you can assert that parent should have some class or attribute or anything else. Also, you can perform some action on parent element. You can chain parent() with another parent() command, children()  command or any other command.

Example

For demo we will consider autopract website where we will perform following 3 actions:

  1. Assert parent contain particular attribute
  2. refer parent of parent and check it contains particular class
  3. refer sibling of an element using parent and child command
  it.only('find get difference', ()=> {

    cy.visit("/")
    cy.get('button.close').click();
    
    // Assert parent attribute
    cy.get('li.mobile-setting').parent().should('have.attr','_ngcontent-serverapp-c68')

    // refer parent of parent
    cy.get('li.mobile-setting').parent().parent().should('have.class','icon-nav')

    // Click on sibling element using parent and children
    cy.get('li.mobile-setting').parent().children('#search-widgets').click()
  })

Tags
Submitted by tgoswami on November 13, 2021

Tarun has 11+ years of experience in Quality Assurance in different domains like Banking, E-commerce, Health and Education.

About

At ProgramsBuzz, you can learn, share and grow with millions of techie around the world from different domain like Data Science, Software Development, QA and Digital Marketing. You can ask doubt and get the answer for your queries from our experts.