Length assertions in Cypress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ assertion

intermediate

Verify element count with correct length assertion

You want to check that a list on the page has exactly 5 items using Cypress. Which assertion correctly verifies this?

Cypress

cy.get('.item-list > li').should('have.length', 5);

A cy.get('.item-list > li').should('have.length', 5);

B cy.get('.item-list > li').should('have.length.greaterThan', 5);

C cy.get('.item-list > li').should('length', 5);

D cy.get('.item-list > li').should('have.lengthOf', 5);

💡 Hint

Use the correct Cypress assertion syntax for exact length checks.

Option A uses the correct Cypress assertion have.length to check the exact number of elements. Option A checks for greater than 5, which is not exact. Option A uses an invalid assertion name. Option A uses a non-existent assertion.

❓ Predict Output

intermediate

Output of length assertion failure message

What will Cypress output if the following code runs but the page has only 3 items instead of 5?

Cypress

cy.get('.todo-item').should('have.length', 5);

A Test passes silently with no errors

B AssertionError: expected 3 to equal 5

C SyntaxError: unexpected token 'length'

D TypeError: cannot read property 'length' of undefined

💡 Hint

Think about what happens when the actual count does not match the expected count.

Cypress throws an AssertionError when the actual number of elements does not match the expected length. It reports the actual and expected values.

❓ locator

advanced

Best locator for length assertion on dynamic list

You want to assert the length of a dynamic list where items have a class that changes but all share a data attribute data-test='list-item'. Which locator is best for stable length assertions?

A cy.get('[data-test="list-item"]').should('have.length', 4);

B cy.get('.dynamic-class').should('have.length', 4);

C cy.get('li').should('have.length', 4);

D cy.get('#list > div').should('have.length', 4);

💡 Hint

Use stable attributes that do not change dynamically.

Option A uses a stable data attribute selector which is less likely to break if classes change. Other options rely on classes or tags that may be unstable or too broad.

🔧 Debug

advanced

Debug failing length assertion in Cypress test

A test fails with this code:
cy.get('.menu-item').should('have.length', 3);
The error says actual length is 2. What is the most likely cause?

A Cypress cannot find elements because the page is not loaded.

B The assertion syntax is incorrect and causes a silent failure.

C The page has only 2 elements with class 'menu-item' at test time.

D The selector '.menu-item' is invalid and matches no elements.

💡 Hint

Check the actual number of elements on the page when the test runs.

The error indicates the selector found 2 elements, but the test expects 3. This usually means the page content does not have the expected number of elements at test time.

❓ framework

expert

Using length assertion with chained commands in Cypress

Consider this Cypress code:
cy.get('.container').find('.card').should('have.length', 4);
What does this assertion verify?

A It checks that there are 4 '.container' elements and 4 '.card' elements separately.

B It checks that inside each '.container' element there are 4 '.card' elements.

C It checks that there are 4 '.container' elements, each containing at least one '.card'.

D It checks that the total number of '.card' elements inside all '.container' elements combined is 4.

💡 Hint

Remember how Cypress chains commands and aggregates matched elements.

The find() command searches within all matched '.container' elements and returns all '.card' elements found. The assertion checks the total count of these '.card' elements combined.

Practice

1. What does the Cypress command cy.get('.item').should('have.length', 3) check on a webpage?

easy

A. It verifies that the page has 3 different classes including 'item'.

B. It checks that the text length of '.item' elements is 3 characters.

C. It checks that there are exactly 3 elements with class 'item' on the page.

D. It waits for 3 seconds before continuing the test.

Solution

1. Step 1: Understand cy.get() usage

   cy.get('.item') selects all elements with the class 'item' on the page.

2. Step 2: Understand should('have.length', 3) assertion

   This assertion checks that the number of selected elements is exactly 3.

3. Final Answer:

   It checks that there are exactly 3 elements with class 'item' on the page. -> Option C

4. Quick Check:

   Length assertion = count of elements [OK]

Hint: Length assertions check element count, not text length [OK]

Common Mistakes:

• Confusing element count with text length
• Thinking it checks class names count
• Assuming it waits or delays

2. Which of the following is the correct Cypress syntax to assert that a list has exactly 5 items?

easy

A. cy.get('ul li').expect('length', 5)

B. cy.get('ul li').should('length', 5)

C. cy.get('ul li').assert('have.length', 5)

