node.js - 抓取 Fandango Node.js

Question

第一次尝试在 Node.js 中进行抓取。电影列表fandango嵌套在几个 div 中，这是否意味着我会执行以下操作: $('div[id="page"]').find('div > div > div > div > ul > li').each 。然后，当我在控制台中记录 html 时，它似乎与我在 Chrome 上检查它时不同。某些电影丢失，并且日志中的 ul 类名称不同。这正常吗？

 const axios = require('axios');
 const cheerio = require('cheerio');

 const url = 'https://www.fandango.com/movies-in-theaters';

 axios(url)
   .then(response => {
     const html = response.data;
     console.log(html);
     const $ = cheerio.load(html);
     const movies = $('ul.browse-movielist > li');

     const openingThisWeek = [];

     movies.each(function () {
        console.log("Found the list");   // this doesn't get called
        const title = $(this).find('.heading-style-1 browse-movielist--title poster-card--title').text();
        openingThisWeek.push({
        title,
      });
     });

     console.log(openingThisWeek);   
})
.catch(console.error);

Answer 1

Fandango 使用客户端渲染开场影片，因此我们无法使用 axios 来获取它。

另一种方法是使用 headless 浏览器来抓取数据。我正在使用puppeteer

const puppeteer = require("puppeteer");
const cheerio = require("cheerio");

(async () => {
  const url = "https://www.fandango.com/movies-in-theaters";

  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto(url);
  const body = await page.evaluate(() => document.body.outerHTML);
  await browser.close();
  const $ = cheerio.load(body);
  const movies = [];
  $(".browse-movielist > li").each((i, item) => {
    const $item = $(item);
    const title = $item.find(".poster-card--title").text();
    movies.push({
      title
    });
  });
  console.log(movies);
})();