如何使用 .querySelector() 获取网页元素？ Webdriver-io答案

【问题标题】：How do I get a web page element using a .querySelector()? Webdriver-io如何使用 .querySelector() 获取网页元素？ Webdriver-io
【发布时间】：2021-10-07 13:49:05
【问题描述】：

在 Webdriver-io 测试中，我需要使用 .querySelector() 获取网页元素

这段代码：

a = browser.executeScript('window.document.querySelector("div.my_diagram_div canvas")', [])
console.log('a = ', await a)

输出以下输出：

a =  { 'element-6066-11e4-a52e-4f735466cecf': 'ELEMENT-40' }

它不是元素对象，我不能再使用它了。如何获取网页元素对象？

附：在浏览器控制台中，代码返回正确的结果

【问题讨论】：

标签： javascript dom browser webdriver-io

【解决方案1】：

您在控制台中得到的只是元素的表示，而不是实际的输出。

如果你想要那个html标签使用

在 Webdriver-io 测试中，我需要使用 .querySelector() 获取网页元素

使用：

a = browser.executeScript('window.document.querySelector("div.my_diagram_div canvas").outerHTML', [])
console.log('a = ', await a)

或

a = await $('div.my_diagram_div canvas')
console.log('a = ', await a.getProperty("outerHTML"))

更新

如果您需要元素对象，请使用

   a = await browser.executeScript('window.document.querySelector("div.my_diagram_div canvas")', [])
   elm=    await $(a)
   await elm.getWindowRect()

在这种情况下你也不需要执行脚本

   elm=    await $('div.my_diagram_div canvas')
   await elm.getWindowRect()

【讨论】：

.outerHTML 返回一个字符串，而不是一个对象。我需要获取一个元素对象才能执行obj.getBoundingClientRect()方法，所以.outerHTML是不合适的。
你为什么使用 queryselector 而不是 webdriverio 选择器和webdriver.io/docs/api/webdriver/#getwindowrect
感谢您的回答，但它不起作用。出现错误：TypeError: elm.getwindowrect is not a function. 在 browser.executeScript() 之外使用 .getBoundingClientRect() 时出现完全相同的错误
没有像 getBoundingClientRect 这样的 webdrverio 方法，
updated ，对于整个用例，您不需要 browser.execute