在用户触发事件后在 puppeteer 中解析 page.evaluate()

Question

我运行 page.evaluate() 必须 return 我在页面上的输入字段中手动输入的内容。我写了一段我知道行不通的代码，但它显示了它背后的意图：

let inputText = await page.evaluate(() => {
    // some non-automated process done by hand
    let sendButton = document.querySelector(".button");
    sendButton.addEventListener("click", () => {
        let text = document.querySelector(".input").value;
        return text;
    }, false);
    // wait for text?

});
console.log(inputText);

如何让 puppeteer 在 page.evaluate() 中等待我的事件触发，然后 return 将我输入的文本返回到 nodejs 上下文？

Answer 1

你不能让 evaluate 等待那个，但你可以使用 exposeFunction 注册一个回调函数。

await page.exposeFunction('processInput', inputText => console.log(inputText));

await page.evaluate(() => {
    // some non-automated process done by hand
    let sendButton = document.querySelector(".button");
    sendButton.addEventListener("click", () => {
        let text = document.querySelector(".input").value;

        processInput(text);

    }, false);
});

正如 miyagisan 评论的那样，这是一个好主意，也可以 return 一个承诺：

const inputText = await page.evaluate(() => { 
    return new Promise((resolve, reject) => { 
        let sendButton = document.querySelector(".button"); 
        sendButton.addEventListener("click", () => { 
            let text = document.querySelector(".input").value; 
            resolve(text); 
        }, false); 
    }); 
});

在用户触发事件后在 puppeteer 中解析 page.evaluate()

Resolve page.evaluate() in puppeteer after user triggered event

javascript

puppeteer