CODEWITHSUNDEEP
protractor
M M
M M

Reputation: 99

how to select value from dropdown with formcontrolname in protractor?

<select _ngcontent-c1="" class="form-control ng-untouched ng-pristine ng-invalid" formcontrolname="Designation" required=""><option _ngcontent-c1="" value="">Select Designation</option><!----><option _ngcontent-c1="" value="CEO">CEO</option><option _ngcontent-c1="" value="GM">GM</option><option _ngcontent-c1="" value="BodyGuard">BodyGuard</option><option _ngcontent-c1="" value="Executive">Executive</option></select>

For above html i am trying to select value from dropdown using protractor. Tried following but not working.

var EmpDesignation = element(by.cssContainingText('body.modal-open:nth-child(2) modal-container.modal.fade.show:nth-child(7) div.modal-dialog div.modal-content form.form-horizontal.ng-pristine.ng-invalid.ng-touched div.modal-body div.form-row:nth-child(2) div.col-md-10 > select.form-control.ng-pristine.ng-invalid.ng-touched:nth-child(3)', 'CEO'));
EmpDesignation.click();

Error: Failed: No element found using locator: by.cssContainingText("body.modal-open:nth-child(2) modal-container.modal.fade.show:nth-child(7) div.modal-dialog div.modal-content form.form-horizontal.ng-pristine.ng-invalid.ng-touched div.modal-body div.form-row:nth-child(2) div.col-md-10 > select.form-control.ng-pristine.ng-invalid.ng-touched:nth-child(3)", "CEO")

There are multiple class with class name 'form-control ng-untouched ng-pristine ng-invalid'.

Can anyone suggest way out of this? can we use formcontrolname tag?

Upvotes: 0

Views: 2978

Answers (4)

Joaquin Casco
Joaquin Casco

Reputation: 734

You can also use a css selector and use the 'value' attribute: 

var CEO = element(by.css('[value="CEO"]'));

Then the code would look like this:

let EmpDesignation = element(by.xpath('//select[@formcontrol="Designation"]'));
return EmpDesignation.click()
   .then(function(){
       return CEO.click();
   });

Upvotes: 0

DublinDev
DublinDev

Reputation: 2348

I would try it like this 

let EmpDesignation = element(by.xpath('//select[@formcontrol="Designation"]'));

EmpDesignation.sendKeys('CEO'); //Option 1
EmpDesignation.element(by.cssContainingText('option','CEO')) //Option 2

This does assume that formcontrol="Designation" is unique however. If that assumption is incorrect let me know and I'll update.

Upvotes: 1

Madhan Raj
Madhan Raj

Reputation: 1442

Try the below one

const designation = element(by.css('select.form-control>option'));

in your test

 designation.sendKeys('CEO');

Hope it helps you

Upvotes: 0

Kacper
Kacper

Reputation: 1199

First you need to click on select element, and then option.

options are not visible yet

Upvotes: 0

Related Questions