使用量角器测试元素在视口中

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()- 再次与之前的值进行比较，如果值已更改，则需要滚动