cy.select() for dropdowns in Cypress - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of cy.select() in Cypress?

cy.select() is used to choose an option from a dropdown menu in a web page during automated testing.

beginner

How do you select an option by its visible text using cy.select()?

You pass the visible text of the option as a string to select(). For example: cy.get('select').select('Option Text').

intermediate

Can cy.select() select multiple options? If yes, how?

Yes, if the dropdown supports multiple selections, you can pass an array of option texts or values to select(). Example: cy.get('select').select(['Option1', 'Option2']).

beginner

What happens if you try to select an option that does not exist using cy.select()?

Cypress will fail the test and show an error because it cannot find the option in the dropdown.

intermediate

How can you verify that the correct option was selected after using cy.select()?

You can use cy.get('select').should('have.value', 'expectedValue') to check the selected option's value.

Which command selects an option with visible text 'Apple' from a dropdown in Cypress?

A cy.get('select').choose('Apple')

B cy.select('Apple')

C cy.get('select').select('Apple')

D cy.selectOption('Apple')

The correct syntax is cy.get('select').select('Apple'). The select() method is called on the dropdown element.

How do you select multiple options 'Red' and 'Blue' from a multi-select dropdown?

A cy.get('select').select('Red, Blue')

B cy.get('select').choose(['Red', 'Blue'])

C cy.get('select').select('Red').select('Blue')

D cy.get('select').select(['Red', 'Blue'])

Pass an array of option texts to select() for multiple selections: select(['Red', 'Blue']).

What will happen if you try to select an option that is not in the dropdown?

A Cypress will throw an error and fail the test

B The test will pass silently

C The dropdown will select the first option

D The test will skip the selection

Cypress fails the test because it cannot find the option to select.

Which assertion verifies the selected value in a dropdown after using cy.select()?

A cy.get('select').should('have.value', 'expectedValue')

B cy.get('select').should('contain', 'value')

C cy.get('select').should('be.visible')

D cy.get('select').should('have.text', 'expectedValue')

Use have.value to check the selected option's value attribute.

What type of HTML element does cy.select() work with?

A Buttons

B Select dropdown elements

C Input text fields

D Div containers

cy.select() works only with <select> dropdown elements.

Explain how to use cy.select() to choose an option from a dropdown and verify the selection.

Think about finding the dropdown, selecting, then checking the result.

Describe what happens if you try to select an option that does not exist in the dropdown using cy.select().

Consider how Cypress handles invalid actions.

Practice

1. What does the cy.select() command do in Cypress testing?

easy

A. It types text into an input field.

B. It selects an option from a dropdown menu.

C. It clicks a button on the page.

D. It waits for an element to appear.

Solution

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

   The cy.select() command is designed specifically to choose options from dropdown menus in Cypress tests.

2. Step 2: Compare with other commands

   Typing text uses cy.type(), clicking uses cy.click(), and waiting uses cy.wait(). So, cy.select() is unique for dropdowns.

3. Final Answer:

   It selects an option from a dropdown menu. -> Option B

4. Quick Check:

   cy.select() = picks dropdown option [OK]

Hint: Remember: select = pick dropdown option [OK]

Common Mistakes:

• Confusing cy.select() with cy.type()
• Using cy.select() on non-dropdown elements
• Thinking cy.select() clicks buttons

2. Which of the following is the correct syntax to select an option by its visible text using cy.select()?

easy

A. cy.get('select').select('Option Text')

B. cy.get('select').selectByText('Option Text')

C. cy.select('select', 'Option Text')

D. cy.get('select').choose('Option Text')

Solution

1. Step 1: Recall the correct cy.select() syntax

   The correct way is to first get the dropdown element with cy.get(), then call .select() with the visible text as argument.

2. Step 2: Eliminate incorrect methods

   There is no selectByText() or choose() method in Cypress. Also, cy.select() is not called directly with selector and text.

3. Final Answer:

   cy.get('select').select('Option Text') -> Option A

4. Quick Check:

   Use cy.get().select(text) syntax [OK]

Hint: Always use cy.get(selector).select(value) [OK]

Common Mistakes:

• Using non-existent methods like selectByText()
• Calling cy.select() without cy.get()
• Using choose() instead of select()

3. What will be the result of this Cypress code snippet?

cy.get('#colors').select('blue').should('have.value', 'blue')

medium

A. The test will fail because 'blue' is not a valid value.

B. The dropdown will select the option with visible text 'blue' but the assertion will fail.

C. The code will throw a syntax error because of missing quotes.

D. The dropdown with id 'colors' will select the option with value 'blue' and the test will pass.

Solution

1. Step 1: Understand the select and assertion

   The code selects the option with visible text or value 'blue' from the dropdown with id 'colors'. Then it asserts the dropdown's value is 'blue'.

2. Step 2: Check for syntax and logic

   The syntax is correct with quotes. If 'blue' is a valid option value, the assertion will pass.

3. Final Answer:

   The dropdown with id 'colors' will select the option with value 'blue' and the test will pass. -> Option D

4. Quick Check:

   Select + assert value = pass if value exists [OK]

Hint: Select then assert value to confirm selection [OK]

Common Mistakes:

• Assuming visible text and value differ without checking
• Missing quotes causing syntax errors
• Ignoring assertion failure possibility

4. Identify the error in this Cypress test code:

cy.get('select#country').select(2).should('have.value', 'US')

medium

A. Using a number 2 to select by index is invalid in cy.select().

B. The selector 'select#country' is incorrect syntax.

C. The assertion should use 'have.text' instead of 'have.value'.

D. The select command must be chained after should(), not before.

Solution

1. Step 1: Check the use of select argument

   In Cypress, cy.select() accepts visible text, value, or an array of these. Selecting by index number directly (like 2) is not supported.

2. Step 2: Verify selector and assertion

   The selector select#country is valid CSS. The assertion should('have.value', 'US') is correct to check the selected value.

3. Final Answer:

   Using a number 2 to select by index is invalid in cy.select(). -> Option A

4. Quick Check:

   cy.select() does not accept index number [OK]

Hint: Select by text or value, not index number [OK]

Common Mistakes:

• Trying to select by index number directly
• Confusing have.value with have.text
• Incorrect chaining order of commands

5. You want to select multiple options from a multi-select dropdown with id 'fruits'. Which is the correct way to select 'Apple' and 'Banana' using cy.select()?

hard

A. cy.get('#fruits').select('Apple').select('Banana').should('have.value', ['Apple', 'Banana'])

B. cy.get('#fruits').select('Apple, Banana').should('have.value', 'Apple, Banana')

C. cy.get('#fruits').select(['Apple', 'Banana']).should('have.value', ['Apple', 'Banana'])

D. cy.get('#fruits').select('Apple').select('Banana').should('have.value', 'Apple, Banana')

Solution

1. Step 1: Understand multi-select usage in cy.select()

   To select multiple options, pass an array of option texts or values to cy.select().

2. Step 2: Check assertion for multiple values

   The assertion should check that the dropdown's value matches the array of selected options.

3. Step 3: Eliminate incorrect chaining and string formats

   Chaining multiple select() calls does not accumulate selections. Passing a comma-separated string selects one option matching that exact string, which is invalid.

4. Final Answer:

   cy.get('#fruits').select(['Apple', 'Banana']).should('have.value', ['Apple', 'Banana']) -> Option C

5. Quick Check:

   Use array to select multiple options [OK]

Hint: Pass array of options to select multiple [OK]

Common Mistakes:

• Passing comma-separated string instead of array
• Chaining select() calls expecting multiple selections
• Incorrect assertion for multiple values