javascript - Puppeteer JS 等待能够选择多个下拉列表

Question

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

当我加载页面并尝试选择如下下拉菜单时:

  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 的阳极模块。

我像这样导休眠眠模块:

const sleep = require('sleep');

然后我尝试在每个选择器之间休眠一秒钟，以便有时间加载。

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

我的问题是第一次 sleep 有效。然而，await page.evaluate 中的 sleep.sleep(1) 表示 sleep 未定义。我不确定为什么会发生这种情况，因为 const sleep 是在我的文档顶部声明的，所以它应该是全局范围的。谁能指导我为什么 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!'