Puppeteer JS 等待能够 select 多个下拉菜单

Question

目前我正在尝试 select 从动态网页中选择多个下拉菜单。每个 selection 都必须 selected 才能获得我需要的值。

当我加载页面并尝试 select 下拉列表时，如下所示：

  await page.evaluate(() => {
  document.querySelector('#paper > option:nth-child(2)').selected = true;
  document.querySelector('#color > option:nth-child(3)').selected = true;
  document.querySelector('#coating > option:nth-child(2)').selected = true;
  })

我无法 select 下拉菜单。我认为这是因为页面尚未加载。为了解决这个问题，我添加了一个名为 sleep 的阳极模块。

我这样导入睡眠模块：

const sleep = require('sleep');

然后我尝试在每个 select 之间睡眠一秒钟，这样它就会有时间加载。

  sleep.sleep(1);
  await page.evaluate(() => {
  document.querySelector('#paper > option:nth-child(2)').selected = true;
  sleep.sleep(1);
  document.querySelector('#color > option:nth-child(3)').selected = true;
  sleep.sleep(1);
  document.querySelector('#coating > option:nth-child(2)').selected = true;
  })

我的问题是第一次睡眠有效。但是 await page.evaluate 中的 sleep.sleep(1) 表示 sleep 是未定义的。我不确定为什么会这样，因为 const sleep 是在我的文档顶部声明的，所以它应该是全局范围的。谁能指导我为什么睡眠不起作用？

Answer 1

您应该使用 page.waitForSelector() 来确保在尝试更改相应的 selected 属性之前已加载元素：

await Promise.all([
  page.waitForSelector('#paper > option:nth-child(2)'),
  page.waitForSelector('#color > option:nth-child(3)'),
  page.waitForSelector('#coating > option:nth-child(2)'),
]);

await page.evaluate(() => {
  document.querySelector('#paper > option:nth-child(2)').selected = true;
  document.querySelector('#color > option:nth-child(3)').selected = true;
  document.querySelector('#coating > option:nth-child(2)').selected = true;
});

你的 sleep 函数在 page.evaluate() 中不起作用的原因是因为函数中的代码是在页面 DOM 环境中执行的，而不是 Node.js/Puppeteer 环境.

您可以将参数传递给 page.evaluate()，但参数必须是 serializable:

const example = 'Hello, world!';
const result = await page.evaluate(passed_argument => passed_argument, example);

console.log(result); // 'Hello, world!'

Puppeteer JS 等待能够 select 多个下拉菜单

Puppeteer JS waiting to be able to select multiple drop downs

javascript

puppeteer