javascript - Puppeteer 调用 onChange 事件处理程序不起作用

Question

把我的头撞在这堵墙上一会儿，希望有人能给点建议。

我试图在加载到 Puppeteer 的页面中调用 onChange 处理程序。虽然我能够在选择中选择适当的选项(通过关闭 headless 来验证)，但我无法让事件处理程序运行。

1) Puppeteer 提供page.select()方法，明确说明

"Triggers a change and input event once all the provided options have been selected"

我能够选择预期的选项，但事件处理程序不会触发

await page.select('select#venue', '40');

2) 在 page.evaluate() 调用中使用 native javascript 手动选择所需的选项，然后生成一个新事件并手动使用 element.dispatchEvent(event) 例如

document.querySelector('select#venue > option:nth-child(4)').selected = "selected";

const event = new Event('change', {bubbles: true});
event.simulated = true;

document.querySelector('select#venue').dispatchEvent(event));

3) 在 page.evaluate() 调用中使用 jQuery 手动选择所需的选项，然后触发事件，例如

$("select#venue").val(17).change();

完全没有想法的人，想法赞赏!

Answer 1

我正在寻找相同的东西，以在文本字段上触发“onchange”事件。我稍微修改了你的代码，它起作用了:

const myValue = 17;
await page.$eval('#selector', (element, myValue) => {
    element.value = myValue;
    const event = new Event('change');
    element.dispatchEvent(event);
}, myValue);