Child commands in Cypress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this Cypress test snippet?

Consider the following Cypress test code that uses child commands to find elements inside a parent container. What will be the text content of the element found by cy.get('.parent').children('.child').invoke('text')?

Cypress

describe('Child commands test', () => {
  it('checks child element text', () => {
    cy.document().then(doc => {
      const parent = doc.createElement('div');
      parent.className = 'parent';
      const child1 = doc.createElement('span');
      child1.className = 'child';
      child1.textContent = 'Hello';
      const child2 = doc.createElement('span');
      child2.className = 'child';
      child2.textContent = 'World';
      parent.appendChild(child1);
      parent.appendChild(child2);
      doc.body.appendChild(parent);
    });
    cy.get('.parent').children('.child').invoke('text').then(text => {
      cy.wrap(text).as('childText');
    });
    cy.get('@childText').should('equal', 'HelloWorld');
  });
});

A "Hello World"

B "Hello"

C "World"

D "HelloWorld"

💡 Hint

The children() command returns all direct children matching the selector, and invoke('text') concatenates their text contents.

The children('.child') selects both span elements with class 'child'. The invoke('text') command concatenates their text content, resulting in 'HelloWorld' without spaces.

❓ assertion

intermediate

Which assertion correctly verifies the number of child elements?

Given a parent element with multiple child elements, which Cypress assertion correctly checks that the parent has exactly 3 children with class item?

Cypress

cy.get('.parent').children('.item')

A .should('have.length', 3)

B .should('contain.length', 3)

C .should('have.lengthOf', 3)

D .should('have.count', 3)

💡 Hint

Check the official Cypress assertion syntax for checking the number of elements.

The correct assertion to check the number of elements is should('have.length', 3). Other options are invalid or do not exist in Cypress.

🔧 Debug

advanced

Why does this Cypress child command test fail?

This test tries to find a child element and check its text, but it fails with a timeout error. What is the most likely cause?

Cypress

cy.get('.container').children('.child').should('have.text', 'Submit');

A The child element does not exist inside '.container' at test time.

B The 'children' command only works with direct children, but the element is nested deeper.

C The 'should' assertion is used incorrectly; it should be 'expect'.

D The selector '.child' is invalid syntax causing a failure.

💡 Hint

Consider how the 'children' command works compared to 'find'.

The 'children' command only selects direct children. If the target element is nested deeper (grandchild or further), 'children' won't find it, causing the test to fail.

❓ framework

advanced

Which Cypress command chain correctly waits for child elements before asserting?

You want to wait until the parent has at least 2 children with class option before asserting their count. Which command chain achieves this reliably?

A cy.get('.parent').children('.option').should('have.length.at.least', 2)

B cy.get('.parent').children('.option').should('have.length.gte', 2)

C cy.get('.parent').children('.option').should('have.length', 2)

D cy.get('.parent').children('.option').should('have.length.above', 2)

💡 Hint

Check Cypress assertion chaining for length comparisons.

The correct syntax to assert at least 2 elements is should('have.length.at.least', 2). Other options are invalid or check for exact or wrong comparisons.

🧠 Conceptual

expert

Why prefer children() over find() in certain Cypress tests?

Which statement best explains when using children() is more appropriate than find() in Cypress tests?

A <code>children()</code> automatically retries until elements appear, but <code>find()</code> does not.

B <code>children()</code> selects all descendants, making it more comprehensive than <code>find()</code>.

C <code>children()</code> is faster and only selects direct children, ensuring precise scope and avoiding unintended nested matches.

D <code>children()</code> can select elements outside the parent, while <code>find()</code> is limited to inside.

💡 Hint

Think about the difference between direct children and all descendants in DOM traversal.

children() selects only direct children, which helps target elements precisely and avoid false positives from nested descendants. It is also generally faster due to limited scope.