WebDriverJs Select Lists in Chrome

Chromedriver/Chrome is pretty great at executing WebDriverJs scripts without taking away your focus (so you can execute them in the background whilst doing other things), the one exception I found was selecting items in a select list. I found it would do this:

Executing Select List Chrome

The select lists just appear over whatever you’re doing (on macOS).

I couldn’t find the reason why by Googling this, so I had a look at the code I wrote to select each item from a select list. One example:

driverHelper.clickWhenClickable( this.driver, By.css( 'select.phone-input__country-select' ) );
driverHelper.clickWhenClickable( this.driver, By.css( `select.phone-input__country-select option[value="${countryCode}"]` ));

The code opens the select list by clicking on it and then selects the value from the opened list.

I thought the click to open was required, but tried it without:

Clicking select list value

It turns out the first select list click isn’t necessary, and by not having it the select list doesn’t appear above other windows whilst the tests are executing.

This is a much better outcome as the tests are less intrusive on other things you’re doing.

How do you control select lists in WebDriver?

Author: Alister Scott

Alister is an Excellence Wrangler for Automattic.