1

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>
alecxe
  • 462,703
  • 120
  • 1,088
  • 1,195
Nalu
  • 195
  • 2
  • 13

1 Answers1

1

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.

alecxe
  • 462,703
  • 120
  • 1,088
  • 1,195
  • hi..thanks it works,,i used sendkeys("package"). In the first line what is select mean? the next tag? or its a keyword? if i remove select and just tried with imageeditor, it fails. – Nalu Aug 09 '17 at 21:39
  • @Nalu yup, the expression inside $$ is a CSS selector. Thanks, glad it worked. – alecxe Aug 09 '17 at 21:40
  • CSS selector? May i know what other selectors available for css? i googled.but i did not find anything as this example. Can you share any link which helps me learn more of these and to learn other examples? – Nalu Aug 09 '17 at 22:13
  • And what is the equivalent in xpath ? – Nalu Aug 09 '17 at 22:13
  • var desiredOption = desiredImageEditor.$("option.image-package-panel"); desiredImageEditor.click(); // open up dropdown desiredOption.click(); Does not seem to work.NoSuchElementError: No element found using locator: By(css selector, option.image-ingredientspanel) – Nalu Aug 09 '17 at 22:25
  • @Nalu sorry, not sure where is `image-ingredientspanel` coming from - don't see this class in the HTML you've provided..Definitely, look CSS selector syntax up - they are generally more concise and reliable than XPath expressions. – alecxe Aug 09 '17 at 23:16