量角器测试（在角度站点上使用 Selenium 和 Chrome）给出错误的 x 和 y 点

Question

我一直在调试测试，发现量角器正在找到正确的元素，但位置（x 和 y）没有链接到已找到的按钮的位置。当在此元素上调用 click 时，它会错过并单击错误的位置，从而导致测试失败。

请注意，这些测试似乎在其他机器上运行良好，唯一的区别是测试失败的操作系统是 Windows 10？

有谁知道量角器/硒如何确定元素的位置。

提前致谢。

杰克·里维斯

编辑：

在评论请求一些例子之后：

获取页面对象：

browser.get('examplePageAddress')

获取按钮所在的标题：

var elem = element.all(by.className('header')).get(0)

获取按钮位于标题内的div：

var div = elem.element(by.name('examplename'))

获取实际按钮

var button = element(by.name('exampleButtonName'))

在实际测试中，一个简单的 button.click() 被调用，这就是缺少大约 50px 的按钮。

通过调试和写入控制台，我确认选择了正确的元素 [使用 .getInnerHTML()] 并通过测量按钮的位置确定它大约有 50px 不同 [使用 .getLocation() 来确定 x 和y 由量角器返回]

Answer 1

在实际测试中，调用了一个简单的 button.click()，这就是按钮缺少大约 50 像素的原因

在这种情况下，先移动到元素，然后执行点击：

browser.actions().mouseMove(button).click().perform();

或者，元素的scroll into view：

browser.executeScript("arguments[0].scrollIntoView();", button.getWebElement());
button.click();

请注意，getLocation() 本身取决于可见区域 - 浏览器确定的视口。在不同的浏览器和不同的操作系统中可能会有所不同。另见：

• WebElement.getLocation and WebElement.getSize in screen shots

而且，您实际上可以获得 viewport 大小并在您执行测试的浏览器和系统上进行比较 - 我很确定您会得到不同的值，请参阅：

• Get the browser viewport dimensions with JavaScript

您还可以查看getBoundingClientRect() 在您的情况下返回的内容：

Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。

browser.executeScript("return arguments[0].getBoundingClientRect();", button.getWebElement()).then(function (rect) {
    console.log(rect.left);
    console.log(rect.top);
});