无法在 Webdriver-io (js) 测试中获取 DOMRect 对象答案

【问题标题】：Can't get DOMRect object within Webdriver-io (js) test无法在 Webdriver-io (js) 测试中获取 DOMRect 对象
【发布时间】：2021-07-29 08:34:25
【问题描述】：

我需要使用 .getBoundingClientRect() 函数获取网页上元素的坐标。一年前我解决这个问题时，我是这样做的：

browser.executeScript('window.document.querySelector("div.myDiagramDiv canvas").getBoundingClientRect();', [])

注意：我在 Webdriver-io 上编写自动化测试时执行此操作，因此 window 对象不可用，我必须使用 browser.executeScript。

现在，一年后，我回到我的任务，上面的代码返回一个空对象。

我尝试在测试中和浏览器控制台中调试此代码。结果如下：

Webdriver-io 测试代码：

a = browser.executeScript('window.document.querySelector("div.myDiagramDiv canvas")', [])
console.log(a) # output : { 'element-6066-11e4-a52e-4f735466cecf': 'ELEMENT-40' }
b = browser.executeScript('window.document.querySelector("div.myDiagramDiv canvas").getBoundingClientRect();', [])
console.log(b) # output : {}

在浏览器控制台中调试

a = window.document.querySelector("div.my_diagram_div canvas")
# output : <canvas tabindex="0" style="position: absolute; top:…t: 435px; cursor: auto;" width="1519" height="435">
b = a.getBoundingClientRect()
# output : DOMRect { x: 158.5, y: 132, width: 1519, height: 435, top: 132, right: 1677.5, bottom: 567, left: 158.5 }

浏览器控制台屏幕：

为什么，在测试的框架内，我获取不到 DOMRect 对象，但在浏览器控制台中却出现了？

【问题讨论】：

标签： javascript dom webdriver-io

【解决方案1】：

也许它会以这种方式工作：

a = browser.execute('window.document.querySelector("div.myDiagramDiv canvas")')
b = browser.execute((a) => {
  return a.getBoundingClientRect();
}, a);

【讨论】：