使用 puppeteer 获取完整的网页源代码 html - 但总是缺少某些部分

Question

我正在尝试抓取以下网页上的特定字符串：

https://www.booking.com/hotel/nl/scandic-sanadome-nijmegen.en-gb.html?checkin=2020-09-19;checkout=2020-09-20;i_am_from=nl;

我想从这个网页源中获取的信息是下面字符串中的数字序列（这是我可以通过鼠标右键搜索的信息->

"View Page source"): 
 name="nr_rooms_4377601_232287150_0_1_0"/ name="nr_rooms_4377601_232287150_1_1_0"

我正在使用“puppeteer”，下面是我的代码：

const puppeteer = require('puppeteer');
(async() => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    //await page.goto('https://example.com');
    const response = await page.goto("My-url-above");
    let bodyHTML = await page.evaluate(() => document.body.innerHTML);
    let outbodyHTML = await page.evaluate(() => document.body.outerHTML);
    console.log(await response.text());
    console.log(await page.content());
    await browser.close();
})()

但我无法在 response.text() 或 page.content() 中找到我要查找的字符串。

我在页面中使用了错误的方法吗？

如何在网页上转出真正的页面源码，和鼠标右键一模一样的？

Answer 1

如果您调查这些字符串出现的位置，那么您可以在具有特定 class (.hprt-nos-select):

的 <select> 元素中看到

<select
  class="hprt-nos-select"
  name="nr_rooms_4377601_232287150_0_1_0"
  data-component="hotel/new-rooms-table/select-rooms"
  data-room-id="4377601"
  data-block-id="4377601_232287150_0_1_0"
  data-is-fflex-selected="0"
  id="hprt_nos_select_4377601_232287150_0_1_0"
  aria-describedby="room_type_id_4377601 rate_price_id_4377601_232287150_0_1_0 rate_policies_id_4377601_232287150_0_1_0"
>

您将等到此元素加载到 DOM，然后它也会在页面源代码中可见：

await page.waitForSelector('.hprt-nos-select', { timeout: 0 });

但您的问题实际上在于，您正在访问的 url 有一些额外的 URL 参数： ?checkin=2020-09-19;checkout=2020-09-20;i_am_from=nl; puppeteer 没有考虑到这些（你可以截取整页截图，你会看到它仍然有默认的酒店搜索表单，没有具体的酒店优惠，而不是你的期待）。

您应该使用 puppeteer（page.click() 等）与搜索表单进行交互以自行设置日期和来源国家/地区以获得预期的页面内容。

使用 puppeteer 获取完整的网页源代码 html - 但总是缺少某些部分

Get complete web page source html with puppeteer - but some part always missing

javascript

web-scraping

web-crawler

puppeteer

headless-browser