Cypress & # 8211; Children

By Siddharth Murugan, Community Contributor- December 26, 2024

Cypress is a front-end testing tool construct for the mod web. It provides solutions for end-to-end examination, factor testing, accessibility examination, UI reporting, and more.

Cypress can test anything that run in a browser. Behind Cypress is a Node server process. Cypress and the Node process constantly communicate, synchronize, and perform tasks on behalf of each former.

Access to both part (front and rearwards) allows you to reply to your application & rsquo; s events in real-time while working outside the browser for labor need higher prerogative.

What is Cypress-Children ()?

The methodchildren () in Cypressis used to get the fry factor present in the particular parent element.

For example, you may have a list element/table element and require to interact with its child elements.

Now, with the assistance of the children () method, you can interact with the other nested elements inside the parent element. This method gets the tyke of each DOM element within a set of DOM elements.

Syntax of Cypress-Children ()

The Cypress method child () has the syntax which look as below,

cy.get (parentSelector) .children (childSelector, selection) & nbsp;

• The childSelectoris optional, but theparentSelectorshould be present to extract its nested elements.
• The options are also not mandatory, and two options can be contribute.
• The children ()method can not be used independently (i.e., cy.children ()) and should e'er be chain aftercy.get() or cy.find().
• The children ()method can so be chained with former methods like .eq (), .each (), .should (), etc.
• You can chain the children () method with any former relevant Cypress bidding, but avoid chaining it in logically incorrect ways.

Arguments with Cypress-Children ()

The children () method in Cypress has two options: log and timeout.

Use cases of Cypress-Children ()

Below are the key use cases of cypress childre:

• Validating the child element enumeration: To verify the page & rsquo; s structure, check if a parent element has the expected number of child elements.

cy.get (selector) .children () .should (& lsquo; have.length & rsquo; ,8)

• Iterate through the child factor: When you want to perform actions on various child ingredient directly nestle within a particular parent factor, like selecting multiple items from a dropdown menu or clicking on multiple links within a piloting bar.
• Testing complex nested constituent: When dealing with deeply nested elements, .children () can be combined with other DOM traversal method like .eq () or .first () to pinpoint specific child constituent within a complex hierarchy.

How to use Cypress-Children ()

Here is an illustration of how to occupy minor from the parent element ul.

Consider an HTML page with the below tags,

& lt; html & gt; & lt; /html & gt;



& lt; body & gt;



& nbsp; & lt; ul & gt;



& nbsp; & lt; li & gt; I 'm a child element 1 & lt; /li & gt;



& nbsp; & lt; li & gt; I 'm a child element 2 & lt; /li & gt;



& nbsp; & lt; /ul & gt;



& lt; /body & gt;



& lt; /html & gt;
Pro tip: Tools like SUSA can handle this autonomously — upload your app and get results without writing a single test script.

To get the two listed elements inside the parent element, you should mention the chase,

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

With the above command, you should be able to get the two nested tyke elements and validate the length of the two elements present.

Examples of utilize Cypress-Children ()

So far, what you have seen is only a demonstration. Now, you will get hands-on experience using Cypress using the nipper () method.

Validating the nipper ingredient numeration

• To validate the count of the child element, call the BrowserStack demonstration website.
• Look for the pilotage carte and formalize the count as 3.
• Execute the codification below.

describe ('template spec ', () = & gt; {



& nbsp; & nbsp; it ('test event ', () = & gt; {



& nbsp; & nbsp; //Visiting the BrowserStack demo website



cy.visit ('https: //bstackdemo.com/ ')



& nbsp; & nbsp; & nbsp; & nbsp; //Getting the three seafaring bar elements and validating their counting to be three



// cy.get ('.space-x-4 ') .children () .should ('have.length',3)



})



& nbsp; & nbsp;})

Iterate through the tyke element: There may be a scenario in which you should iterate through each element and find out its text.

Take a look at the code below to iterate through the navigation bar child element of the BrowserStack demo website.

describe ('template spec ', () = & gt; {



& nbsp; & nbsp; it ('test case ', () = & gt; {



cy.visit ('https: //bstackdemo.com/ ')



& nbsp; & nbsp; & nbsp; & nbsp; //Iterating through child element and looking for the constituent with schoolbook as Orders



cy.get ('.space-x-4 ') .children () .each (($ element) = & gt; {



  if ($ element.text () == `` Orders '')



  {



& nbsp; & nbsp; cy.log (`` Element found '')



  }



})



})



& nbsp; & nbsp;})

Testing complex nested component: When you get complex nested constituent, you must click the component with indicant as 1.

For such scenario likewise, you can combine with former method and snap the various constituent like below code,

describe ('template spec ', () = & gt; {



& nbsp; & nbsp; it ('test case ', () = & gt; {



cy.visit ('https: //bstackdemo.com/ ')



// snap the maiden element from the list of the navigation menu



cy.get ('.space-x-4 ') .children () .eq (1) .click ()



})



& nbsp; & nbsp;})

Common errors while using Cypress-Children ()

Below are some common errors while using Cypress tyke:

• Always ensure that the selector you are using to apply the children () method is correct. If you have any issues, use Cypress Selector Playground.
• The children () method can select only the unmediated children elements.
• Make sure to club the children () method with the get () method, as it can not be forthwith used with the cy command.

Best Practices for Cypress-Children ()

Here are some better practices for using Cypress-Children:

• If the child element is visible after some time, use

cy.get () .should ('be.visible ') .children ()

• Correctly chain minor () with former Cypress commands like .each () to iterate through the child elements and execute action on them.
• Not chaining children () correctly with other Cypress commands like .should () or .each () can lead to fault if you try to perform actions on the nipper without first selecting them properly.

Run Cypress tests on Real Browsers and Devices with BrowserStack

and nomadic applications on real devices and browsers ensures a seamless user experience, platform compatibility, and reliable real-world performance. BrowserStack furnish a racy platform with access to 3,500+ real device and browsers for comprehensive examination.

• BrowserStack Automatelets you examine native and hybrid apps on respective mobile and tablet devices housed in secure data centers.
• Run Cypress tests across an extensive list of browser and device, with support for CI integration and to streamline workflow.
• Testing on real devices and browsers helps insure undifferentiated application demeanor and validates its execution and security under.

Talk to an Expert

Conclusion

The shaver () command in Cypress is a powerful tool for navigating and asserting the immediate child elements of a parent in the DOM. It allows you to directly filter and interact with specific child elements, providing best control and preciseness in your exam.

Use children () when you focus on immediate fry, and think to mark it from discovery () when deeper traverse is expect. This see clarity and truth in your test script, enhance overall test maintainability.

Utile Resources for Cypress

Understanding Cypress

Use Cases

Tool Comparisons