How to grab the underlying javascript element of an Element in WebdriverIO to be able to execute native js functions?

Question

For example in plain javascript you can do this:

obj = document.querySelector('li#wmd-help-button')
obj.getBoundingClientRect()

How to execute getBoundingClientRect or similar functions when you have the Element via WebdriverIO, namely you have the object: const elem = $('li#wmd-help-button')

The question is not specific for getBoundingClientRect but refers to all such functions which are not directly accessible from the Element class of Webdriverio

Answer 1

I think what you are looking for is Webdriver.IO's browser.execute method. https://webdriver.io/docs/api/browser/execute.

It essentially allows you to execute your script in the current page's context. Based on the code you provided, it could look like this:

 const boundingClientRect = await browser.execute(async () => {
       let obj = document.querySelector('li#wmd-help-button');
       return obj.getBoundingClientRect();
 });