Skip to main content
SeleniumDecoded
Back to Challenges

The Dropdown That Is Not a Select

beginner JavaScript 10 min

The Select helper throws UnexpectedTagNameException on a styled dropdown. Drive the custom widget correctly.

The Scenario

The design system replaced native selects with a styled component. The Select helper, which worked last month, now throws. The component opens a list when its trigger button is clicked and closes it when an option is chosen.

Your Task

Write a helper that selects an option by its visible text in the custom widget and verifies the selection, then use it in the test.

What Good Looks Like

  • No Select on non-select elements.
  • Searches scoped to the dropdown container (note the leading . in the XPath).
  • A wait for the option to become visible, and a verification step afterwards.

Your task

The Select helper throws UnexpectedTagNameException on a styled dropdown. Drive the custom widget correctly.

Problem Code
// HTML (abridged):
// <div class="dropdown" data-testid="country">
//   <button class="dropdown-trigger">Select country</button>
//   <ul class="dropdown-menu" hidden>
//     <li role="option">Germany</li>
//     <li role="option">United Kingdom</li>
//   </ul>
// </div>

const { Select } = require('selenium-webdriver/lib/select');

it('selects a country', async () => {
  const dropdown = await driver.findElement(By.css("[data-testid='country']"));
  // UnexpectedTagNameError: Select only works on <select> elements, not on <div>
  await new Select(dropdown).selectByVisibleText('United Kingdom');
});

Need Help?

Solution

Try to solve the challenge yourself before revealing the solution.

Back to Challenges

Lessons that cover this