Search code examples
javascriptdombrowserwebdriver-io

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

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

Solution

  • 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()