cy.first(), cy.last(), cy.eq() in Cypress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What element does cy.first() select?

Given the following HTML:

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
</ul>

And this Cypress code:

cy.get('li').first().invoke('text')

What text will the command yield?

Cypress

cy.get('li').first().invoke('text')

A "Banana"

B "Apple"

C "Cherry"

D "AppleBananaCherry"

💡 Hint

cy.first() selects the very first element from the matched set.

cy.first() picks the first element from the list of matched elements. Here, the first <li> contains 'Apple'.

❓ Predict Output

intermediate

What element does cy.last() select?

Given the same HTML:

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
</ul>

And this Cypress code:

cy.get('li').last().invoke('text')

What text will the command yield?

Cypress

cy.get('li').last().invoke('text')

A "Cherry"

B "Banana"

C "Apple"

D "AppleBananaCherry"

💡 Hint

cy.last() picks the last element from the matched set.

cy.last() selects the last <li> element, which contains 'Cherry'.

❓ Predict Output

advanced

What element does cy.eq(1) select?

Given the same HTML:

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
</ul>

And this Cypress code:

cy.get('li').eq(1).invoke('text')

What text will the command yield?

Cypress

cy.get('li').eq(1).invoke('text')

A "Banana"

B "Apple"

C "Cherry"

D "AppleBananaCherry"

💡 Hint

cy.eq(index) selects the element at the zero-based index.

cy.eq(1) selects the second element (index 1) which contains 'Banana'.

❓ assertion

advanced

Which assertion correctly checks the text of the first item?

You want to check that the first <li> element contains the text 'Apple'. Which Cypress assertion is correct?

Cypress

cy.get('li').first()

A cy.get('li').first().should('contain.text', 'Banana')

B cy.get('li').first().should('have.value', 'Apple')

C cy.get('li').first().should('have.text', 'Apple')

D cy.get('li').first().should('have.html', 'Apple')

💡 Hint

Use 'have.text' to check exact text content.

'have.text' checks the exact text inside the element. 'contain.text' checks if text is included. 'have.value' is for input values. 'have.html' checks inner HTML.

🧠 Conceptual

expert

Why use cy.eq() instead of cy.first() or cy.last()?

Which statement best explains when to use cy.eq(index) over cy.first() or cy.last()?

A cy.eq(index) selects elements by their text content, cy.first() and cy.last() select by position.

B cy.eq(index) only works on single elements, cy.first() and cy.last() work on multiple elements.

C cy.eq(index) selects elements randomly, cy.first() and cy.last() select fixed positions.

D cy.eq(index) selects an element at any zero-based position, while cy.first() and cy.last() only select the first or last element respectively.

💡 Hint

Think about selecting elements by position.

cy.eq(index) lets you pick any element by its zero-based index. cy.first() and cy.last() only pick the first or last element.

Practice

1. What does cy.first() do in Cypress testing?

easy

A. Selects all elements matching a selector

B. Selects the last element from a group of matched elements

C. Selects the first element from a group of matched elements

D. Selects an element by its CSS class

Solution

1. Step 1: Understand the purpose of cy.first()

   cy.first() is used to pick the very first element from a list of elements found by a selector.

2. Step 2: Compare with other options

   Options A, B, and C describe different behaviors: last element, selecting by class, or selecting all elements, which are not what cy.first() does.

3. Final Answer:

   Selects the first element from a group of matched elements -> Option C

4. Quick Check:

   cy.first() = first element [OK]

Hint: Remember: first() picks the very first element [OK]

Common Mistakes:

• Confusing first() with last()
• Thinking first() selects by class or id
• Assuming first() selects all elements

2. Which of the following is the correct syntax to select the third element in a list using Cypress?

easy

A. cy.get('li').eq(2)

B. cy.get('li').eq(3)

C. cy.get('li').first(3)

D. cy.get('li').last(3)

Solution

1. Step 1: Recall zero-based indexing in eq()

   The eq() command uses zero-based index, so the third element is at index 2.

2. Step 2: Check syntax correctness

   cy.get('li').eq(2) uses eq(2) correctly. Options A, C, and D either use wrong index or invalid syntax.

3. Final Answer:

   cy.get('li').eq(2) -> Option A

4. Quick Check:

   Third element index = 2 [OK]

Hint: Remember eq() uses zero-based index, so third is eq(2) [OK]

Common Mistakes:

• Using eq(3) for the third element
• Trying to pass a number to first() or last()
• Confusing eq() with first() or last()

3. Given the following HTML:

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
  <li>Date</li>
</ul>

What text will cy.get('li').last().invoke('text') return?

medium

A. "Cherry"

B. "Apple"

C. "Banana"

D. "Date"

Solution

1. Step 1: Identify what cy.last() selects

   cy.last() picks the last element in the matched list, which is the <li> containing "Date".

2. Step 2: Understand invoke('text')

   This command extracts the text content of the selected element, so it returns "Date".

3. Final Answer:

   "Date" -> Option D

4. Quick Check:

   last() element text = "Date" [OK]

Hint: last() picks last element's text content [OK]

Common Mistakes:

• Selecting first element text instead of last
• Confusing zero-based index with last()
• Expecting eq(3) to return "Date" without zero-based indexing

4. Consider this Cypress code snippet:

cy.get('button').eq(5).click()

It throws an error: "Cannot read property 'click' of undefined". What is the most likely cause?

medium

A. There are fewer than 6 buttons on the page, so eq(5) returns undefined

B. The syntax of eq() is incorrect; it should be eq[5]

C. click() cannot be chained after eq()

D. The selector 'button' is invalid

Solution

1. Step 1: Understand eq() index and element count

   eq(5) tries to select the 6th element (index 5). If fewer than 6 buttons exist, it returns undefined.

2. Step 2: Analyze error message

   The error "Cannot read property 'click' of undefined" means the element does not exist, so click() fails.

3. Final Answer:

   There are fewer than 6 buttons on the page, so eq(5) returns undefined -> Option A

4. Quick Check:

   Index out of range = undefined element [OK]

Hint: Check element count before using eq(index) [OK]

Common Mistakes:

• Using wrong eq() syntax
• Assuming click() can't chain after eq()
• Ignoring zero-based index causing out-of-range

5. You want to click the second-to-last item in a list of elements matched by cy.get('.item'). Which Cypress command chain correctly achieves this?

hard

A. cy.get('.item').eq(cy.get('.item').its('length').then(len => len - 2)).click()

B. cy.get('.item').eq(-2).click()

C. cy.get('.item').eq(-1).click({ force: true })

D. cy.get('.item').eq(cy.get('.item').length - 2).click()

Solution

1. Step 1: Recall eq() indexing in Cypress

   Cypress eq(n) supports negative indices: eq(-1) is last, eq(-2) is second-to-last.

2. Step 2: Compare options

   Options A and B have invalid syntax passing chainables to eq(). cy.get('.item').eq(-1).click({ force: true }) uses eq(-1) for last item. cy.get('.item').eq(-2).click() correctly uses eq(-2).

3. Final Answer:

   cy.get('.item').eq(-2).click() -> Option B

4. Quick Check:

   eq(-2) = second-to-last [OK]

Hint: eq() supports negative indices: -2 for second-to-last [OK]

Common Mistakes:

• Using negative index in eq() incorrectly (e.g., -1 instead of -2)
• Trying to subtract length directly without .then()
• Passing Cypress chainable as eq() argument