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.

Practice

1. What does the .find() command do in Cypress testing?

easy

A. It clicks on an element.

B. It types text into an input field.

C. It waits for a page to load.

D. It locates child elements inside a parent element.

Solution

1. Step 1: Understand the purpose of .find()

   The .find() command is used to search for elements inside another element, meaning it looks for child elements.

2. Step 2: Compare with other commands

   Commands like .click(), .type(), and .wait() perform actions or wait, but do not locate child elements.

3. Final Answer:

   It locates child elements inside a parent element. -> Option D

4. Quick Check:

   .find() locates children = B [OK]

Hint: Remember: .find() searches inside a parent element [OK]

Common Mistakes:

• Confusing .find() with .click() or .type()
• Thinking .find() waits for elements
• Using .find() without a parent element

2. Which of the following is the correct syntax to find a button inside a div with class container using Cypress?

easy

A. cy.get('.container').find('button')

B. cy.find('.container').get('button')

C. cy.get('button').find('.container')

D. cy.find('button').get('.container')

Solution

1. Step 1: Understand chaining commands in Cypress

   First, cy.get() selects the parent element. Then, .find() locates child elements inside it.

2. Step 2: Analyze each option

   cy.get('.container').find('button') correctly uses cy.get('.container') to select the parent, then .find('button') to find the child button. Other options misuse the order or commands.

3. Final Answer:

   cy.get('.container').find('button') -> Option A

4. Quick Check:

   Parent first with get(), then child with find() = A [OK]

Hint: Use cy.get() first, then .find() for child elements [OK]

Common Mistakes:

• Swapping .get() and .find() order
• Using .find() without cy.get() first
• Selecting child before parent

3. What will the following Cypress code select?

cy.get('ul.menu').find('li.active').should('have.length', 2)

medium

A. It selects all li elements inside ul.menu with class active and checks there are 2.

B. It selects 2 ul elements with class menu.

C. It clicks on the first li.active element.

D. It types '2' into the ul.menu element.

Solution

1. Step 1: Understand the selector chain

   cy.get('ul.menu') selects the ul element with class menu. Then .find('li.active') finds li children with class active.

2. Step 2: Understand the assertion

   .should('have.length', 2) asserts that exactly 2 such li.active elements exist inside the ul.menu.

3. Final Answer:

   It selects all li elements inside ul.menu with class active and checks there are 2. -> Option A

4. Quick Check:

   Find children with class and check count = A [OK]

Hint: Find children, then assert count with .should('have.length') [OK]

Common Mistakes:

• Confusing parent and child selectors
• Thinking it clicks or types instead of asserting
• Misreading the assertion purpose

4. Identify the error in this Cypress code snippet:

cy.find('.list').get('li').should('have.length', 3)

medium

A. There is no error; the code is correct.

B. The selector '.list' is invalid.

C. The order of commands is incorrect; .get() should come before .find().

D. The assertion .should('have.length', 3) is not valid.

Solution

1. Step 1: Check command order

   cy.find() is not a valid starting command. cy.get() must be used first to select the parent element.

2. Step 2: Correct usage

   The correct order is cy.get('.list').find('li') to find li children inside the element with class list.

3. Final Answer:

   The order of commands is incorrect; .get() should come before .find(). -> Option C

4. Quick Check:

   Use cy.get() first, then .find() = D [OK]

Hint: Always start with cy.get() before .find() [OK]

Common Mistakes:

• Starting with .find() instead of cy.get()
• Assuming .find() works alone
• Ignoring command chaining rules

5. You want to verify that a form with id login contains exactly 3 input fields that are visible. Which Cypress code correctly uses child commands to do this?

hard

A. cy.find('#login').get('input:visible').should('have.length', 3)

B. cy.get('#login').find('input:visible').should('have.length', 3)

C. cy.get('#login').find('input').should('have.length', 3).and('be.visible')

D. cy.get('input:visible').find('#login').should('have.length', 3)

Solution

1. Step 1: Select the parent form element

   Use cy.get('#login') to select the form with id 'login'.

2. Step 2: Find visible input children and assert count

   Use .find('input:visible') to get visible input fields inside the form, then assert there are exactly 3 with .should('have.length', 3).

3. Final Answer:

   cy.get('#login').find('input:visible').should('have.length', 3) -> Option B

4. Quick Check:

   Parent get(), then find visible inputs, then check length = C [OK]

Hint: Chain get() then find(':visible') before asserting length [OK]

Common Mistakes:

• Using .find() before cy.get()
• Checking visibility after length assertion
• Incorrect selector order