This Question have 1 answers right now.

How can I get different dropdown option with the same classes in protractor test?

Question!

I've been trying to get a randomly element from my dropdownlist but I have 3 dropdown list with the same class in my page. I tried with the label and following-sibling but it didn't work. This question is not about how to get any option in the dropdownlist, but how to get the options of three diferent dropdownlist and click.

First dropdownlist

<dropdownlist _ngcontent-xsl-24="">
<select class="form-control ng-pristine ng-valid ng-touched">
  <!--template bindings={}-->
<option value="null">Selecione uma norma...</option>
<option value="06ea36f0-e6f0-4efe-a1db-8c5b6614f9e0">1356/2016</option>
<option value="7f3fd2de-1a0c-4bf7-a079-bc56a43caca9">126/2016</option>
<option value="5957aaee-1deb-4a9c-8127-b0ac9d208652">127/2016</option>
<option value="f37c484a-1948-44c5-aa42-e29152fdf811">1111/2011</option>
<option value="bdca9e45-c8f1-4c0a-8869-4ac3531a382f">23434/2014</option>
<option value="2ed84235-9dd1-49b0-b3bc-95b69f6a6f84">2334/2013</option>
<option value="57a0321a-ad55-41f3-a720-77546b8a0571">2334/2013</option>
<option value="2fc48229-327a-47c7-9b00-36c8ad5a33b2">2334/2013</option>
<option value="4b1580a2-a618-436c-9471-54b962842b9c">23346/2013</option>
<option value="3572fdf4-f452-4f93-ade8-1e374f6f4e17">35565/2012</option>
<option 
</select>

second dropdonwlist

<dropdownlist>
<select class="form-control ng-pristine ng-valid ng-touched">
  <!--template bindings={}-->
<option value="null">Selecione um tipo de cargo...</option>
<option value="3ab69292-eea9-467c-9f25-cef5fd1e9289">Carreira</option>
<option value="69bcde50-8c31-4261-836c-5e06ef5cf373">Comissão</option>
<option value="25af19da-7c39-49a7-8b69-a5dd22e96701">Juiz de Paz</option>
</select>
</dropdownlist>

last dropdownlist

  <dropdownlist><select class="form-control ng-pristine ng-valid ng-touched">
      <!--template bindings={}--><option value="null">Selecione um nível...</option>
<option value="fc14b561-9899-4d01-aceb-eb7704f38ad3">I</option>
<option value="fd4f8b88-3be7-458c-919b-33aeab8669e1">II</option>
<option value="06361835-be2e-4923-a829-fb5434b197f6">III</option>
<option value="b2ec02c5-b326-4b7c-8f74-36b7956b60b8">IV</option>
<option value="c5460dd4-7e2b-4a4a-a912-578e556d4528">V</option>
<option value="44ef96db-6e6b-479e-a330-e2db3a464bbd">VI</option>
<option value="55231551-2837-4910-a4d7-9053f9d1f79f">VII</option><option value="ed0067a2-506f-48a2-95bc-e5af436f0e80">VIII</option>
    </select>
    </dropdownlist>


Answers
  1. Use element.all() with class name as locator, it will return three dropdown elements
  2. Now use each() one result of 1 step, each() will iterate dropdowns one by one from top to bottom
  3. Apply chaining on each dropdown element as shown in code

This way you can get the dropdown you want and select element you want

Code Snippet:
var inputOptionText='xyz'

element.all(by.css(".form-control.ng-pristine.ng-valid.ng- 
           touched")).each(function(dropdown,index){

            dropdown.element(by.tag("option")).each(function(opt,index){

                         opt.getText().then(function(optionText){

                                     if(optionText==inputText){
                                                   opt.click();
                                                     }
                                   })
               });
        });


Video about How can I get different dropdown option with the same classes in protractor test?