如何使用 Puppeteer select 网页上的下拉菜单项

Question

我正在尝试学习 JavaScript 并尝试 select 排序依据下拉菜单并单击本网站上的四个项目之一：https://www.centris.ca/en/properties~for-sale?view=Thumbnail

但我一直收到 no node found for selector。

这是我的代码：

const puppeteer = require('puppeteer')
function run () {
    return new Promise(async (resolve, reject) => {
        try {
            const browser = await puppeteer.launch({headless: false})
            const page = await browser.newPage()
            await page.goto("https://www.centris.ca/")

           
            await page.$eval('i.far.fa-search', el => el.click())
            
            await page.select("select#selectSortById", "3")
 
            //browser.close()
            return resolve(page)
        } catch (e) {
            return reject(e)
        }
    })
}
run().then(console.log).catch(console.error)

Answer 1

您使用的代码用于操作 HTML <select> 和 <option> 元素。但是您正在查看的结构只是 <div> 中的一些 <a> 样式，并且具有使它们表现得像下拉列表的 JS，但不是就 Puppeteer 而言，下拉菜单并不是真正的下拉菜单，这可能解释了为什么您的代码不起作用。

我只是select你想要的<a>（就像一个“选项”），然后点击它（）。我输入了一个 waitForFunction 来检测何时实际应用了过滤器，但这可能不是你下一步想要做的。即便如此，它有助于在转储屏幕截图之前验证它是否有效。

我也 set a user agent 如果需要，无头模式可以工作。

const puppeteer = require("puppeteer"); // ^13.0.1

let browser;
(async () => {
  browser = await puppeteer.launch({headless: true});
  const [page] = await browser.pages();
  await page.setUserAgent("Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36");
  await page.goto("https://www.centris.ca/en/properties~for-sale");
  const recent = await page.waitForSelector('#selectSortById [data-option-value="3"]');
  await recent.evaluate(el => el.click());

  // assume the whole first page are new listings and assume a few classes exist
  await page.waitForFunction(`
    document.querySelectorAll(".banner.new-property").length === 
      document.querySelectorAll(".property-thumbnail-item").length
  `);
  await page.screenshot({path: "result.png"});
})()
  .catch(err => console.error(err))
  .finally(() => browser?.close())
;

与抓取任务无关，但值得一看以改进您的 JS 代码：What is the explicit promise construction antipattern and how do I avoid it?

如何使用 Puppeteer select 网页上的下拉菜单项

How to select dropdown menu items on webpage with Puppeteer

javascript

puppeteer

dropdown