Unable to interact with elments using $$ sign in WebdriverIO

Question

I'm using WebdrivreIO(v7) but unable to export $$ value from another file. If I'm working with the same file it's working fine, but another file not working. not sure what's wrong here

sample.js

module.exports = {
details: $$('.agent-rows p.name'),
}

script_file.js

When("Getting the list from the listing page"){
    const sample=require("./sample.js");
    console.log("value 1"+ await sample.details) // Output : nothing empty
    console.log("value 2"+ await sample.details[0]) // Output : undefined
}

Answer 1

are you sure you are not doing any thing between constant sample, console.log lines? require will trigger the details property as soon as you call it .

so if you are trying the below thing , it won't work

const elem = sample.details
//do something for the element to be present
(await elem)[0].dosomething

because sample.details will trigger the fetch process before the element is present. await is used to wait for an async process to complete, not to trigger it.

use instead:

  module.exports = {
         details: ()=>{$$('.agent-rows p.name')},
   }

in code:

const elem = sample.details
//do something for the element to be present
(await elem())[0].dosomething  //here you are triggering the fetch