Nightwatch Cannot Find/Click on Dropdown Option

Nightwatch Cannot Find/Click on Dropdown Option

The Path...

Cory got me thinking about jQuery and native DOM manipulation. Tried going that route and was successful selecting the correct option using Selenium's .execute() function:

.execute('document.getElementById("permitTypeId").options[1].selected=true')

However, it was not triggering the onchange event.

Saw this post which made me start thinking about using key-strokes and this one which suggested using arrow-keys to navigate down a <select> element to the option, then hitting enter.

...to the Solution

.click('select[id=permitTypeId]')
.keys(['\uE015', '\uE006'])

I've found that this is an issue with Firefox. Chrome and PhantomJS operate well clicking <option> tags.

Nightwatch integration test: Can't select option from select dropdown in Safari

What may work is to get visible text of the <option> you are looking for, and use it as a parameter for setValue(). This works fine for my Chrome browser:

browser
  .getText('select[name="elementName"] option.OptionClass', function(result) {
    client.setValue('select[name="elementName"]', result.value);
  })

Option 2:

You can also try to run JavaScript with execute() and set value programmatically, then fire change event on your select element:

var select = document.querySelector('select[name="elementName"]'),
    option = select.querySelector('option.OptionClass');

select.value = option.value;
select.dispatchEvent(new Event("change", { bubbles: true }));

Related Topics