css - Nightwatch Cannot Find/Click on Dropdown Option

Question

I'm a backpacker and a programmer, trying to use the second skill to find openings in a full campsite. Rather than crawling fro scratch, I'm using the end-to-end testing framework nightwatch.js to navigate for me.

I've hit a roadblock, because nightwatch is having difficulty finding a specific element using css selectors.

Here are the elements and page:

Here is my test code:

Previous Attempts

My test code will click on the selection box with #permitTypeId. It will see that #permitTypeId option is visible. It will not see or click on any of the options when more specific values are specified. The five .click()'s are all css selectors I've already tried. None of the options are set to display:hidden or display:none. I have also tried all of the above without the .waitForElementToBeVisible() just in-case the waiting causes the dropdown to hide.

I've successfully clicked options from different dropdown menus on this website without any problem. Just this one is causing a headache.

The tests are running with the most current Selenium server and Firefox on Mac Yosemite.

tl;dr

Nightwatch.js/Selenium won't click on something from a dropdown menu.

Answer 1

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.