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.