setValue is not a function webdriver io 7

Question

i'm trying to use the function of webdriver io 7 setValue() but I always received the same result.

I post my code.

This is the page object Home

import Page from './page'

class Home extends Page {

    get inputUsername () { return $('#user-name') }
   

    async open () {
        await super.open('https://www.saucedemo.com/')
    }

    async setUser () {
        this.inputUsername.setValue('fakeName')
    }

}

export default new Home()

This is the page object Page

export default class Page {
   
     open (path) {
         browser.url(path)
    }
}

This is the spec

import Home from '../pageobjects/home'

describe('login form', () => {
    it('first login', async () => {
        await Home.open()
        await Home.setUser()

    })
})

And this is the error:

TypeError: this.inputUsername.setValue is not a function

Answer 1

It happens, because you have to await element first, and then interact with it (setting value in your case).

So, add await before getting the element.

 // Home page object

 async setUser () {
   //       ⤵ - missed await
   return (await this.inputUsername).setValue('fakeName')
 }