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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s