Skip to main content

​
Overview

The Select Option step lets you choose options from dropdown menus and select elements. Whether you’re selecting countries, categories, sizes, or any dropdown value, this step handles both native HTML selects and many custom dropdown implementations.

​
When to Use Select

Use Select when you need to:
  • Choose from dropdown lists: Select countries, states, categories, or other preset options
  • Configure form settings: Pick values like sizes, colors, quantities, or priorities
  • Filter content: Select filter options in search forms or data tables
  • Set preferences: Choose user preferences or application settings from dropdowns
  • Test dynamic dropdowns: Verify options that change based on previous selections

​
How It Works

Select finds a dropdown element using a CSS selector and chooses an option by matching the visible text or the option’s value attribute. It works with standard HTML <select> elements and triggers all the same events a real user selection would - change, input, blur. The step is smart about matching: it looks for exact matches first, then tries partial matches if needed. This makes it flexible enough to work with dropdowns that have similar option names.

​
Using the Select Step

When you add a Select step, you’ll configure:

​
Finding Your Dropdown

Use the element picker to visually select the dropdown element, or enter a CSS selector directly. For HTML <select> elements, target the <select> tag itself. For custom dropdowns, you might need to target the container or trigger element.

​
Specifying the Option

Enter the option you want to select. You can use:
  • Visible text: What the user sees in the dropdown (“United States”, “Large”, “High Priority”)
  • Value attribute: The underlying value (“US”, “lg”, “high”)
  • Environment variables: {{REGION}} to select different options per environment
The step tries to match what you provide against both the visible text and value, so you can use whichever is most convenient.

​
Real-World Examples

​
Selecting a Country

Step 1: Fill
  Locator: input[name='email']
  Text: [email protected]

Step 2: Select
  Locator: select[name='country']
  Option: United States

Step 3: Click
  Locator: button[type='submit']

Step 4: Check Text
  Locator: .confirmation-message
  Expected Text: Registration complete
Why this works: Select a country from a dropdown as part of a registration form.

​
Changing Product Size

Step 1: Click
  Locator: .product-card[data-id='shirt-123']

Step 2: Select
  Locator: select[name='size']
  Option: Large

Step 3: Click
  Locator: button[data-action='add-to-cart']

Step 4: Check Text
  Locator: .cart-notification
  Expected Text: Added to cart: Large
Why this works: Select a size option before adding a product to cart.

​
Filtering Search Results

Step 1: Select
  Locator: select[name='category']
  Option: Electronics

Step 2: Select
  Locator: select[name='sort']
  Option: Price: Low to High

Step 3: Click
  Locator: button[type='submit']

Step 4: Check URL
  Pattern: ?category=electronics&sort=price_asc
Why this works: Use multiple dropdowns to filter and sort search results.

​
Environment-Specific Selection

Step 1: Navigate
  URL: {{BASE_URL}}/settings

Step 2: Select
  Locator: select[name='region']
  Option: {{USER_REGION}}

Step 3: Click
  Locator: button[data-action='save']

Step 4: Check Visibility
  Locator: .success-message
  Assertion: Is visible
Why this works: Use environment variables to select different regions in different test environments.

​
Cascading Dropdowns

Step 1: Select
  Locator: select[name='country']
  Option: United States

Step 2: Wait for Element
  Locator: select[name='state']:not([disabled])

Step 3: Select
  Locator: select[name='state']
  Option: California

Step 4: Wait for Element
  Locator: select[name='city']:not([disabled])

Step 5: Select
  Locator: select[name='city']
  Option: San Francisco
Why this works: Handle cascading dropdowns where each selection enables and populates the next dropdown.

​
Best Practices

​
Use Visible Text When Possible

  • Select by what users see: “United States” instead of “US”
  • This makes tests more readable and maintainable
  • Falls back to value matching automatically if text doesn’t match

​
Handle Dynamic Options

  • If options load dynamically, add Wait for Element first
  • For cascading dropdowns, wait for each dropdown to populate before selecting
  • Check that dropdowns aren’t disabled before attempting selection

​
Write Stable Selectors

  • Target <select> elements directly: select[name='country']
  • Use data-testid attributes: [data-testid='size-selector']
  • For custom dropdowns, work with your developers to add test IDs

​
Verify Selection Results

After selecting an option, verify the result:

​
Troubleshooting

​
Option Not Found

Symptom: Test fails saying the option doesn’t exist Solution:
  • Verify the option text matches exactly (case-sensitive by default)
  • Check that the option exists in the dropdown when the test runs
  • For dynamic dropdowns, add a wait to ensure options are loaded
  • Try using the value attribute instead of visible text
Symptom: Test can’t find the select element Solution:
  • Use the element picker to target the correct element
  • Verify you’re targeting the <select> element, not an <option>
  • For custom dropdowns, you might need to click to open them first
  • Check that the dropdown is visible and not hidden by CSS

​
Custom Dropdown Doesn’t Work

Symptom: Selection doesn’t work on custom dropdown Solution:
  • Custom dropdowns (not native <select>) might need Click to open first
  • You may need to click the option directly instead of using Select
  • Work with your developers to make custom dropdowns testable
  • Consider using AI Action for complex custom dropdowns

​
Selection Doesn’t Trigger Events

Symptom: Selecting an option doesn’t trigger expected behavior Solution:
  • Verify the dropdown has change event listeners
  • Check that the application responds to the selected value
  • Some apps need additional actions (like clicking submit) after selection
  • Test manually to confirm the dropdown works outside automation

​
Wrong Option Gets Selected

Symptom: A different option than intended is selected Solution:
  • Check for partial text matches - use more specific option text
  • Verify the dropdown doesn’t have duplicate option values
  • Ensure you’re selecting from the correct dropdown if multiple exist
  • Use exact value matching if text matching is ambiguous
  • Click - Open custom dropdowns before selection
  • Fill - For text input fields (use Select for dropdowns)
  • Wait for Element - Wait for dynamic options to load
  • Check Text - Verify selected value