driver.execute() TypeError elem[prop] is not a function in NodeJs WebdriverIO

Question

I am trying highlight a element. Please help me on this code. (I am a beginner to nodejs)

    class Utilities {
    
        async highlight(element){
               await browser.execute((userelement)=>{
                    userelement.style.backgroundColor="red";
                 },element);
                }
    
    }

module.exports = new Utilities();

---

in Stepdef :

Utilities.highlight(LoginPage.getusername);

---

in PageObjects:

class LoginPage{
    get getusername(){
        return $('#username');
    }
}

---

Error :

TypeError: elem[prop] is not a function
    at \node_modules\@wdio\utils\build\shim.js:253:38
    at processTicksAndRejections (node:internal/process/task_queues:96:5)..

---

Detailed Error Log:

[0-0] 2022-07-18T12:50:08.380Z INFO webdriver: DATA { [0-0] script: 'return ((userelement)=>{\r\n' + [0-0] '
userelement.style.backgroundColor="red";\r\n' + [0-0] '
}).apply(null, arguments)', [0-0] args: [ Promise { } ] [0-0] } [0-0] 2022-07-18T12:50:08.398Z INFO webdriver: RESULT { [0-0] 'element-6066-11e4-a52e-4f735466cecf': 'be8745a8-6499-482b-af98-8dc191b88452' [0-0] } [0-0] Error in "0: When I login with nithildani and asdas123" TypeError: elem[prop] is not a function at C:\Users\nitarula\Documents\Sample2\node_modules@wdio\utils\build\shim.js:253:38 at processTicksAndRejections (node:internal/process/task_queues:96:5) [0-0] 2022-07-18T12:50:08.417Z INFO webdriver: COMMAND deleteSession() [0-0] 2022-07-18T12:50:08.417Z INFO webdriver: [DELETE] http://localhost:9515/session/36ae82293a3b853a2965d478c51f4235 [0-0] 2022-07-18T12:50:08.425Z INFO webdriver: RESULT { [0-0]
'element-6066-11e4-a52e-4f735466cecf': '66da9a07-388f-445c-90ef-9c7a12c29856' [0-0] } [0-0] 2022-07-18T12:50:08.429Z INFO webdriver: COMMAND elementClear("66da9a07-388f-445c-90ef-9c7a12c29856") [0-0] 2022-07-18T12:50:08.429Z INFO webdriver: [POST] http://localhost:9515/session/36ae82293a3b853a2965d478c51f4235/element/66da9a07-388f-445c-90ef-9c7a12c29856/clear [0-0] 2022-07-18T12:50:08.438Z WARN webdriver: Request failed with status 500 due to javascript error: Cannot set properties of undefined (setting 'backgroundColor') [0-0] (Session info: chrome=103.0.5060.114) [0-0] 2022-07-18T12:50:08.439Z INFO webdriver: Retrying 1/3 [0-0] 2022-07-18T12:50:08.439Z INFO webdriver: [POST] http://localhost:9515/session/36ae82293a3b853a2965d478c51f4235/execute/sync [0-0] 2022-07-18T12:50:08.440Z INFO webdriver: DATA { [0-0] script: 'return ((userelement)=>{\r\n' + [0-0] '
userelement.style.backgroundColor="red";\r\n' + [0-0] '
}).apply(null, arguments)', [0-0] args: [ Promise { [Element] } ] [0-0] } [0-0] C:\Users\nitarula\Documents\Sample2\node_modules@wdio\utils\build\shim.js:253 [0-0] return elemprop; [0-0]
^ [0-0] [0-0] TypeError: elem[prop] is not a function [0-0] at C:\Users\nitarula\Documents\Sample2\node_modules@wdio\utils\build\shim.js:253:38 [0-0] at processTicksAndRejections (node:internal/process/task_queues:96:5) { [0-0]
[Symbol(originalCallSite)]: [ CallSite {}, CallSite {} ], [0-0]
[Symbol(mutatedCallSite)]: [ CallSite {}, CallSite {} ] [0-0] } [0-0] FAILED in chrome - C:\Users\nitarula\Documents\Sample2\features\login.feature 2022-07-18T12:50:08.499Z INFO @wdio/cli:launcher: Run onWorkerEnd hook 2022-07-18T12:50:08.502Z INFO @wdio/cli:launcher: Run onComplete hoo

Thanks in Advance

Answer 1

The main problem with your code was that your input to browser.execute() does not work in a browser context. It will not have access to your webdriverio queried elements. Instead, you should pass something which works in a browser context. So, you have to pass a selector instead of the selected element.

  async highlightById(element) {
    await browser.execute((arg) => {
      document.querySelector(arg).style.backgroundColor = 'red';
    }, element);
  }

await Utilities.highlightById('#username');
or
await Utils.highlightById(`#${await LoginPage.getUsername.getAttribute('id')}`);