CODEWITHSUNDEEP
javascriptnode.jsselenium
Pritam Maske
Pritam Maske

Reputation: 2770

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

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

Upvotes: 13

Views: 21415

Answers (5)

Jo&#227;o Pimentel Ferreira
Jo&#227;o Pimentel Ferreira

Reputation: 16312

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

Upvotes: 1

Andrew Cope
Andrew Cope

Reputation: 131

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).

Upvotes: 13

GARPdev
GARPdev

Reputation: 95

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.

Upvotes: 3

UnTalJohanPerez
UnTalJohanPerez

Reputation: 91

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

Upvotes: 9

Meetai.com
Meetai.com

Reputation: 6938

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

Upvotes: 1

Related Questions