Protractor - How to assert that the correct option is selected from a droplist

Question

In my project I have a drop down list, from where I am selecting an option based on the text. My objective is to test once the option is selected, the text that is being shown in the dropbox (like the picture below), is matching with my input value or not.

My code is as follows:

this.selectDropdownByText = async function(container, inputText){

    await helpers.clickWhenClickable(element(by.cssContainingText('option',inputText)), 5000, "the selected option is not clickable");
    await helpers.clickWhenClickable(CL.Save_Button_BottomPanel,10000);
    await sync.waitUntilElementVisible(await CL.Save_success_Massage, 10000);
    await sync.waitUntilElementInVisible(await CL.Save_success_Massage, 10000);
    await helpers.waitForElementVisibility(container);

 return await container.getSelection().getText();

There is no problem in the codes until we reach the return statement. However, the return statement returns error when I try container.getSelection().getText(). The error is TypeError: container.getSelection is not a function On the other hand, if I try container.getText(), it returns all the options of the drop list.

Is there any way to accomplish that?

The html code is :

<select _ngcontent-c11="" class="form-control ng-touched ng-dirty ng-valid" formcontrolname="dcbsId"
id="directClassBased">
<!---->
<!---->
<option _ngcontent-c11="" value="1: 54756697-0CC6-45A2-B857-E96E132D46B0" class="ng-star-inserted">HS Com A</option>
<option _ngcontent-c11="" value="2: FA377EE4-66C4-46ED-992D-8D17A6756586" class="ng-star-inserted">HS Com B</option>
<option _ngcontent-c11="" value="3: 7BA46C9C-6150-4E5D-8FD0-270D6387D772" class="ng-star-inserted">HS Com C</option>
.....
..... 
<option _ngcontent-c11="" value="12: 08FD1A93-6507-4ABB-9420-DD2E62F9562C" class="ng-star-inserted">CL TRC</option>

Sorry for a noob question. What is `container`? What is `helpers`? What is `sync`? Are you using any other framework or library besides `jasmine/protractor`? — Castro Roy, Apr 25 '19 at 23:38
Container is just a parameter that we used for this function. Sync is a collection of some reusable function that we have in our scripts. The helpers is a Jasmine module that you can find at https://www.npmjs.com/package/protractor-helper — nhrcpt, Apr 26 '19 at 12:46

Madhan Raj · Answer 1 · 2019-04-29T05:28:05.667

0

Try the below return statement in your method after selecting the option from the dropdown.

const container = elemnet(by.css('#directClassBased'));

return await container.getAtrribute('value');

If the above does not help share your html of the drop down.

edited Apr 29 '19 at 05:28

answered Apr 26 '19 at 06:19

Madhan Raj

1,404
1
7
13

Hi, thanks. I have included the html code in the question body. There is already a value attribute in the code, so your method did not work for me. – nhrcpt Apr 26 '19 at 14:11
@nhrcpt Try the updated answer. refer this – Madhan Raj Apr 29 '19 at 05:30

score 0 · Answer 2 · answered Apr 29 '19 at 20:43

0

I found the answer here.

The solution is :

expect(element(by.id('my_id')).$('option:checked').getText()).toEqual('xxxxxx')

and in my case, the implementation is like this:

return await container.$('option:checked').getText();

answered Apr 29 '19 at 20:43

nhrcpt

862
3
21
51

Protractor - How to assert that the correct option is selected from a droplist

2 Answers2