getText() not working on a select from dropdown

Question

I have a page with a select box with various options, and I'm writing an acceptance test to check that when the page first loads, the correct option is selected. I hoped to do this using WebdriverJs but for some reason getText() is always returning an empty string.

On load, I would hope that the page looks like this:

<select class='nav-menu'>
  <option value="global" selected="selected">WORLDWIDE</option>
  <option value="us">USA</option>
  <option value="uk">UNITED KINGDOM</option>
  <option value="au">AUSTRALIA</option>
  <option value="ca">CANADA</option>
  <option value="de">GERMANY</option>
  <option value="es">SPAIN</option>
  <option value="fr">FRANCE</option>
</select>

I'm then trying to find out the value of the current selected option as follows:

browser.findElement(webdriver.By.css('.nav-menu option[selected="selected"]')).getText().then(function(selectedText){
  console.log("selectedText: " + selectedText);
  next();
});

However, this is also logging out an empty string.

Calling the JavaScript equivalent using the Chrome developer tools is returning "WORLDWIDE" - any thoughts what is wrong with this?

Answer 1

I don't use WebDriverJS, so I can't prove my theory, but I guess it's because Selenium getText() will only work for visible elements?

• Try using getAttribute("textContent")

• Try clicking on .nav-menu first, then use getText()

Answer 2

Hmm, well some playing around suggests that the CSS select was working okay, but the getText() method wasn't working.

For the moment, I've got it working use the innerHTML attribute:

browser.findElement(webdriver.By.css('.nav-menu option[selected="selected"]')).getAttribute('innerHTML').then(function(selectedText){
  console.log("selectedText: " + selectedText);
  next();
});

So CSS selector seems reliable, but I will also try out the textContent suggestion from user1177636.

Answer 3

I've found selecting 'option' elements via css + the selected attribute to be unreliable.

The following works for me:

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

var dd = driver.findElement(By.id('myId'));
dd.findElements(By.tagName('option')).then(function (options) {
    options.forEach(function(option) {
        option.isSelected().then(function(selected) {
            if (selected) {
                option.getText().then(function(text) {
                    console.log(text);
                    done(); //mocha async callback
                });
            }
        });         
    });
});

You could wrap this into a function, something like:

var wd = require('selenium-webdriver'),
    By = wd.By;

function getFirstSelected(selectList) {
    var d = wd.promise.defer();

    selectList.findElements(wd.By.tagName('option')).then(function (options) {
        options.forEach(function(option) {
            option.isSelected().then(function(isSelected) {
               if (isSelected) {
                   d.fulfill(option);
               }
            });
        });
    });

    return d.promise;
}

and use it like:

var sl = driver.findElement(wd.By.id('myId'));

getFirstSelected(sl).then(function(option) {
    option.getText().then(function(text) {
        console.log(text);
        done();
    });
});