Length assertions in Cypress - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does a length assertion check in Cypress?

It checks how many elements match a selector or how many items are in a list or array on the page.

beginner

How do you write a length assertion in Cypress to check if a list has exactly 3 items?

Use cy.get('selector').should('have.length', 3) to check the list has 3 elements.

intermediate

Why is it better to use length assertions instead of checking text content for counting elements?

Length assertions directly check the number of elements, making tests clearer and less fragile than relying on text content.

beginner

What happens if the length assertion fails in Cypress?

The test fails and Cypress shows an error message explaining the expected and actual number of elements found.

intermediate

Can length assertions be combined with other assertions in Cypress?

Yes, you can chain length assertions with others like should('be.visible') to check both count and visibility.

Which Cypress command checks if a list has exactly 5 items?

A cy.get('ul > li').should('contain', 5)

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

C cy.get('ul > li').should('have.text', 5)

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

The correct syntax to check the number of elements is should('have.length', number).

What does cy.get('.items').should('have.length.greaterThan', 2) check?

A There are more than 2 items

B There are exactly 2 items

C There are less than 2 items

D The length property equals 2

The assertion checks that the number of matched elements is greater than 2.

If a length assertion fails, what will Cypress do?

A Automatically fix the test

B Ignore the failure and continue

C Retry the assertion until timeout then fail the test

D Skip the test

Cypress retries assertions until they pass or timeout, then fails the test if the condition is not met.

Which is a valid way to assert a list has at least 1 element in Cypress?

A cy.get('li').should('have.length.greaterThan', 0)

B cy.get('li').should('have.length.gte', 1)

C cy.get('li').should('have.length.above', 0)

D cy.get('li').should('have.length.at.least', 1)

Cypress supports have.length.greaterThan to check length is more than a value.

Why might you prefer should('have.length', n) over counting elements manually?

A It is slower but more accurate

B It requires extra code

C It only works for visible elements

D It is simpler and built-in for element count checks

Using should('have.length', n) is simple and directly checks element count without extra code.

Explain how to use length assertions in Cypress and why they are useful.

Think about counting items on a webpage.

Describe what happens when a length assertion fails during a Cypress test run.

Consider Cypress's retry behavior and reporting.

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