为什么我不能使用 getBoundingClientRect()？

Question

我正在尝试编写一个量角器测试来检查页面的页脚是否位于页面底部。

我查看了此类资源以帮助我：

How to get an element's top position relative to the browser's viewport? https://plainjs.com/javascript/styles/get-the-position-of-an-element-relative-to-the-document-24/

我想使用这些来源中讨论的 getBoundingClientRect 函数来获取页脚的位置，但我收到一条错误消息：footer.getBoundingClientRect is not a function

这是我的代码的相关部分：

footer = element(by.css('lib-footer > mat-toolbar'));
const viewportOffset = footer.getBoundingClientRect();
const bottom = viewportOffset.bottom;

browser.driver.manage().window().getSize().then((size) => {
    expect(bottom).toBeGreaterThan(size.height - 50);
});

我知道页脚元素已定义，因为我已经对它进行了运行其他测试，以检查其颜色和大小等内容。

为什么我被告知 getBoundingClientRect 不是函数？

Answer 1

发生此错误是因为您试图在 ElementFinder 类型上调用 getBoundingClientRect() 函数，但 ElementFinder 没有且无法调用 getBoundingClientRect功能。

getBoundingClientRect 函数可以从 Element 对象调用，它是最通用的基础 class，Document 中的所有对象都继承自该基础。它只有各种元素共有的方法和属性。更具体的 classes 继承自 Element。

因此，在您的情况下，您应该使用 executeScript 在当前选定帧的上下文中执行 JavaScript 或 window。

解决方案：

// Promise based

const footer = $('lib-footer > mat-toolbar'); // or element(by.css(''));
let viewportOffset = '';
browser.executeScript('return arguments[0].getBoundingClientRect()', footer).then(value => {
 viewportOffset = value;
});
const bottom = viewportOffset.bottom;

browser.driver.manage().window().getSize().then((size) => {
  expect(bottom).toBeGreaterThan(size.height - 50);
});


// async/await - Highly recommended. Don't forget to add `async` before the function to use `await`


const footer = $('lib-footer > mat-toolbar');
const viewportOffset = await browser.executeScript('return arguments[0].getBoundingClientRect()', footer);
const bottom = viewportOffset.bottom;
const windowSize = await browser.driver.manage().window().getSize();

expect(bottom).toBeGreaterThan(windowSize.height - 50);

为什么我不能使用 getBoundingClientRect()？

Why can't I use getBoundingClientRect()?

html

typescript

protractor