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.
- Navigate to the site link https://www.programsbuzz.com/
- Click on 'ask doubt.'
- 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.
- Log in to post comments