Cypress parents command

Profile picture for user arilio666

Now to travel on multiple DOM element trees to find the different parents, or you can say various parents of a particular DOM, Parents command in cypress will do the job for you.

  • As opposed to parent command parents() command travels through multiple DOM trees, whereas the parent command travels a single level up the tree.
  • The behavior and function of the parents() command is a perfect match to that of the JQuery.
  • It can be both written with a selector or without a selector too.
  • Parents() command yields the new DOM elements that are the parent for the selector we provide within get before parents.

Syntax

.parents()
.parents(selector)
.parents(options)
.parents(selector, options)
  • Selector: Used to filter up the matching DOM elements.
  • Options: Used to pass in objects to change parents() behavior.

Correct Use

cy.get('#id').parents()

Wrong Use:

cy.parents()

Always chain with the get command, not the other way around.

Let us see a DOM level simple example to get a clear picture of how parents work:

<ul class="nav-icon">
  <li>Origin</li>
  <li>Hello
    <ul class="nav-bar">
      <li>Install</li>
      <li class="active">Dream</li>
      <li>Night</li>
    </ul>
  </li>
</ul>

Let's say we want to get parents of class active.

cy.get('li.active').parents();
  • When we run this, we will get yields of the li.active element in other terms we get its parents.
  • So here it will yield (.nav-bar, li, .nav-icon).
  • We can use these selector yields to isolate and do operations within a specific parent-child DOM element.

Now enough talk, let us deep-dive into the actual test case scenario where we will use this parents command.

Example: Get all parents of element

So a real cypress test case will be written for this and explained neatly. For this test, we will test out the traditional https://www.programsbuzz.com/ site.

So coming back to our real case scenario, here are the test steps we will perform.

  1. Navigate to the site link https://www.programsbuzz.com/
  2. Click on 'ask doubt.'
  3. Get the class of 'ask doubt' in DOM and track down its parents, and using children, try to click login.

First, let us see how parents yield DOM elements:

describe('Should load the programsbuzz website',()=> {

    it('Track down parents of askdoubt and try to click through login',()=>{

        cy.visit("/")
        cy.contains('Ask Doubt').click()
        cy.get('li.menu-item--active-trail').parents()
    })
})
  • Here we have used the 'ask doubt' class and tried to get its parents.

  • We can see that it yielded all the DOM elements above li.menu-item--active-trail, or we can say they are their various parents.
  • Choose a selector it yields according to our need for isolation. In this case, I want the 'clearfix gva_menu gva_menu_main' class, which covers the entire thing placed there.

  • So here we can see our login part is covered with this parent element, so we use this in our parents and see what it yields.

Example: Get specific parent of an element

We can see it isolated and yielded these following DOM elements under that class where our 'Log in' elements are also holding up.

  • The last class in that pic is our needed login DOM element, and we need to click it.
  • For that, we will use the children command chained with parents since it is located in the last place.
  • We will chain 'last()' with 'children()' and then click it.
describe('Track down parents of askdoubt and try to click through login',()=> {
    it('Visit the website',()=>{
        cy.visit("/")
        cy.contains('Ask Doubt').click()
        cy.get('li.menu-item--active-trail').parents('.gva_menu_main').children().last().click()
    })
})

  • So as we can see now, we clicked the last dom element using the children command.
  • We can use the parents() command effectively to isolate the parents and children of the DOM elements with various yield cypress provides.