Length assertions in Cypress - Build an Automation Script

Verify the number of items in a list on the webpage

Preconditions (2)

Step 1: Open the webpage URL

Step 2: Locate the list container with id 'item-list'

Step 3: Count the number of child elements with class 'list-item' inside the list container

Step 4: Verify that the count matches the expected number (5)

✅ Expected Result: The list contains exactly 5 items with class 'list-item'

Automation Requirements - Cypress

Assertions Needed:

Assert that the number of elements with class 'list-item' inside '#item-list' is 5

Best Practices:

Use cy.get() with proper selectors

Use .should('have.length', expected) for length assertion

Avoid hardcoding waits; rely on Cypress automatic waits

Use clear and maintainable selectors (id and class)

Automated Solution

Cypress

describe('Length assertions test', () => {
  it('should verify the number of list items is 5', () => {
    cy.visit('https://example.com/list-page');
    cy.get('#item-list .list-item').should('have.length', 5);
  });
});

The test opens the webpage using cy.visit(). Then it locates all elements with class list-item inside the container with id item-list using cy.get('#item-list .list-item'). The assertion .should('have.length', 5) checks that exactly 5 such elements exist. Cypress automatically waits for elements to appear, so no explicit waits are needed. Using id and class selectors ensures the test is clear and maintainable.

Common Mistakes - 3 Pitfalls

{'mistake': 'Using cy.get() with an incorrect or overly generic selector', 'why_bad': 'This can select wrong elements or multiple unrelated elements, causing flaky tests or false results.', 'correct_approach': "Use specific selectors like '#item-list .list-item' to target exactly the intended elements."}

{'mistake': "Using .should('have.length', '5') with the length as a string", 'why_bad': 'The assertion expects a number, so using a string can cause the test to fail or behave unexpectedly.', 'correct_approach': "Always pass the expected length as a number, e.g., .should('have.length', 5)."}

Adding fixed waits like cy.wait(500) before assertions

Bonus Challenge

Now add data-driven testing with 3 different expected lengths for different pages

Show Hint

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