如何从量角器的下拉列表中选择 select?
How can I select from a dropdown list in protractor?
我正在努力尝试从以下下拉菜单中 select 一个名为 "some product" 的产品。 'id="s2id_autogen81"' 是新的 ID 元素,我使用该 ID 来抓取项目,但它已更改为这个自动生成值,我不确定用量角器抓取什么。
从 select 之前的下拉菜单
<div class="select2-container ng-pristine ng-untouched ng-valid" id="s2id_autogen81">
<a href="javascript:void(0)" class="select2-choice select2-default" tabindex="-1">
<span class="select2-chosen" id="select2-chosen-82">Select a product</span>
<abbr class="select2-search-choice-close"></abbr>
<span class="select2-arrow" role="presentation">
<b role="presentation"></b>
</span>
</a>
<label for="s2id_autogen82" class="select2-offscreen"></label>
<input class="select2-focusser select2-offscreen" type="text" aria-haspopup="true" role="button" aria-labelledby="select2-chosen-82" id="s2id_autogen82">
</div>
从 selecting 后的下拉列表
<div class="select2-drop select2-display-none select2-with-searchbox select2-drop-active" id="select2-drop" style="left: 86.4375px; width: 258px; top: 831px; bottom: auto; display: block;">
<div class="select2-search">
<label for="s2id_autogen11_search" class="select2-offscreen">Product</label>
<input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="select2-input" role="combobox" aria-expanded="true" aria-autocomplete="list" aria-owns="select2-results-11" id="s2id_autogen11_search" placeholder="" aria-activedescendant="select2-result-label-15">
</div>
<ul class="select2-results" role="listbox" id="select2-results-11"><li class="select2-results-dept-0 select2-result select2-result-selectable ng-binding ng-hide" role="presentation">
<div class="select2-result-label" id="select2-result-label-13" role="option">
<span class="select2-match">
</span>
</div>
</li>
<li class="select2-results-dept-0 select2-result select2-result-selectable ng-binding ng-scope" role="presentation">
<div class="select2-result-label" id="select2-result-label-14" role="option">
<span class="select2-match">
</span>NOT SOME PRODUCT
</div>
</li>
<li class="select2-results-dept-0 select2-result select2-result-selectable ng-binding ng-scope select2-highlighted" role="presentation">
<div class="select2-result-label" id="select2-result-label-15" role="option">
<span class="select2-match">
</span>SOME PRODUCT
</div>
</li>
</ul>
尝试使用以下代码。
element.all(by.model('ng-model of the drop down list')).each(function (eachElement, index)
{
eachElement.click();// select the <select>
browser.driver.sleep(500);// wait for the renderings to take effect
element(by.css('unique selector of the item you need to select')).click();// select the first md-option
browser.driver.sleep(500);// wait for the renderings to take effect
});
我正在努力尝试从以下下拉菜单中 select 一个名为 "some product" 的产品。 'id="s2id_autogen81"' 是新的 ID 元素,我使用该 ID 来抓取项目,但它已更改为这个自动生成值,我不确定用量角器抓取什么。
从 select 之前的下拉菜单
<div class="select2-container ng-pristine ng-untouched ng-valid" id="s2id_autogen81">
<a href="javascript:void(0)" class="select2-choice select2-default" tabindex="-1">
<span class="select2-chosen" id="select2-chosen-82">Select a product</span>
<abbr class="select2-search-choice-close"></abbr>
<span class="select2-arrow" role="presentation">
<b role="presentation"></b>
</span>
</a>
<label for="s2id_autogen82" class="select2-offscreen"></label>
<input class="select2-focusser select2-offscreen" type="text" aria-haspopup="true" role="button" aria-labelledby="select2-chosen-82" id="s2id_autogen82">
</div>
从 selecting 后的下拉列表
<div class="select2-drop select2-display-none select2-with-searchbox select2-drop-active" id="select2-drop" style="left: 86.4375px; width: 258px; top: 831px; bottom: auto; display: block;">
<div class="select2-search">
<label for="s2id_autogen11_search" class="select2-offscreen">Product</label>
<input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="select2-input" role="combobox" aria-expanded="true" aria-autocomplete="list" aria-owns="select2-results-11" id="s2id_autogen11_search" placeholder="" aria-activedescendant="select2-result-label-15">
</div>
<ul class="select2-results" role="listbox" id="select2-results-11"><li class="select2-results-dept-0 select2-result select2-result-selectable ng-binding ng-hide" role="presentation">
<div class="select2-result-label" id="select2-result-label-13" role="option">
<span class="select2-match">
</span>
</div>
</li>
<li class="select2-results-dept-0 select2-result select2-result-selectable ng-binding ng-scope" role="presentation">
<div class="select2-result-label" id="select2-result-label-14" role="option">
<span class="select2-match">
</span>NOT SOME PRODUCT
</div>
</li>
<li class="select2-results-dept-0 select2-result select2-result-selectable ng-binding ng-scope select2-highlighted" role="presentation">
<div class="select2-result-label" id="select2-result-label-15" role="option">
<span class="select2-match">
</span>SOME PRODUCT
</div>
</li>
</ul>
尝试使用以下代码。
element.all(by.model('ng-model of the drop down list')).each(function (eachElement, index)
{
eachElement.click();// select the <select>
browser.driver.sleep(500);// wait for the renderings to take effect
element(by.css('unique selector of the item you need to select')).click();// select the first md-option
browser.driver.sleep(500);// wait for the renderings to take effect
});