Puppeteer：从点击输入标签按钮后不刷新的页面抓取html答案

【问题标题】：Puppeteer: Grabbing html from page that doesn't refresh after input tag button is clickedPuppeteer：从点击输入标签按钮后不刷新的页面抓取html
【发布时间】：2023-04-03 09:30:01
【问题描述】：

单击输入标记按钮后，我试图获取一些 html。我正在单击带有 page.evaluate() 的按钮，因为 page.click() 似乎不适用于输入标签按钮。我已经尝试在 puppeteer 启动选项中使用 headless:false 进行可视化调试，以验证浏览器在单击按钮后确实导航到该点。我不确定为什么 page.content() 在单击按钮之前返回 html，而不是在事件发生后返回 html。

const puppeteer = require('puppeteer');
const url = 'http://www.yvr.ca/en/passengers/flights/departing-flights';
const fs = require('fs');
const tomorrowSelector = '#flights-toggle-tomorrow'

puppeteer.launch().then(async browser => {
    const page = await browser.newPage();
    await page.goto(url);
    await page.evaluate((selector)=>document.querySelector(selector).click(),tomorrowSelector);
    let html = await page.content();

    await fs.writeFile('index.html', html, function(err){
        if (err) console.log(err);
        console.log("Successfully Written to File.");
    });
   await browser.close();
  });

【问题讨论】：

在page.evaluate() 之后添加await page.waitFor(500)。您只需稍等片刻，页面即可完成对其 DOM 的更新。

标签： javascript node.js web-scraping puppeteer

【解决方案1】：

您可以单击收音机的标签。此外，您需要等待状态变化的迹象（对于 XHR/fetch 响应或新选择器）。例如，此代码适用于我，但您可以使用任何其他条件或等待几秒钟。

const fs = require('fs');
const puppeteer = require('puppeteer');

const url = 'http://www.yvr.ca/en/passengers/flights/departing-flights';

const tomorrowLabelSelector = 'label[for=flights-toggle-tomorrow]';
const tomorrowLabelSelectorChecked = '.yvr-form__toggle:checked + label[for=flights-toggle-tomorrow]';

puppeteer.launch({ headless: false }).then(async (browser) => {
  const page = await browser.newPage();
  await page.goto(url);
  await Promise.all([
    page.click(tomorrowLabelSelector),
    page.waitForSelector(tomorrowLabelSelectorChecked),
  ]);

  const html = await page.content();

  await fs.writeFile('index.html', html, (err) => {
    if (err) console.log(err);
    console.log('Successfully Written to File.');
  });
  // await browser.close();
});

【讨论】：