cy.first(), cy.last(), cy.eq() in Cypress - Test Execution Trace

Test Overview

This test checks that the cy.first(), cy.last(), and cy.eq() commands correctly select the first, last, and a specific element from a list on a webpage. It verifies the text content of these selected elements.

Test Code - Cypress

Cypress

describe('Test cy.first(), cy.last(), and cy.eq()', () => {
  beforeEach(() => {
    cy.visit('https://example.cypress.io/commands/actions')
  })

  it('selects first, last, and eq elements correctly', () => {
    // Select all buttons in the .action-buttons container
    cy.get('.action-buttons > button').as('buttons')

    // Check the first button text
    cy.get('@buttons').first().should('have.text', 'Action')

    // Check the last button text
    cy.get('@buttons').last().should('have.text', 'Disabled')

    // Check the third button text (index 2)
    cy.get('@buttons').eq(2).should('have.text', 'Right')
  })
})

Execution Trace - 7 Steps

Step	Action	System State	Assertion	Result
1	Test starts	Test runner initialized, Cypress ready	—	PASS
2	Browser opens and navigates to 'https://example.cypress.io/commands/actions'	Page with action buttons loaded	Page URL is correct	PASS
3	Find all buttons inside '.action-buttons' container and alias as 'buttons'	Multiple button elements found	Number of buttons > 0	PASS
4	Select first button using cy.first() and check its text is 'Action'	First button element selected	Button text equals 'Action'	PASS
5	Select last button using cy.last() and check its text is 'Disabled'	Last button element selected	Button text equals 'Disabled'	PASS
6	Select third button using cy.eq(2) and check its text is 'Right'	Third button element selected	Button text equals 'Right'	PASS
7	Test ends	All assertions passed	—	PASS

Failure Scenario

Failing Condition: If the selector '.action-buttons > button' does not find the expected buttons or the text assertions fail

Execution Trace Quiz - 3 Questions

Which command selects the very first button element in the list?

A cy.first()

B cy.last()

C cy.eq(0)

D cy.get()

Key Result

Use cy.first(), cy.last(), and cy.eq() to select specific elements from a group. Always verify the selected element's content to ensure correct selection.

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