how to select a dropdown value in selenium webdriver using node.js

Question

I have following HTML structure:

<button class="dropdown-toggle selectpicker btn btn-primary" data-toggle="dropdown" type="button" data-id="strategic_reseller_country" title="United States">
<div class="dropdown-menu open" style="max-height: 245.6px; overflow: hidden; min-height: 40px;">
   <ul class="dropdown-menu inner selectpicker" role="menu" style="max-height: 243.6px; overflow-y: auto; min-height: 38px;">
      <li class="" rel="0">
         <a class="" style="" tabindex="0">
         <span class="text"/>
         <i class="glyphicon glyphicon-ok icon-ok check-mark"/>
         </a>
      </li>
      <li rel="1">
         <a class="" style="" tabindex="0">
         <span class="text">Andorra</span>
         <i class="glyphicon glyphicon-ok icon-ok check-mark"/>
         </a>
      </li>
      <li rel="2">
         <a class="" style="" tabindex="0">
         <span class="text">United Arab Emirates</span>
         <i class="glyphicon glyphicon-ok icon-ok check-mark"/>
         </a>
      </li>
      <li rel="3">
         <a class="" style="" tabindex="0">
         <span class="text">Afghanistan</span>
         <i class="glyphicon glyphicon-ok icon-ok check-mark"/>
         </a>
      </li>
      <li rel="4">
      <li rel="5">
      <li rel="6">
      <li rel="7">
      <li rel="8">
      <li rel="9">
         <a class="" style="" tabindex="0">
         <span class="text">Netherlands Antilles</span>
         <i class="glyphicon glyphicon-ok icon-ok check-mark"/>
         </a>
      </li>
   </ul>
</div>

So how could I get the item from list?

I am new to Node.Js (JavaScript) so I don't know how to achieve it in node.Js but it can be achieved in java as follows :

Select dropdown = new Select(driver.findElement(By.class("dropdown-menu inner selectpicker"))); 
dropdown.selectByVisibleText("Andorra");

Answer 1

You can create a function that select the value you desire

like this...

driver.wait(
    until.elementLocated(By.id("continents")), 20000
).then(element => {
    selectByVisibleText(element, "Africa")
});

function selectByVisibleText(select, textDesired) {
    select.findElements(By.tagName('option'))
    .then(options => {
        options.map(option => {
            option.getText().then(text => {
                if (text == textDesired)
                    option.click();
            });
        });
    });
}

Answer 2

For anyone stuck on this, here is how I did it for a <select> option:

<select id='mySelection'>
   <option value='0'>Hello</option>
   <option value='1'>Everybody</option>
   <option value='2'>Got</option>
   <option value='3'>It</option>
</select>

In Selenium for NodeJS, you would grab the It <option>:

var webdriver = require('selenium-webdriver');

var driver = new webdriver.Builder().
   withCapabilities(webdriver.Capabilities.chrome()).
   build();


driver.findElement(webdriver.By.id('mySelection')).sendKeys('It');

When you .sendKeys() for the option it has to equal the text displayed to the user in the dropdown.

In your case just grab the parent element then sendKeys() for the child element.

Answer 3

Just click the desired option.

driver.findElement(webdriver.By.css('#mySelection > option:nth-child(4)'))
    .click();

or by value

driver.findElement(webdriver.By.css('#mySelection > option[value=apple]'))
    .click();

Note that I've changed your 'By' to a css selector. I'm lazy and like to just drill into the option from developer tools and select Copy CSS Path (chrome) or Copy Unique Selector (firefox).

Answer 4

I would use Cheerio for this.

module.exports = {
    "login": function (browser) {
        var cheerio = require("cheerio")

        browser
            .url("http://www.wikipedia.org")
            .waitForElementVisible('body', 1000)
            .waitForElementVisible('select#searchLanguage', 1000)
            .source(function(result) { // .source() dump the page source in the variable
                $ = cheerio.load(result.value)
                var num_languages = $('select#searchLanguage option').length
                console.log('Wikipedia.org Languages: ' + num_languages);
            })
            .end();
    }
};

or simply using the .execute() command

Answer 5

If you have

<select id='mySelection'>
   <option value='cat'>Cat!</option>
   <option value='dog'>Dog!</option>
   <option value='rat'>Rat!</option>
</select>

You can use the method sendKeys passing either the value or the text

driver.findElement(webdriver.By.id('mySelection')).sendKeys('Rat!');

or

driver.findElement(webdriver.By.id('mySelection')).sendKeys('rat');