Unable to locate/extract the text using xpath on taiko

[sankarasai18-gauge]

Hi,
I have the below code and I am trying to extract/locate the element (v3 messageBoxContent)'s text Hello User, You are ready to onboard using the below xpath's and taiko always fails with the below xpath's. But I am able to locate and extract the text by using the same xpath on the browser console without any issues.
Could you please help me to locate/extract the text of the below element (v3 messageBoxContent) in the code. TIA!

<center>
    <div class="v3 messageBox warning">
        <div class="v3 messageBoxIcon">
               <i class="fa fa-exclamation-circle"> ::before </i> 
        </div>
               <div class="v3 messageBoxContent">Hello User, You are ready to onboard</div> 
      </div>
 </center>

Xpath's Tried

//div[@class="v3 messageBoxContent"]
//center[1]//div//div[2]
//div[@class="v3 messageBox warning"]/div[@class="v3 messageBoxContent"]
//div[@class="v3 messageBox warning"]/div[@class="v3 messageBoxContent"][1]/text()[1]
//div[@class="v3 messageBox warning"]/div[@class="v3 messageBoxContent"]/text()

[sankarasai18-gauge]

@zabil @NivedhaSenthil Could you please take a look into this one when you get a chance?. TIA!

[zabil]

Try using a css selector instead for e.g.

let actualMessg = await $('div.messageBoxContent').text()

[sankarasai18-gauge]

Thank you, unfortunately the css selector gets highlighted and works fine through the browser console but not through taiko code. 😞 Below is the same failure message we get as the above one.

Failure Message

Error Message: Error: CustomSelector with query () => `div.messageBoxContent`  not found
        Stacktrace: 
        Error: CustomSelector with query () => `div.messageBoxContent`  not found
            at DollarWrapper.firstElement (node_modules/taiko/lib/elementWrapper/helper.js:8:11)

[zabil]

This usually happens when the element is actually not there on the page. Alternatively you can also use the evaluate API to run a javascript to fetch the element.

For example.

await evaluate(() => {
 return document.querySelector(<anyselectorthatworks>).innerText
} )

[sankarasai18-gauge]

Thanks @zabil , but actually the element is available on the page where I am trying to extract the message. When I try to use the below code I get the errors. Can you please help me to fix it.

Code
exports.actualMessg = async () => { await evaluate($(${rcpPage.MessgLoc()}), (elem) => { return elem innerText() }); }

Errors
await evaluate($(${rcpPage.MessgLoc()}), (elem) => { return elem innerText() }); ^^^^^^^^^ SyntaxError: Unexpected identifier at wrapSafe (internal/modules/cjs/loader.js:915:16) at Module._compile (internal/modules/cjs/loader.js:963:27) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10) at Module.load (internal/modules/cjs/loader.js:863:32) at Function.Module._load (internal/modules/cjs/loader.js:708:14) at Module.require (internal/modules/cjs/loader.js:887:19) at C:\Users\San\AppData\Roaming\gauge\plugins\js\2.4.0\src\req-manager.js:43:18 at Req.load (C:\Users\San\AppData\Roaming\gauge\plugins\js\2.4.0\src\req-manager.js:50:5) at fn (C:\Users\San\AppData\Roaming\gauge\plugins\js\2.4.0\src\req-manager.js:61:20)

[sankarasai18-gauge]

@zabil Could you please help me with the above?.