我有一个Select2(多选),我想输入admin
并选择它。
这是我的HTML代码:
<select class="js-select2" multiple="multiple">
<option> admin </option>
<option> John Doe </option>
</select>
这是我的测试代码:
describe('when select admin and press save button', function () {
beforeAll(function () {
browser.get('http://example');
element(by.css("*[id='technician'] + span.select2")).click();
browser.sleep(1000);
element(by.css(".select2-search__field")).sendKeys('admin');
browser.sleep(1000);
element(by.css('.select2-results__options li:nth-of-type(1)')).click();
element(by.buttonText('save')).click();
});
it('You must see a successful message', function () {
expect(element(by.css(".alert")).getText()).toContain('Settings saved successfully');
});
});
执行代码时,量角器会显示以下消息:
失败:元素不可交互
我在哪里犯错?而我该怎么办?
答案 0 :(得分:1)
Select2
是一个jQuery插件,它使用CSS和javascript实现下拉菜单,它不是仅由select
实现的本机下拉列表。
对于这样的CSS下拉列表,可见选项不是来自select
,而select
是不可见的或可见的,但是尺寸很小(例如1 * 1大小)会阻止用户对其进行操作。 / p>
下面的代码示例测试来自Select2 site的演示
describe('handsontable', function(){
it('input text into cell', function(){
browser.ignoreSynchronization = true;
browser.get('https://select2.org/selections');
browser.sleep(3000);
// click to make the input box and options display out
element(by.css('select.js-example-basic-multiple-limit + span' +
' .select2-selection--multiple')).click();
browse.sleep(1000);
element(by.css("select.js-example-basic-multiple-limit + span input"))
.sendKeys('Hawaii');
element(by.xpath("//li[@role='treeitem'][text()='Hawaii']")).click();
browser.sleep(3000);
});
})