Cypress parentsUntil command

In cypress, we have yet another parent command called parentsUntil, which fetches all the parents till the specified parent inside the parentsUntil.

So what this does is it gets all the ancestors of a DOM element up to the ancestor we provide within this and without including the element we provide in it. This query behavior of parentsUntil() is also as same as that of jquery.

Syntax

.parentsUntil(selector)
.parentsUntil(selector, filter)
.parentsUntil(selector, filter, options)
.parentsUntil(element)
.parentsUntil(element, filter)
.parentsUntil(element, filter, options)

Correct Use:

cy.get('a').parentsUntil('.main') 

Yield parents of 'a' until '.main'

Wrong Use:

cy.parentsUntil() 

Cannot be chained off 'cy'

cy.location().parentsUntil('href') 

'location' does not yield a DOM element.

Some of the options we can include in the command can be a timeout, log, etc.

• Filter: To filter matching DOM elements, a selector is used.
• Log: To display the command in the command log.
• Timeout: Wait for some particular thing to get finished before timing out.
• selector (String selector): The selector where you want finding parent ancestors to stop.
• element (DOM node, jQuery Object): The element where you want finding parent ancestors to stop.

Let us see a sample example of how this works:

<ul class="main">
  <li>
    <a href="#">Materials</a>
    <ul class="gva_main">
      <li>
        <a href="/door">Door</a>
      </li>
      <li class="active">
        <a href="/drawer">drawer</a>
      </li>
    </ul>
  </li>
</ul>

cy.get('.active').parentsUntil('.main')

The following command yields [ul.gva_main, li] because these parent elements are within the main class.

Now let us see a real-time example of automating our traditional https://www.programsbuzz.com/.

So let us get back to our last command.

Here are the test steps of what we are about to do. This will be similar to the parents article test.

1. Visit the site.
2. Click on ask doubt.
3. Try to click on login using parentsUntil.

Let us dive in then!!

describe('The ParentsUntil Command',() => {
    it('visit the site, click ask doubt and click log in',()=>{
        cy.visit('/')
        cy.contains('Ask Doubt').click()
        cy.get('li.menu-item--active-trail')

    })
})

• So first, we are clicking and getting the ask doubt element to get its parent.

• From the pic, we can see that we will get parents until class "col-md-12 col-sm-12 col-xs-12 content-inner".

describe('The ParentsUntil Command',() => {
    it('visit the site, click ask doubt and click log in',()=>{
        cy.visit('/')
        cy.contains('Ask Doubt').click()
        cy.get('li.menu-item--active-trail').parentsUntil('.col-md-12 col-sm-12 col-xs-12 content-inner')


    })
})

• We can see the yielded parents within the parent element we mentioned inside parentsUntil command.
• We will be using the first selector "ul.clearfix.gva_menu.gva_menu_main" yielded by the parentsUntil command from this DOM.

describe('The ParentsUntil Command',() => {
    it('visit the site, click ask doubt and click log in',()=>{
        cy.visit('/')
        cy.contains('Ask Doubt').click()
        cy.get('li.menu-item--active-trail').parentsUntil('.col-md-12 col-sm-12 col-xs-12 content-inner').children('ul.clearfix.gva_menu.gva_menu_main')

    })
})

• We have asked for the children of the "ul.clearfix.gva_menu.gva_menu_main" parent, which we got from parentsUntil.

Let us see what it yields.

• We can see this list of child elements under this parent.

• We can see the children are the tabs we find on top in this pic.
• So among these children, we need the login element, which is the last element.

describe('The ParentsUntil Command',() => {
    it('visit the site, click ask doubt and click log in',()=>{
        cy.visit('/')
        cy.contains('Ask Doubt').click()
        cy.get('li.menu-item--active-trail').parentsUntil('.col-md-12 col-sm-12 col-xs-12 content-inner').children('ul.clearfix.gva_menu.gva_menu_main').last().contains('Log in').click()

    })
})

So we asked the children to give us the last element using the last() command, and we were told that it contains the text "log in," which needs to be clicked.

• We can see that test has been passed, and we are now on the login page.
• So this is one way we can use parentsUntil effectively to get the parents list within the provided parent element inside it to avoid crowded elements of parents confusion.