量角器 - 其他元素会收到点击答案

【问题标题】：Protractor - Other element would receive the click量角器 - 其他元素会收到点击
【发布时间】：2017-04-02 18:14:43
【问题描述】：

我在需要点击的 div 上放置了一个 div。两个 div 都在浏览器窗口中可见，因此无需滚动。那么，如何单击顶部 div 下方的底部 div？它适用于鼠标，但不适用于量角器。

快速背景：我们的团队使用一个弹出框实现了一个自定义下拉控件，其中包含要选择的“选项”和一个带有滚动条的“玻璃片”。这样做是为了避免下拉控件有 100 多个选项时出现问题。这块玻璃允许您将选项“滚动”到弹出窗口中。

在 Protractor 中，我在视口中找到了要单击的正确位置，但错误提示我正在单击 scrollCanvas。

这里是伪html：

<div id="dropdownControl">
  <div id="viewport"
    <div ng-repeat (of the viewable options)
    ... </div>
  <div id="scrollCanvas">
  ... </div>
</div>

scrollCanvas 正在接收点击，但我需要视口来接收点击。有什么想法吗？？

提前致谢！

【问题讨论】：

标签： html protractor

【解决方案1】：

我想通了……终于。诀窍是使用 getLocation() 获取要单击的元素的 x,y 位置（在另一个 div 下的 div 中），然后使用 browser.actions().mouseMove().click().perform()。请注意，在单击中未使用位置值，因为 mouseMove 将调用中的任何 x,y 作为相对值应用到最后一个鼠标位置。因此，由于鼠标已经在正确的位置，您只需要在该位置单击（）即可。

这里有一些未精炼的伪代码来说明该技术：

var optionElementFinder = element(by.id('id_of_parent_of_layered_divs')).element(by.id('id_of_div_holding_the_options'));
optionElementFinder.all(by.repeater('repeater_text_rendering_the_options')).getText().then(function (options) {
    var myIndex = options.indexOf('text_of_option_to_click');
    optionElementFinder.all(by.repeater('repeater_text_rendering_the_options')).then(function (elements) {
        elements[myIndex].getLocation().then(function () {
            var canvas =  element(by.id('id_of_parent_of_layered_divs'))
                .element(by.id('id_of_div_holding_the_scrollCanvas'))
                .getWebElement();
            browser.actions()
                .mouseMove(canvas)
                .click()
                .perform();
        });
    });
});

【讨论】：

【解决方案2】：

var element = element(by.css('.foo'));    
browser.executeScript("arguments[0].click();", element.getWebElement());

这会有帮助！

【讨论】：