Click at option of a select using protractor at Google ChromeDriver;

Question

I've trying to click at option of a select and then click button save. I can see at the browser it's really works but when click at the button save, the google chrome doesn't understand and say I didn't click that required field. How to fix?

<select class="form-control ng-pristine ng-invalid ng-touched" id="ano-norma" required="">
<option disabled="" selected= "" value= "undefined" > Selecione um ano< /option>
<option value="2017" > 2017 < /option><option value="2016">2016</option > 
<option value="2015" > 2015 < /option>
<option value="2014">2014</option > 
<option value="2013" > 2013 < /option>
<option value="2012">2012</option > 
<option value="2011" > 2011 < /option>
<option value="2010">2010</option > 
<option value="2009" > 2009 < /option>
<option value="2008">2008</option > 
</select>

I've tried:

element(by.id('ano-norma')).all(by.cssContainingText('option', '2017')).click();

and

element(by.id('ano-norma)).click().then( () => {
element(by.id('ano-norma)).all(by.tagName('option)).get(2).click();
});

I'm using google chrome as browser.

It's seems the google chrome don't understand that the dropdown was already selected.

"Campo obrigatório" means "required field"

in another it function using `element(by.id('save')).click();` — paulotarcio, Oct 18 '17 at 18:02
There's no error at console. The browser works correctly. I can see the drop down switching the valor correctly. But at the save click, it's doesn't work. If I perform manual testing, it's work normally. — paulotarcio, Oct 18 '17 at 18:04
no error means any code after ur click event are working fine ? — Ankur Singh, Oct 18 '17 at 18:05
Possible duplicate of [How to select option in drop down protractorjs e2e tests](https://stackoverflow.com/questions/19599450/how-to-select-option-in-drop-down-protractorjs-e2e-tests) — JeffC, Oct 18 '17 at 18:52
It's seems the google chrome don't understand the dropdown was selected by protractor. — paulotarcio, Oct 18 '17 at 18:56

score 0 · Answer 1 · answered Oct 19 '17 at 01:52

0

your code is wrong, not element().all().click(). it should be like this:

element(by.id('ano-norma')).element(by.cssContainingText('option', '2017')).click();

or

element(by.cssContainingText('#ano-norma > option', '2017')).click();

answered Oct 19 '17 at 01:52

yong

13,357
1
16
27

from your comment on above answer, the dropdown select the correct option, but you meet the problem when you click save button. So your problem is nothing to do with ' google chrome' or 'don't understand the selected option by protractor'. I guess the dropdown be binded some events when choose its option, those events can be trigger success when you do manually, but automation script failed to trigger them even you had see option indeed changed. I think you need to look into the event(binded to the dropdown) which interest on option change. – yong Oct 20 '17 at 00:59

Ernst Zwingli · Answer 2 · 2017-10-23T16:59:13.497

You have a timing issue. When you use then(), it opens a new async task and lets protactor in parallel continue with the next lines after the then(). Therefore you basically click the Save-Button almost the same time, when you open the dropdown. If your save-button is inactive, before the dropdown-selection, everything looks like it worked, just nothing got saved.

Solution 1 (recommended): call your SaveButton-function inside the then()-part.

element(by.id('ano-norma')).click().then( () => {
    element(by.id('ano-norma')).all(by.tagName('option')).get(2).click();
    //call your saveButton-function here.
});

Or better, try it within a separate test case:

it("should test select dropdown and save", function(done){
    element(by.id('ano-norma')).click().then( () => {
        element(by.id('ano-norma')).all(by.tagName('option')).get(2).click();
        browser.waitForAngular(); //in case the dropdown-selection triggers processes
        $(buttonElement).click();//call your saveButton-function here.
        done();
});
});

Solution 2: Use a callback to let Protractor know, when to continue (didn't test this one, so it might not work the way I write it here)

testCaseDropdownSelection = function(done) {
    element(by.id('ano-norma')).click().then( () => {
        element(by.id('ano-norma')).all(by.tagName('option')).get(2).click();
        done();
    });
};
testCaseClickSaveButton = function(){
    $('saveButton').click();
};

Let me know, if one of the solutions worked for you.

Hi, I tried it too but didn't work. So I click at the element first and then I use sendKey to write the value and , I don't know why, it's works — paulotarcio, Oct 23 '17 at 16:41
Do you have a loading action ongoing after you selected the dropdown, so your page isn't ready to process the save-action yet? Also be aware, that your test case could finish, before the `then()`-part has finished. I'll edit my answer to give you a slightly adjusted approach to try. — Ernst Zwingli, Oct 23 '17 at 16:48
@paulotarcio I extended my solution 1 with a better, complete example. — Ernst Zwingli, Oct 23 '17 at 16:56

score 0 · Accepted Answer · answered Oct 23 '17 at 16:45

Even been a dropdown, I used click() and sendkeys () and its works perfectly.

    element(by.id('ano-norma')).click().then( () => {
               element(by.id('ano-norma')).sendKeys('2015');
               });

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

Click at option of a select using protractor at Google ChromeDriver;

3 Answers3