javascript - page.type() inside page.evaluate()

Question

I want to type some user details in following input class

<span class="myClass">
    <input aria-autocomplete="list" role="searchbox" aria-haspopup="true" class="ng-tns-c58-69" 
    autocomplete="off" type="text" aria-controls="pr_id_7_list" aria-expanded="false" aria- 
    activedescendant="p-highlighted-option" placeholder="Pass" size="24" maxlength="16">
</span>

First, I tried use page.$eval() method to input details

let domain = 'input[class=ng-tns-c58-69]';
await page.$eval(domain, (el, value) => el.value = value, pass.name);

but it threw error:

Error: Evaluation failed: DOMException: Failed to execute 'querySelector' on 'Document': 
'input[class=ng-tns-c58-69]' is not a valid selector.

Then I used page.evaluate() method as

await page.evaluate(() => {
    let domain = 'ng-tns-c58-69';
    let elements = document.getElementsByClassName(domain);
    for (let el of elements) {
        el.click();
        el.keyboard.type(passenger[0].name, {delay: 100});
    }
})

that gave error saying:

Error: Evaluation failed: TypeError: Cannot read property 'type' of undefined

I am new to puppeteer, Kindly help me. Thank you.

question from:https://stackoverflow.com/questions/65949493/page-type-inside-page-evaluate

Answer 1

As suggested by pavelsaman, used input.ng-tns-c58-69 with page.$eval() method and it worked. Here is the final code:

let domain = 'input.ng-tns-c58-69';
await page.$eval(domain, (el, value) => el.value = value, pass.name);