基于JavaScript、puppeteer的爬虫

前期准备:

npm puppeteer

import puppeteer from 'puppeteer';

puppeteer文档

第一步:启动浏览器,跳转到需要爬取的页面

javascript 复制代码
const browser = await puppeteer.launch({ headless: false });
    const page = await browser.newPage();

    await page.goto(url, { waitUntil: 'networkidle2' });

第二步:打开需要爬取的网页,按"F12"查看前端的dom,查看我们想获取的文本信息的父级类名,例如:

第三步,通常列表页面都有下拉刷新,我们需要写一个脚本让页面下拉刷新

我要爬取的页面下拉到一定的地步后会有一个"加载更多"按钮,需要点击,直到页面无法滚动,且没有加载更多按钮的时候停止,脚本参考如下:

javascript 复制代码
 // 定义滚动函数
  const scrollPage = async () => {
    const distance = 100000; // 每次滚动的距离
    const delay = 2000; // 每次滚动后的延迟
    let previousHeight = await page.evaluate('document.body.scrollHeight');

    while (true) {
        await page.evaluate(`window.scrollBy(0, ${distance})`);
        await new Promise(resolve => setTimeout(resolve, delay));

        const newHeight = await page.evaluate('document.body.scrollHeight');
        if (newHeight === previousHeight) {
            const loadMoreButton = await page.$('.类名1.类名2');//锁定"加载更多按钮"
                if (loadMoreButton) {
                    await loadMoreButton.click();
                    console.log('点击加载更多结果按钮');
                    await new Promise(resolve => setTimeout(resolve, delay)); // 等待加载更多内容
                } else {
                    console.log('已滚动到底部,没有更多内容加载');
                    break;
                }
        }
        
        previousHeight = newHeight;
    }
};

await scrollPage();

第四步,封装成对象并打印

第三步的脚本让我们把页面加载到拥有全部数据的状态,现在需要将第二步收集的类名里的文本封装成数组

javascript 复制代码
await page.waitForSelector('.卡片父级类名', { timeout: 60000 });//卡片最外层
const info= await page.evaluate(() => {
    const cardElements = document.querySelectorAll('.卡片父级类名');//获取所有卡片
    const arr= [];
    cardElements.forEach(hotel => {
        const nameElement = hotel.querySelector('[需要的元素1的属性]');
        const priceElement = hotel.querySelector('[需要的元素2的属性]');
        const name = nameElement ? nameElement.innerText.trim() : null;
        const price = priceElement ? priceElement.innerText.trim() : null;
        if (name || price) {
            arr.push({ name, price });
        }
    });
    return arr;
});

console.log(JSON.stringify(info, null, 2))

// 完事关闭浏览器
await browser.close();

运行

相关推荐
Max_uuc7 分钟前
【C++ 硬核】打破嵌入式 STL 禁忌:利用 std::pmr 在“栈”上运行 std::vector
开发语言·jvm·c++
故事不长丨8 分钟前
C#线程同步:lock、Monitor、Mutex原理+用法+实战全解析
开发语言·算法·c#
牵牛老人10 分钟前
【Qt 开发后台服务避坑指南:从库存管理系统开发出现的问题来看后台开发常见问题与解决方案】
开发语言·qt·系统架构
froginwe1119 分钟前
Python3与MySQL的连接:使用mysql-connector
开发语言
喵手21 分钟前
Python爬虫实战:公共自行车站点智能采集系统 - 从零构建生产级爬虫的完整实战(附CSV导出 + SQLite持久化存储)!
爬虫·python·爬虫实战·零基础python爬虫教学·采集公共自行车站点·公共自行车站点智能采集系统·采集公共自行车站点导出csv
喵手29 分钟前
Python爬虫实战:地图 POI + 行政区反查实战 - 商圈热力数据准备完整方案(附CSV导出 + SQLite持久化存储)!
爬虫·python·爬虫实战·零基础python爬虫教学·地区poi·行政区反查·商圈热力数据采集
xjt_090133 分钟前
基于 Vue 3 构建企业级 Web Components 组件库
前端·javascript·vue.js
灵感菇_37 分钟前
Java HashMap全面解析
java·开发语言
杜子不疼.39 分钟前
PyPTO:面向NPU的高效并行张量编程范式
开发语言
lly20240639 分钟前
C# 结构体(Struct)
开发语言