CODEWITHSUNDEEP
cssnightwatch.js
Adam
Adam

Reputation: 2077

Nightwatch Cannot Find/Click on Dropdown Option

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:

Permit type

Here is my test code:

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.

Upvotes: 8

Views: 15643

Answers (5)

Dineshmohan
Dineshmohan

Reputation: 86

Very simple way is to use .setValue('@element', 'value of option')

Upvotes: 0

Guillaume Vincent
Guillaume Vincent

Reputation: 14811

another solution:

  .click('select[id="permitTypeId"]')
  .waitForElementVisible("option[value='1451140610']")
  .click("option[value='1451140610']")

Upvotes: 2

Gokul Muralidharan
Gokul Muralidharan

Reputation: 161

you should be able to click like this way

browser.click('select[id="permitTypeId"] option[value="1451140610"]')

Upvotes: 5

Adam
Adam

Reputation: 2077

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.

Upvotes: 9

mcsharps
mcsharps

Reputation: 71

Additionally I was able to add a .click event for the specific option once I did a .click for the select. see my example below:

.click('select[name="timezone"]') 
.pause(1000)
.click('option[value="America/Chicago"]') //selects the option but doesn't click
.pause(5000)
.keys(['\uE006']) //hits the enter key.

Upvotes: 4

Related Questions