D. cy.get('ul li').should('have.length', 5)

Solution

1. Step 1: Recall correct assertion syntax

   The correct Cypress assertion to check length is should('have.length', number).

2. Step 2: Check each option

   cy.get('ul li').should('length', 5) misses 'have.'; cy.get('ul li').assert('have.length', 5) uses 'assert' which is not Cypress syntax; cy.get('ul li').expect('length', 5) uses 'expect' incorrectly. Only cy.get('ul li').should('have.length', 5) uses correct syntax.

3. Final Answer:

   cy.get('ul li').should('have.length', 5) -> Option D

4. Quick Check:

   Use should('have.length', number) for length checks [OK]

Hint: Use should('have.length', number) for length assertions [OK]

Common Mistakes:

• Omitting 'have.' in assertion
• Using 'assert' or 'expect' incorrectly
• Confusing length with text assertions

3. Consider this Cypress code snippet:

cy.get('.todo-item').should('have.length', 4)
cy.get('.todo-item').eq(0).should('contain.text', 'Buy milk')

What will happen if the page has only 3 elements with class todo-item?

medium

A. The first assertion fails, stopping the test; second assertion is not run.

B. Both assertions pass because the second does not depend on length.

C. The test passes but logs a warning about length mismatch.

D. The second assertion fails but the first passes.

Solution

1. Step 1: Analyze first assertion

   The first assertion expects 4 elements with class 'todo-item'. If only 3 exist, this assertion fails.

2. Step 2: Understand test flow on failure

   When an assertion fails, Cypress stops the test immediately, so the second assertion is not executed.

3. Final Answer:

   The first assertion fails, stopping the test; second assertion is not run. -> Option A

4. Quick Check:

   Failed assertion stops test execution [OK]

Hint: Failed assertions stop test; later checks won't run [OK]

Common Mistakes:

• Assuming all assertions run despite failure
• Thinking warnings allow test to pass
• Confusing element count with content check

4. You wrote this Cypress test:

cy.get('.card').should('have.length', 5)

But the test fails even though the page shows 5 cards. What is the most likely reason?

medium

A. The assertion syntax is wrong; should use 'have.lengthOf' instead.

B. The selector '.card' is incorrect or does not match all cards.

C. Cypress cannot count elements; it only checks visibility.

D. The page needs a manual refresh before running the test.

Solution

1. Step 1: Verify selector correctness

   If the page visually shows 5 cards but the test fails, the selector '.card' might not match all card elements.

2. Step 2: Check assertion syntax and Cypress behavior

   The syntax should('have.length', 5) is correct. Cypress counts elements matching the selector, so counting works. Manual refresh is not needed.

3. Final Answer:

   The selector '.card' is incorrect or does not match all cards. -> Option B

4. Quick Check:

   Selector must match all elements to count correctly [OK]

Hint: Check your selector matches all elements before asserting length [OK]

Common Mistakes:

• Using wrong or incomplete selectors
• Misunderstanding assertion syntax
• Assuming Cypress needs page refresh

5. You want to test a dynamic list where items can be added or removed. Which Cypress code correctly asserts that the list has at least 2 items but no more than 5 items?

hard

A. cy.get('.list-item').should('have.length.gte', 2).and('have.length.lte', 5)

B. cy.get('.list-item').should('have.length', 2, 5)

C. cy.get('.list-item').should('have.length').within(2, 5)

D. cy.get('.list-item').should('have.lengthBetween', 2, 5)

Solution

1. Step 1: Understand Cypress length assertions

   Cypress supports chaining assertions like should('have.length.gte', 2) for "greater than or equal" and should('have.length.lte', 5) for "less than or equal".

2. Step 2: Evaluate each option

   cy.get('.list-item').should('have.length.gte', 2).and('have.length.lte', 5) correctly chains two assertions for minimum and maximum length. Options B, C, and D use invalid or non-existent syntax.

3. Final Answer:

   cy.get('.list-item').should('have.length.gte', 2).and('have.length.lte', 5) -> Option A

4. Quick Check:

   Use chained length.gte and length.lte for range checks [OK]

Hint: Chain should('have.length.gte') and should('have.length.lte') for ranges [OK]

Common Mistakes:

• Using invalid assertion methods
• Trying to pass multiple lengths in one assertion
• Assuming 'lengthBetween' exists