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

Question

我正在运行 page.evaluate() ，它必须返回我在页面上的输入字段中手动键入的内容。我编写了一段代码，我知道它不会工作，但它显示了其背后的意图:

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() 内等待我的事件触发，然后再将输入的文本返回到 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评论了，这是个好主意，还可以返回一个 promise :

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); 
    }); 
});