How do I get a web page element using a .querySelector()? Webdriver-io

Solution for How do I get a web page element using a .querySelector()? Webdriver-io
is Given Below:

Within Webdriver-io tests, I need to get a web page element using .querySelector()

This code:

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

outputs the following output:

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

It’s not an element object, I can’t work with it any further. How do I get the web page element object?

P.S. In the browser console, the code returns the correct result

enter image description here

What ever you get in console is just a representation of element, its not the actual output.

if you want that html tag use

Within Webdriver-io tests, I need to get a web page element using .querySelector()

use:

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

or

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

UPDATE

If you need the element object just use

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

also in this case yo udon’t need executescript

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