无法使用 Puppeteer 将值分配给 InputElement

Question

我正在尝试使用 puppeteer 为 html 中的 Input/TextArea 元素设置一个值，但没有成功。代码是用打字稿转译的。

这里我以YouTube为例。

首先它应该导航到 youtube，然后 select 带有 pseudo-class css select 或者的输入框，并根据变量设置值：前缀和标题。

脚本一开始执行就关闭page.eval。我不确定我是否使用了错误的 css select 或者。当我尝试将字符串分配给“值”属性时可能会出现问题。

(async ()=>{
const searchbox='html>body>ytd-app>div>div>ytd-masthead>div:nth-of-type(3)/div:nth-of-type(2)/ytd-searchbox/form/div:first-of-type/div:first-of-type/input'
const puppeteer  = require("puppeteer")
const browser = await puppeteer.launch({headless:false, defaultViewport: null, slowMo: 100});
const page = await browser.newPage();

    await page.goto('https://www.youtube.com/');
    await uploadPhoto("Some", " Video");
    async function uploadPhoto(prefix:string, caption:string) {
        await page.evaluate( (searchbox:string, prefix:string, caption:string) => {
            (document.querySelector(searchbox) as HTMLInputElement).value = `${prefix} ${caption}`},
            searchbox, prefix, caption)
    }
    console.log("finish")
})();

Answer 1

我认为您应该从 evaluate 函数中删除所有类型，因为此函数将直接在 brwoser 中执行，我相信这些类型会使它失败：

async function uploadPhoto(prefix:string, caption:string) {
    await page.evaluate( (searchbox, prefix, caption) => {
            document.querySelector(searchbox).value = `${prefix} ${caption}`
    }, searchbox, prefix, caption)
}

一个更简单的解决方案是使用方法 type 来自 ElementHandle class:

const searchInput: ElementHandle<Element> = await page.waitForSelector(searchbox, { timeout: 5000 });
await searchInput.type("Some text to search");

或 type 来自 Page class:

await page.type(searchbox, "Some text to search");

无法使用 Puppeteer 将值分配给 InputElement

Failed to Assign Value to InputElement using Puppeteer

javascript

css

node.js

typescript

puppeteer