使用 Protractor 测试元素是否在视口中。

Question

我希望测试我的应用程序是否已滚动到主题页面内的特定文章。

最初我认为isDisplayed可能有所帮助，然后编写了以下代码：

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

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

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

有没有最佳实践来检查这个问题？

- Robert T.

Answer 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()- 再次记录值，如果值发生变化，则需要滚动

- Paweł