javascript - 如果在 Protractor js 中找到相同的类列表，则按文本选择下拉选项

Question

我在 Protractor 和 javasript 工作。我的页面有 3 个相同类别“imageeditor”的下拉列表。我想选择第二个下拉菜单，然后通过将文本作为参数传递来单击“打包”选项。我希望不同的 xpath 和 css 执行选择选项。

<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>

Answer 1

可以通过索引获取想要的select元素:

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

现在，为了选择一个选项，您有多种选择方式。一种是通过类名选择内部选项并单击它:

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

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

或者，也应该可以只将键发送到 select 元素:

desiredImageEditor.sendKeys("Package");

还有这个convenient abstraction over select and option.