cy.select() for dropdowns in Cypress - Test Execution Trace

Test Overview

This test opens a webpage with a dropdown menu, selects an option using cy.select(), and verifies the correct option is selected.

Test Code - Cypress

Cypress

describe('Dropdown selection test', () => {
  it('selects an option from the dropdown and verifies it', () => {
    cy.visit('https://example.com/dropdown')
    cy.get('#fruits').select('Banana')
    cy.get('#fruits').should('have.value', 'Banana')
  })
})

Execution Trace - 5 Steps

Step	Action	System State	Assertion	Result
1	Test starts	Test runner initialized, no browser opened yet	-	PASS
2	Browser opens and navigates to 'https://example.com/dropdown'	Browser shows the dropdown page with id 'fruits'	-	PASS
3	Finds dropdown element with id '#fruits'	Dropdown element is visible and enabled	-	PASS
4	Selects option 'Banana' from the dropdown using cy.select('Banana')	Dropdown option 'Banana' is selected	-	PASS
5	Asserts dropdown value is 'Banana' using should('have.value', 'Banana')	Dropdown value is 'Banana'	Verify dropdown value equals 'Banana'	PASS

Failure Scenario

Failing Condition: The dropdown element with id '#fruits' is not found or option 'Banana' does not exist

Execution Trace Quiz - 3 Questions

What does cy.select('Banana') do in this test?

A Types the word 'Banana' into a text box

B Clicks the dropdown but does not select any option

C Selects the option 'Banana' from the dropdown

D Verifies the dropdown is visible

Key Result

Always verify the dropdown element exists and the option to select is present before using cy.select(), and assert the selected value to confirm the selection worked.