Protractor: Calling click on an option element inside a select doesn't update the model, in Firefox only

[juliemr]

Sigh.

[PascalPrecht]

@juliemr if you tell me were I have to start dig in, I can take a look at this bug (had exactly the same issue with a custom directive a while ago, maybe it's the same issue)

[glepretre]

I confirm the issue as I just encountered it too, on Firefox only.

I don't know if it's possible to make a jsfiddle using Protractor but it is quite simple to reproduce:

describe('changing option', function() {
  var select,
      option;

  beforeEach(function() {
    select = element(by.tagName('select'));
    option = element(by.css('option[value="foo"]'));
  });

  it('should change selected option', function() {

    select.click();
    option.click();

    //this test passes
    expect(select.getAttribute('value')).toEqual('foo');

    //this test fails
    expect(select.evaluate('model.selected')).toEqual('foo');
  });
});


Failures:

  1) myApp changing option should change selected option
    Message:
      Expected 'none' to equal 'foo'.

I'm not sure that is related but I found this Selenium webdriverJS issue :
https://code.google.com/p/selenium/issues/detail?id=6852

As far as I understand, it seems to be a Firefox implementation problem: when calling option.click() from the specs, the 'change' event is not triggerred so Angular cannot see it and update the model.

[dynisor]

I don't really know if this is an issue with protractor itself, but I have some code which allows me to select options by value and it works in firefox, chrome, and phantomjs (have not tested with IEDriver). You can muck with it to get it to do exactly what you want, but its pretty easy to see what's going on.

function selectOption(selector, item) {
  var selectList, desiredOption;
  selectList = element(by.css(selector));

  selectList.findElements(protractor.By.tagName('option'))
  .then(function findMatchingOption(options) {
    options.some(function (option) {
      option.getText().then(function doesOptionMatch(text) {
        if (item === text) {
          desiredOption = option;
          return true;
        }
      });
    });
  })
  .then(function clickOption() {
    if (desiredOption) {
      desiredOption.click();
    }
  });
}

Maybe I'll look into doing a PR for a custom locator that allows you to select an option by it's value, then you can do whatever you want with that option. I'll think about how to do it in a decent way.

For now this function does a good job at selecting options, even ones who's option values are dynamic based on other conditions. On our site, we have a "Select Product" which changes the values of the next option "Select Edition" and it works great.

[juliemr]

Found a reduced test case and submitted a bug to FirefoxDriver: https://code.google.com/p/selenium/issues/detail?id=7130

[nssidhu]

I had the same problem with firefox, clicking an option does nothing and can't find the option element which needs to be clicked. rows is undefined always only in firefox, works well in chrome.

customerpickerelement.click().then(function () {

                console.log("About to search for " + customerNameToSearch  );
                var items = ptor.findElements(by.repeater('option in options'));

                items.then(function (rows) {
                   rows.forEach(function (item) {
                        item.getText().then(function (text) {
                            console.log(text);
                            if (text == customerNameToSearch) {
                                 customerFound = true;
                                item.click();
                            } //if
                        }); // item.getText()
                    }); // items.forEach

                }); //items.then

            }); //click

[ucabvas]

Workaround/hack here: http://stackoverflow.com/a/23370177

calling browser.actions().mouseDown().mouseUp().perform() after click() on the option updates the model.

[AlexLovato]

Here's an easy fix:

Before
mailingCountry.click();
mailingCountry.element(by.cssContainingText('option', value)).click();

After
mailingCountry.sendKeys(value);

[geshan]

sendKeys is not working on Firefox.

[AlexLovato]

I am watching it work on my end.

[geshan]

@AlexLovato is it working for you if you run the test on Saucelabs with Windows 7 - Firefox 30 or 31?

[geshan]

any updates/

[AlexLovato]

Utilize promises
On Sep 30, 2014 11:16 PM, "Geshan Manandhar" [email protected]
wrote:

any updates/

—
Reply to this email directly or view it on GitHub
https://github.com/angular/protractor/issues/480#issuecomment-57420000.

[geshan]

I am already using promises, works fine locally but does not work on SauceLabs.

[AlexLovato]

Try creating a function that returns something.click(); and call it with
.then attached
On Oct 1, 2014 12:29 AM, "Geshan Manandhar" [email protected]
wrote:

