CODEWITHSUNDEEP
ui-automationnightwatch.js
xploreraj
xploreraj

Reputation: 4362

Unable to select option from dropdown using nightwatch js

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:

  1. select an option
  2. fill fields
  3. submit
  4. 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.

Upvotes: 1

Views: 2557

Answers (2)

tmaqa
tmaqa

Reputation: 1

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);
  });
});

Upvotes: 0

tehbeardedone
tehbeardedone

Reputation: 2858

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
});

Upvotes: 1

Related Questions