javascript - Puppeteer 焦点循环遍历输入字段

Question

我有一个包含 50 个输入字段的页面，我正在尝试更改使用 Puppeteer 的值。
不幸的是，只是设置如下值不起作用，因为网站没有检测到该字段的更改:

await page.evaluate(() => {
    document.querySelectorAll('input[name="price"]').forEach(function(item) {
        item.value = "14,50";
    });
});

所以我发现我必须使用 focus()和 keyboard.type() .我遇到的问题是输入字段没有唯一的名称，而且我不知道如何写 focus()循环输入的选择器。

<input _ngcontent-lhe-c73="" id="id" type="text" name="price" autocomplete="off" class="price-input" placeholder="vul de prijs in">

const inputs = await page.$eval('.price-input');
for (let i = 0; i < inputs.length; i++) {
    await page.evaluate(() => { document.querySelectorAll('input[name="price"]')[i].value = ''; });
    await page.focus('input[name="price"]['+i+']'); // this is invalid
    await page.keyboard.type('14,50');
}

我该如何写 focus()选择器在循环中选择正确的值？我一直在尝试 nth-child 但这似乎不可能。

Answer 1

你可以尝试这样的事情:

const inputs = await page.$$('.price-input');
for (const input of inputs) {
    await page.evaluate((element) => { element.value = ''; }, input);
    await input.focus(); // May be redundant as we use the element for typing below.
    await input.type('14,50');
}