CODEWITHSUNDEEP
javascriptcssxpathprotractor
Nalu
Nalu

Reputation: 195

Select dropdown option by text if same list of class are found in protractor js

I'm working in Protractor and javasript. My page has 3 dropdowns of same class "imageeditor". I want to select the 2nd dropdown and click the option say "Package" by passing the text as parameter.I want the different xpath and css to perform the select option.

<div class="imageeditor">
<select class="form-control m-b-sm">
<option>Select Image Style</option>
<option value="image-panel">Panel</option>
<option value="image-package-panel">Package</option>
<option value="image-open-panel">Open</option>
</select>
</div>

<div class="imageeditor">
<select class="form-control m-b-sm">
<option>Select Image Style</option>
<option value="image-panel">Panel</option>
<option value="image-package-panel">Package</option>
<option value="image-open-panel">Open</option>
</select>
</div>

<div class="imageeditor">
<select class="form-control m-b-sm">
<option>Select Image Style</option>
<option value="image-panel">Panel</option>
<option value="image-package-panel">Package</option>
<option value="image-open-panel">Open</option>
</select>
</div>

Upvotes: 1

Views: 836

Answers (1)

alecxe
alecxe

Reputation: 474001

You can get the desired select element by index:

var desiredImageEditor = $$(".imageeditor select").get(1);

Now, in order to select an option, you have multiple ways to do so. One is to select the inner option by the class name and click it:

var desiredOption = desiredImageEditor.$("option.image-package-panel");

desiredImageEditor.click();  // open up dropdown
desiredOption.click();

Or, it should also be possible to just send keys to the select element:

desiredImageEditor.sendKeys("Package");

There is also this convenient abstraction over select and option.

Upvotes: 1

Related Questions