量角器 - 其他元素将收到点击

Posted 2021-04-16

我有一个div放在我需要点击的div的顶部。两个div都在浏览器窗口中可见，因此无需滚动。那么，我如何点击顶部div下面的底部div？它可以用鼠标工作，但不适用于Protractor。

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

在Protractor中，我在视口中找到了正确的位置以进行单击，但错误显示我正在单击scrollCanvas。

这是伪html：

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

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

提前致谢！

答案

我终于弄清楚了......诀窍是使用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();
        });
    });
});

另一答案

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

这会有所帮助！