How to Handle Hidden Elements in a Dropdown – A Quick DOM Trick

Selenium WebDriver, Playwright & Cypress

Automating dropdowns is common in test automation, but sometimes, options are hidden due to CSS properties like display: none; or visibility: hidden;. This article provides a quick DOM trick to handle hidden dropdown elements efficiently.

Step 1: Launch the Application
Open your target web application in any browser.
Navigate to the dropdown element where hidden elements exist.

Step 2: Open the DOM Inspector
Right-click on the dropdown and select Inspect (or press F12 to open).
Navigate to the Elements tab to view the DOM structure.

Step 3: 

Press Ctrl + Shift + P in DOM.
Type "Emulate a focused page" and press Enter.
This makes all elements focusable, including the hidden dropdown options.

Step 4: 
Now, create an XPath to locate the hidden dropdown item.

Step 5:

Press Ctrl + Shift + P again.
Type "Do not emulate a focused page" and press Enter.
This restores the default behavior of the page.

Do you have other automation challenges? Drop a comment below!

selenium webdriver playwright automation cypress testing hidden dropdown handling DOM manipulation test automation tricks QA automation tips selenium cypress playwright dropdown easy test automation hacks