I am already using promises, works fine locally but does not work on
SauleLabs.

—
Reply to this email directly or view it on GitHub
https://github.com/angular/protractor/issues/480#issuecomment-57424168.

[geshan]

did not work with sendKeys worked with

element(by.cssContainingText('select#my-id option', 10)).click();

10 is the option text.

[shaoping]

element(by.cssContainingText('select#my-id option', 10)).click();

did not work with firefox

[Jacq]

Same problem here, working with latest and previous Chrome but not with Firefox using either click or sendkeys. Workaround mentioned by ucabvas fixes it but slows the tests.

[chuckcfs]

has there been any progress with this? I'm having the same issue, I've work around it using the solution proposed in the forum for the webdriver bug, it works fine locally however when running with Travis CI I got an "angular could not be found in the window error" any ideas?

[gitjul]

had the same issue, worked locally but not on CircleCI

[chuckcfs]

I already find a workaround that works for me under TravisCI and locally

I do a regular:

element( by.css( '.select option[value="some_value"]' ) ).click();

And then in order for the model to update I do this little hack

browser.actions().sendKeys( protractor.Key.ENTER ).perform();

and that does it, the model get's updated and the tests work as expected, it does get executed a little slow like any other browser.actions() call but it works.

Hope it helps somebody out there.

[iljapavlovs]

this is very annoying

[pmowrer]

Thanks @chuckcfs, that helped us!

On a side-note, this problem is intermittent for us. In a <select> with all US states as options, only certain state option ranges would exhibit this behavior. Perhaps it has to do with whether the given option requires the list of options to be scrolled.

[NathanWalker]

I'm using Angular2 and it appears @chuckcfs workaround does not work.
Here are some of the things I've tried ('path to select' = dom path to a select dropdown):

element(by.css(`path to select option[value="the-value-i-want"]`)).click();
browser.actions().sendKeys( protractor.Key.ENTER ).perform();

// where item = value i want
element(by.css('path to select')).all(by.tagName('option'))
    .then(function findMatchingOption(options: any) {
      options.some(function(option: any) {
        option.getText().then(function doesOptionMatch(text: string) {
          if (text.indexOf(item) !== -1) {
            desiredOption = option;
            return true;
          }
        });
      });
    })
    .then(function clickOption() {
      if (desiredOption) {
        desiredOption.click();
        // I've tried with and without this...
        browser.actions().sendKeys( protractor.Key.ENTER ).perform();
      }
    });

element(by.css('path to select')).$(`option[value="the-value-i-want"]`).click();
browser.actions().sendKeys( protractor.Key.ENTER ).perform();

All of them actually select the right option in the dropdown in the testing browser (which is Chrome actually) but none of them work to fire change detection as nothing changes based on what _should_ change when changing the dropdown manually with my pointer/mouse.

[NathanWalker]

Ok thanks to @AlexLovato, that workaround works for me. Just a big guessing game I guess.
This works in Chrome at least:

element(by.css('path to select')).sendKeys('value i want');

[JohnCashmore]

Did anyone find a solution to this for Angular2? looking at you @NathanWalker

[JohnCashmore]

We are also having this issue in Chrome, using click, sendkeys works

[NathanWalker]

@JohnCashmore this was the only thing I could get to work in Chrome w/ Angular2:

element(by.css('path to select')).sendKeys('value i want');

I don't use Firefox for integration testing, so not sure there.

[JohnCashmore]

Yeah this is what we have done, was hoping there was a solution to using click's in chrome

[bharathp]

In firefox, I've notice that the "selected" attribute will not work unless you place the select inside a form, where the form has a name attribute.

It worked for me.

[shankar2993]

i need dropdown onchange 5 => 5, 10 => 10 , 15 => 15, All => All to display records...row count in show button in yii2

[vitiral]

this still doesn't seem to work for the python driver in PhantomJS or Firefox. Any update on this?

[Saqibm128]

Not the same as a click, but i use this script to just hack around the issue:

        var script = function(elementLocator, option) {
          option.selected = true;
          option.dispatchEvent(new Event("input"));
          option.dispatchEvent(new Event("change"));
          elementLocator.dispatchEvent(new Event("input"));
          elementLocator.dispatchEvent(new Event("change"));
        }
        return browser.executeScript(script, select, option)