CODEWITHSUNDEEP
protractor
ssharma
ssharma

Reputation: 941

Protractor how to validate Drop Down Selected Value with Reactive Forms

How can I validate selected value of dropdown with Reactive forms, I do not see any specific attribute on HTML page, when any value is selected in dropdown :

<span class="content">
  <select formcontrolname="template" id="template" required="" ng-reflect-required="" ng-reflect-name="template" class="ng-pristine ng-valid ng-touched">
<!--bindings={"ng-reflect-ng-for-of": "[object Object],[object Object"}-->
    <option value="81ef59b7-fadb-4bfa-b521-e88819469988" ng-reflect-value="81ef59b7-fadb-4bfa-b521-e88819" class="ng-star-inserted">
 test 
    </option>
    <option value="logo_Header" ng-reflect-value="logo_Header" class="ng-star-inserted">
 Logo Header 
    </option>
  </select>
  <a class="manage-reports" tabindex="0">
    <i class="icon edit-icon icon-sm">
    </i>manage 
  </a>
</span>

I want to verify that if I select

<option value="81ef59b7-fadb-4bfa-b521-e88819469988" ng-reflect-value="81ef59b7-fadb-4bfa-b521-e88819" class="ng-star-inserted"> test </option>

selected value/text of the dropdown should be "test"

Upvotes: 0

Views: 269

Answers (2)

Sergey Pleshakov
Sergey Pleshakov

Reputation: 8978

I'm unfamiliar with Reactive Forms, but the logic for something like this remains the same for me - just open dev tools and explore what changes when you select an option.

Sometimes attribute changes like value="selected_value" and you need to .getAttribute("value") of the element and then assert it

Sometimes, the text of the select wrapper changes and you would need to .getText()

Upvotes: 1

Joaquin Casco
Joaquin Casco

Reputation: 734

you can try selecting the option and then do a getText() on the <select> element

expect(select.getText()).toEqual('Test');

Upvotes: 1

Related Questions