Unable to select option from dropdown using nightwatch js

Question

I have seen some other posts using below format but it did not work at all, even the select is not opening:

.click(".selectpicker option[value='somevalue']")

But when I wrote like this:

.click("select[id='chooseone']")

it did open the dropdown.

This is how select looks like:

<select class="selectpicker btn dropdown-toggle btn-default" title="Choose one of the following..." id="chooseone" style="">
<option value="chooseone" style="">Choose one</option>
<option value="value1" style="">option 1</option>
<option value="value2" style="">option 2</option>
<option value="value3">option 3</option>
</select>

There is react code in backend, so an onchange event is fired which will display appropriate input field per option and a submit button.

My test is basically:

select an option
fill fields
submit
validate result container

How should I write this code? This is my first time in such thing. Any help is appreciated.

Thanks

UPDATE >>>

This was in Safari and it did not work. But when I installed chromedriver, it did work. Here is the working code:

.click('select[id="searchBySelect"] option[value="any_option_value"]')

This will click the provided option in the select element.

Are you just trying to click a specific option or do you want it to be random? — tehbeardedone, Apr 02 '18 at 13:09

score 1 · Answer 1 · answered Apr 02 '18 at 13:55

First you need to open the dropdown menu. It looks like you already know this but in any case you would start with:

browser.click('.selectpicker');

Then there are a couple of ways you can get the option you want to click. You can choose a specific option by doing something like this (just modify it to select whichever option you want)

browser.element('css selector', '.selectpicker', function(element) {
  browser.elementIdElement(element.value.ELEMENT, 'css selector', 'option[value="value1"]', function(option) {
    browser.elementIdClick(option.ELEMENT);
  });
});

Or you could get all of the options in an array and click on one of them this way:

browser.elements('css selector', 'option', function(elements) {
  browser.elementIdClick(elements.value[0].ELEMENT); //can use any index here as long as you know which one you are looking for
});

Thanks for your solution @tehbeardedone. But the problem was in safari that I was using, in chrome, it just ran so smoothly that I realized I wasted 2-3 hours of my life. — xploreraj, Apr 03 '18 at 10:11

score 0 · Answer 2 · answered Apr 24 '21 at 08:03

0

tehbeardedone thanks so much for providing your solution. I had to do a small fix to get the elementIdClick() working.

Instead of option.ELEMENT

I had to use option.value.ELEMENT

Since my code snippet had to be added to a page object, this is its final version:

let durationOptionSelector = `option[contains(text(), "${duration}")]`;  //dynamic option selector

this.click("@duration_dropdown");

this.api.element("xpath", "@duration_dropdown", function (dropdown) {
  this.elementIdElement(dropdown.value.ELEMENT, "xpath", durationOptionSelector, function(option) {
    this.elementIdClick(option.value.ELEMENT);
  });
});

answered Apr 24 '21 at 08:03

tmaqa

1
1

Thanks for your contribution to Stack Overflow, tmaqa! For such minor changes consider adding a comment to the original answer. This way you can engage with the author and perhaps improve the existing (good) answer! – Seoester Apr 24 '21 at 11:20
I was not able to add a comment since i don’t have enough reputation points yet. – tmaqa Apr 26 '21 at 19:21

Unable to select option from dropdown using nightwatch js

2 Answers2