用量角器测试元素是否在视口中答案

【问题标题】：Test an element is in viewport with protractor用量角器测试元素是否在视口中
【发布时间】：2018-02-26 21:13:22
【问题描述】：

我想测试我的应用是否滚动到话题页面内的特定帖子。

最初我认为isDisplayed 可能会有所帮助，并编写了如下代码：

element(by.id(postId)).isDisplayed().then((isDisplayed) => {
  expect(isDisplayed).toBe(true);
});

在仔细阅读documentation 之后，isDisplayed 不会检查元素是否在视口内。

一个 hacky 方法是计算各种元素的位置，从可滚动的父级开始（在我的例子中不是 window）。

是否有检查这一点的最佳做法？

【问题讨论】：

【解决方案1】：

第一个想法（你提到的）：

创建类 MyRect 扩展 DOMRect
基于getBoundingClientRect创建函数getBoundingClientMyRect
基于(0, 0, wWidth, wHeight)创建函数getWindowMyRect let wHeight = window.innerHeight || document.documentElement.clientHeight; let wWidth = window.innerWidth || document.documentElement.clientWidth;
在 MyRect 中创建方法 isInsideMyRect - 基于 https://gist.github.com/davidtheclark/5515733
在 MyRect 中创建方法 isPartOfMyRect - 基于 https://gist.github.com/davidtheclark/5515733#gistcomment-2113166

el.getWindowMyRect().isInsideMyRect(getWindowMyRect())

此方法不能解决页面内部滚动的问题

第二个想法：

elm.getBoundingClientRect() 并记下值
如果需要，滚动到元素： browser.executeScript("arguments[0].scrollIntoViewIfNeeded();", elm.getWebElement());
elm.getBoundingClientRect() - 再次与之前的值进行比较，如果值已更改，则需要滚动

【讨论】：