angular - 用量角器测试元素是否在视口中

Question

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

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

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

仔细阅读文档后，isDisplayed不检查元素是否在视口内。

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

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

Answer 1

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

• 创建类 MyRect 扩展 DOMRect
• 创建函数getBoundingClientMyRect基于getBoundingClientRect
• 创建函数getWindowMyRect基于(0, 0, wWidth, wHeight) 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()- 再次与之前的值进行比较，如果值已更改，则需要滚动