Understanding Dropdown Types
Before practicing, it's important to identify the type of dropdown you're working with.
1. Standard HTML Dropdown
Uses the HTML <select> tag.
Example:
<select>
<option>India</option>
<option>USA</option>
</select>
Handled using Selenium's Select class.
2. Bootstrap / Custom Dropdown
Usually built with:
- div
- span
- ul
- li
There is no <select> tag.
Handled using:
- click()
- XPath
- CSS Selectors
3. Dynamic Dropdown
Options load only after:
- typing
- API response
- another dropdown selection
Usually requires explicit waits.
4. Multi-Select Dropdown
Allows selecting multiple values simultaneously.
Handled using the Select class (if it's a standard multi-select) or click actions (if it's custom).
1. Standard <select> Dropdowns (Basic Level)
These exercises are designed for beginners and focus on Selenium's Select class.
Exercise 1
Select a country using visible text.
Example:
India
Verify:
- Correct option is selected.
- UI updates correctly.
Exercise 2
Select the same country using the value attribute.
Example:
<option value="IN">India</option>
Exercise 3
Select a country using the index.
Practice:
- Index 0
- Middle index
- Last index
Observe how indexes change if options are reordered.
Exercise 4
Print every option in the dropdown.
Validate:
- Total options
- Text
- Order
Exercise 5
Count the total number of options.
Compare with business requirements.
Exercise 6
Verify the default selected option.
Many forms load with:
Select Country
or
Please Choose
Validate the default selection.
Exercise 7
Read the currently selected option.
Print it to the console.
Exercise 8
Change selection multiple times.
Example:
India
↓
USA
↓
Canada
Verify each update.
Exercise 9
Verify the dropdown is enabled.
Attempt selection only if enabled.
Exercise 10
Verify the dropdown is displayed.
Practice Goals
After these exercises you should comfortably:
- Select by text
- Select by value
- Select by index
- Read selected value
- Count options
- Validate defaults
2. Date Dropdown Practice
Many enterprise applications still use dropdowns for date selection.
Examples:
- Date of Birth
- Passport Expiry
- Insurance Start Date
- Joining Date
Exercise 1
Select:
- Day
- Month
- Year
Verify all three selections.
Exercise 2
Select today's date dynamically.
Avoid hardcoded values.
Exercise 3
Automate Date of Birth selection.
Example:
15
August
1998
Exercise 4
Validate the displayed date.
Ensure:
- Day matches
- Month matches
- Year matches
Exercise 5
Attempt an invalid date.
Example:
31 February
Observe application behavior.
Exercise 6
Reset the dropdown.
Return all values to defaults.
Exercise 7
Select the first option.
Exercise 8
Select the last option.
Useful for boundary testing.
Exercise 9
Use index logic instead of hardcoding values.
Example:
Current Month + 1
Date Testing Best Practices
Practice validating:
- Leap years
- Month boundaries
- Minimum dates
- Maximum dates
- Invalid combinations
3. Dynamic Dropdown Handling (Intermediate)
Dynamic dropdowns populate values only after:
- API calls
- User typing
- Previous selections
These require synchronization.
Exercise 1
Wait until options are populated.
Avoid:
Thread.sleep()
Use explicit waits.
Exercise 2
Select a dynamically loaded value.
Example:
Hyderabad
appears only after selecting
India
Exercise 3
Select using partial text.
Example:
Hyd
↓
Hyderabad
Exercise 4
Ignore case sensitivity.
Example:
india
↓
India
Exercise 5
Handle option text changes.
Example:
Old:
USA
New:
United States
Update the automation accordingly.
Exercise 6
Read values from test data.
Examples:
- Excel
- JSON
- Properties
- CSV
Select based on external data.
Exercise 7
Handle environment-specific values.
Example:
QA:
Customer A
Production:
Customer B
Avoid hardcoding.
Exercise 8
Select a random option.
Useful for exploratory automation.
Exclude:
Select Country
Exercise 9
Avoid hardcoded selections.
Instead:
Read values dynamically.
Exercise 10
Verify dropdown sorting.
Examples:
Alphabetical
Australia
Canada
India
USA
Ensure order is correct.
Dynamic Dropdown Real-World Scenarios
Practice these workflows:
- Country → State
- Department → Employee
- Category → Product
- Brand → Model
- City search suggestions
- Auto-complete search boxes
Common Mistakes to Avoid
Avoid these practices:
❌ Hardcoding indexes
❌ Using Thread.sleep()
❌ Assuming option order never changes
❌ Ignoring loading delays
❌ Not validating selected values
Multi-Select Dropdowns
Unlike standard dropdowns, multi-select dropdowns allow users to choose more than one option simultaneously.
Common examples include:
- Skills
- Hobbies
- Programming Languages
- User Roles
- Product Categories
- Email Recipients
- Permissions
Before automating, always verify whether the dropdown supports multiple selection.
Exercise 1
Select multiple options.
Example:
Java
Python
Selenium
Verify all three remain selected.
Exercise 2
Deselect a single option.
Example:
Initially selected:
Java
Python
Selenium
Remove:
Python
Validate:
- Java remains selected.
- Selenium remains selected.
Exercise 3
Deselect all options.
Verify:
- No option remains selected.
- Application behaves correctly.
Exercise 4
Retrieve every selected option.
Print:
Java
Python
Selenium
Exercise 5
Verify the dropdown supports multiple selection.
Practice checking:
isMultiple()
Observe the result.
Exercise 6
Select options using a loop.
Example:
Option 1
Option 2
Option 3
Automate repeated selection.
Exercise 7
Select values using an array.
Example:
["Java","Python","SQL"]
Read values dynamically.
Exercise 8
Select values using a List.
Useful in framework design.
Exercise 9
Validate the total selected count.
Expected:
3 Selected
Exercise 10
Remove one selected value.
Verify:
- Remaining selections stay intact.
- Count updates correctly.
Real-Time Multi-Select Scenarios
Practice these business workflows.
Skills Selection
Employee profile:
✓ Java
✓ Selenium
✓ SQL
Save profile.
Refresh.
Verify selections persist.
Email Recipients
Select multiple users.
Validate:
- Every recipient receives the email.
- UI displays selected users correctly.
Permission Assignment
Administrator selects:
- Read
- Write
- Delete
Verify:
- Correct permissions are stored.
- Unauthorized options remain unavailable.
Common Multi-Select Mistakes
Avoid:
❌ Assuming every dropdown supports multiple selection.
❌ Selecting duplicate values.
❌ Hardcoding indexes.
❌ Ignoring deselection validation.
5. Bootstrap / Non-Select Dropdowns (Advanced)
Modern applications rarely use HTML <select>.
Instead, they build custom dropdowns using:
- div
- span
- ul
- li
Because there is no <select> element, Selenium's Select class cannot be used.
Automation is performed using:
- click()
- XPath
- CSS Selectors
- Explicit Waits
Exercise 1
Open a Bootstrap dropdown.
Click the dropdown.
Verify:
- Options appear.
- Dropdown expands.
Exercise 2
Select an option.
Validate:
- Dropdown closes.
- Selected value appears.
Exercise 3
Handle a dropdown built using:
<ul>
<li>
</li>
</ul>
Locate:
- Parent list
- Individual items
Click the desired value.
Exercise 4
Handle a dropdown without any <select> tag.
Inspect HTML.
Determine:
- Parent container
- Option locator
Exercise 5
Handle dynamic IDs.
Example:
Today:
dropdown_12345
Tomorrow:
dropdown_67891
Build stable locators.
Exercise 6
Handle searchable dropdowns.
Example:
Type:
Hyd
↓
Select:
Hyderabad
Exercise 7
Handle scrollable dropdowns.
Scroll until the desired option becomes visible.
Then select it.
Exercise 8
Select an option that is initially hidden.
Example:
Scroll to:
Zimbabwe
Validate successful selection.
Exercise 9
Validate the selected value displayed in the UI.
Ensure:
Displayed value
=
Selected value
Exercise 10
Select values using partial text matching.
Useful when:
- Spaces differ
- Prefixes change
- Suffixes change
Searchable Dropdown Practice
Modern applications frequently use searchable dropdown libraries such as:
- Select2
- React Select
- Angular Material
- PrimeNG
- Material UI
Practice:
Type
↓
Wait
↓
Select
↓
Validate
Exercise 1
Type a search keyword.
Wait for suggestions.
Select the matching option.
Exercise 2
Handle delayed API responses.
Wait until options load.
Exercise 3
Select using keyboard.
Practice:
- Arrow Down
- Enter
Exercise 4
Search with lowercase.
Validate uppercase results.
Exercise 5
Search using partial words.
Example:
Ban
↓
Bangalore
Scrollable Dropdown Exercises
Large enterprise applications may contain thousands of values.
Practice:
- Scroll to middle values.
- Scroll to last values.
- Select dynamically loaded values.
Enterprise Dropdown Scenarios
Country → State → City
Select:
Country
↓
State loads
↓
Select State
↓
City loads
↓
Select City
Validate every step.
Department → Employee
Department:
QA
↓
Employee dropdown refreshes.
Select:
Naveed
Category → Product
Category:
Electronics
↓
Products appear.
Select:
Laptop
Validate the update.
Payment Method
Select:
Credit Card
↓
Additional fields appear.
Validate:
- Card Number
- CVV
- Expiry Date
Shipping Method
Choose:
Express
↓
Delivery estimate changes.
Verify updated information.
Common Bootstrap Dropdown Problems
Problem 1
Dropdown opens.
Immediately closes.
Practice:
- Better locators
- Stable timing
- Retry strategy
Problem 2
Dropdown never opens.
Possible reasons:
- Overlay
- Disabled state
- JavaScript failure
Investigate.
Problem 3
Wrong option selected.
Improve locator strategy.
Avoid index-based selection.
Problem 4
Dropdown rendered outside DOM hierarchy.
Common in:
React portals
Material UI
PrimeNG
Locate the popup container separately.
Problem 5
Dropdown values change after every deployment.
Avoid exact text matching.
Use stable business identifiers.
Framework-Level Exercises
These are excellent exercises for automation engineers with 3–5+ years of experience.
Exercise 1
Create a reusable method:
Select by:
- Text
- Value
- Index
Exercise 2
Create another reusable method for Bootstrap dropdowns.
Accept:
- Locator
- Option text
Exercise 3
Detect dropdown type automatically.
If:
<select>
↓
Use Select class
Else
↓
Use click-based logic.
Exercise 4
Add logging.
Example:
Selecting Country
India selected successfully
Exercise 5
Capture a screenshot whenever dropdown selection fails.
Useful for debugging CI failures.
Exercise 6
Handle dropdown selection in parallel execution.
Ensure thread-safe implementation.
Real Application Scenarios
Enterprise applications rarely have a single dropdown. Most workflows involve multiple dropdowns that depend on each other, load data dynamically, or trigger changes elsewhere in the application.
Scenario 1 – Country → State → City
One of the most common interview scenarios.
Workflow:
Country
↓
State loads dynamically
↓
City loads dynamically
Practice
- Select a country.
- Wait for the state dropdown to populate.
- Select a state.
- Wait for the city dropdown.
- Select a city.
- Validate all selected values.
Expected Result:
- Every dropdown updates correctly.
- No stale data remains after parent selection changes.
Scenario 2 – Department → Employee
Example:
Department
↓
QA
↓
Employees
↓
Naveed
Validate
- Employee list refreshes after department selection.
- Previous employee values disappear.
- Correct employee is selected.
Scenario 3 – Dropdown Populated Through an API
Modern applications often populate dropdown values from backend services.
Practice:
- Open the page.
- Wait until API data loads.
- Select a value.
- Validate successful selection.
Scenario 4 – Loading Delay
Dropdown takes several seconds to load.
Practice:
- Wait properly.
- Avoid
Thread.sleep(). - Select only after values appear.
Scenario 5 – Retry Selection
Selection occasionally fails due to timing.
Implement:
- Retry logic
- Proper waits
- Validation after selection
Scenario 6 – Dropdown Inside an iframe
Workflow:
- Switch to iframe.
- Open dropdown.
- Select value.
- Validate.
- Switch back to the default content.
Scenario 7 – Dropdown Inside a Modal Dialog
Practice:
- Open modal.
- Wait for animation.
- Handle dropdown.
- Close modal.
Scenario 8 – After Page Refresh
Select a value.
Refresh the page.
Verify:
- Default value restored
or
- Previous value retained
depending on business requirements.
Scenario 9 – Dropdown After Login
Many enterprise applications display role-specific dropdown values.
Example:
Admin:
All Departments
User:
Assigned Department Only
Validate correct options based on user role.
Scenario 10 – Checkout Flow
Example:
Shipping Method
↓
Payment Method
↓
Delivery Slot
↓
Order Summary
Validate every dropdown selection updates the checkout correctly.
7. Defect & Edge-Case Exercises
These exercises simulate production issues encountered by automation engineers.
Exercise 1 – Dropdown Does Not Open
Possible causes:
- Overlay
- JavaScript error
- Element not clickable
- Wrong locator
Debug the issue.
Exercise 2 – Wrong Value Selected
Expected:
India
Actual:
Indonesia
Validate the selected value rather than assuming success.
Exercise 3 – Selection Lost After Reload
Workflow:
- Select a value.
- Refresh.
- Validate persistence.
Exercise 4 – Disabled Dropdown
Attempt selection.
Verify:
- Selection is blocked.
- Appropriate state is displayed.
Exercise 5 – Duplicate Values
Example:
India
India
Select the correct option using additional attributes or surrounding context.
Exercise 6 – Dropdown Changes on Hover
Some applications reveal options only after hovering.
Practice:
- Hover
- Open dropdown
- Select option
Exercise 7 – Dropdown Disappears During Selection
Possible causes:
- Animation
- Auto-close
- Re-render
Implement a stable retry strategy.
Exercise 8 – Auto-Closing Dropdown
Dropdown closes immediately after opening.
Practice:
- Reopen if necessary.
- Select efficiently.
- Validate final state.
Exercise 9 – Firefox-Only Failure
Works in Chrome.
Fails in Firefox.
Investigate:
- Browser rendering
- Timing
- Driver differences
- JavaScript execution
Exercise 10 – Headless Mode Failure
Selection works in headed mode.
Fails in headless mode.
Practice debugging:
- Viewport size
- Hidden elements
- Timing issues
- Scroll behavior
8. Interview-Level Must-Do Tasks
These are common Selenium interview questions for automation engineers.
Task 1
Write a reusable utility method to select by:
- Visible text
- Value
- Index
Task 2
Handle both:
- Standard
<select> - Bootstrap dropdown
using a common framework.
Task 3
Design a reusable dropdown utility class.
Include:
- Logging
- Error handling
- Validation
- Reusable methods
Task 4
Select values based on environment.
Example:
QA:
India
Production:
USA
Read values from configuration.
Task 5
Validate dropdown values against an API response.
Ensure:
- UI values
- Backend values
match exactly.
Task 6
Read dropdown selections from Excel.
Use Apache POI.
Task 7
Run dropdown tests in parallel.
Ensure:
- Independent browser sessions
- Stable execution
Task 8
Optimize dropdown performance.
Reduce:
- Duplicate locators
- Unnecessary waits
- Repeated searches
Task 9
Implement logging.
Example:
Country selected successfully
State selected successfully
City selected successfully
Task 10
Capture a screenshot whenever dropdown selection fails.
Attach it to reports for debugging.
9. Demo Website Mapping
The following websites provide excellent practice for different dropdown types.
DemoQA – Select Menu
Best for:
- Standard dropdowns
- Multi-select dropdowns
- Select by text/value/index
- Validation exercises
Practice:
- Default selection
- Option count
- Multi-select behavior
Selenium Easy – Basic Select Dropdown
Ideal for:
- Country selection
- Date dropdowns
- Multi-select examples
Practice:
- Select class
- Deselect methods
- Selected values
ToolsQA Automation Practice Form
Best for:
- Date of Birth dropdowns
- Complete form automation
Practice:
- Day
- Month
- Year
- Validation
jQuery AZ Bootstrap Demo
Excellent for:
- Bootstrap dropdowns
- Dynamic dropdowns
Practice:
- Click-based selection
- Custom HTML structures
Select2.org
Perfect for:
- Searchable dropdowns
- Auto-complete
Practice:
- Typing
- Waiting
- Selecting
- Validation
DemoQA Modal Dialogs
Useful for:
- Dropdowns inside popups
- Waiting strategies
Selenium Easy jQuery Dropdown Search
Best for:
Country
↓
State
↓
City
dependent dropdown exercises.
End-to-End Capstone Project
Complete Practice Form Automation
Website:
DemoQA Automation Practice Form
Objective
Automate an entire registration workflow using every dropdown technique learned in this cluster.
Workflow
Launch browser.
↓
Open DemoQA Practice Form.
↓
Select:
- Date of Birth
- Day
- Month
- Year
↓
Select Country using a standard dropdown.
↓
Select multiple hobbies.
↓
Handle Bootstrap State dropdown.
↓
Handle Bootstrap City dropdown.
↓
Submit the form.
↓
Validate the confirmation dialog.
Skills Covered
This single project includes:
- Standard dropdowns
- Date dropdowns
- Multi-select
- Bootstrap dropdowns
- Dynamic dropdowns
- Validation
- Wait strategies
- End-to-end form automation
This closely resembles real enterprise automation projects.
Best Practices
When working with dropdowns in Selenium:
- Identify the dropdown type before choosing an automation strategy.
- Use the
Selectclass only for genuine HTML<select>elements. - Prefer selecting by visible text over indexes whenever practical.
- Use explicit waits for dynamic or API-driven dropdowns.
- Validate the selected value after every selection.
- Build reusable utility methods for common dropdown operations.
- Read configurable values from external sources such as properties files, JSON, or Excel instead of hardcoding them.
- Capture logs and screenshots when selection fails to simplify debugging.
- Keep dropdown interactions thread-safe when running tests in parallel.
Common Interview Questions
1. What are the three ways to select an option in a standard dropdown?
- By visible text
- By value
- By index
2. How do Bootstrap dropdowns differ from standard dropdowns?
Bootstrap dropdowns do not use the <select> tag. They are usually built with elements such as <div>, <ul>, and <li>, so Selenium's Select class cannot be used. Instead, you locate and click the elements directly.
3. How do you handle dependent dropdowns?
Select the parent value, wait for the child dropdown to populate, and then select the required child option.
4. How do you automate searchable dropdowns?
Type the search text, wait for the matching options to appear, select the required option, and verify the selected value.
5. How do you validate dropdown values?
Read the selected option from the UI and compare it with the expected value or backend/API response.