多选的量角器测试给出“元素不可见”错误答案

【问题标题】：protractor testing on multi select giving 'Element not visible' error多选的量角器测试给出“元素不可见”错误
【发布时间】：2018-04-20 21:05:51
【问题描述】：

我有以下带有多选元素的 html 代码。在使用量角器运行测试以选择选项时，我收到错误为“元素不可见”。

    <div id="one" class="class1">
    <select id="select1" style="width: 70%;" class="multiselect" multiple="multiple" ng-model="formData.abcqw">
    <option value="abc">ABC</option>
    <option value="xyz">XYZ</option>
    <option value="pqr">PQR</option>
    </select>
    </div>


     protractor code :  
     browser.actions().
     mouseMove(element(by.className("multiselect"))).click().perform();
     element(by.model("formData.abcqw")).sendKeys("abc");

感谢任何帮助。

【问题讨论】：

请贴出你试过的代码
已经修改了上面的代码
为什么要先点击multiselect？它会打开一个下拉菜单吗？还有哪个元素不可见？无论如何要尝试的一件简单的事情是在您的 Protractor 行 $('#select1.multiselect') -> 中使用它作为 elementFinder（查找 id=select1 和 class=multiselect）。

标签： google-chrome selenium protractor

【解决方案1】：

从您分享的HTML 中可以明显看出<select> 标记是AngularJS 元素，因此我们必须诱导wait 即WebDriverWait，如下所示，该元素是可选的：

var EC = protractor.ExpectedConditions;
// Waits for the element with id 'select1' to be selected.
browser.wait(EC.elementToBeSelected($('#select1')), 5000);

【讨论】：

好的，谢谢。但是我应该在鼠标点击之前还是之后等待。
我们必须在鼠标点击之前等待。
它等待但它没有选择元素，也尝试了更长的等待。
嗯，不。它是一个 Select 标签，尝试使用Select class
它实际上在点击之前等待，但在执行点击时它会爆发，它没有找到元素吗？在等待期间它不执行鼠标点击？

【解决方案2】：

我也认为这是一个等待问题。每当您看到此“元素不可见错误”时，您都可以添加

browser.sleep(5000);

在点击语句之前再试一次

如果这不起作用，请尝试以下操作。当我们有意点击隐藏元素时。所以这应该工作

  var elm = element(by.className("multiselect "));
    browser.executeScript("arguments[0].click();", elm.getWebElement());
    browser.sleep(2000);
    element(by.model("formData.abcqw")).sendKeys("abc");

【讨论】：

请告诉我它是否有效，否则我们可以调试更多
谢谢。试过 sleep ，这也不起作用，浏览器在点击之前等待指定的时间但是当点击发生时它会因错误而中断。
你确定这是一个唯一的定位器并且没有重复的元素吗？

【解决方案3】：

尝试以下代码，我在本地复制了相同的代码，并验证了以下代码可以正常工作：

var EC = protractor.ExpectedConditions;
var multiSelectElement = element(by.model('formData.abcqw');
browser.wait(EC.visibilityOf(multiSelectElement))).then(function() {
    browser.wait(EC.elementToBeClickable(multiSelectElement.element(by.cssContainingText('option', 'ABC'))))).then(function() {
        multiSelectElement.element(by.cssContainingText('option', 'ABC')).click();
    }); 
});

【讨论】：