puppeteer 教程（12） ----进阶（puppeteer 从浏览器缓存中拿文件，js，压缩文件等）

目标

处理存在淘宝滑块验证码，并封装成为工具类。。。。

主要学习以下知识点

方法名称	方法说明
	添加一个方法，在以下某个场景被调用：1.页面导航完成后，2.页面的iframe加载或导航完成。这种场景，指定的函数被调用的上下文是新加载的iframe。
page._client.send	向Chrome发送一个协议
	返回base64编码后的字符串

详细api 可参考
/mengxiangxingdong/article/details/99237204

开始

本文章代码均在 上传在
/hugo110/puppeteer-demo
效果图

1.代码

/*
 获取浏览器中的缓存资源
 目前例子是爬取博客的一个头像
 */
const puppeteer = require('puppeteer'); //引入puppeteer库
const pUtil = require('./util/');

(async () => {
    const browser = await puppeteer.launch({    //启动浏览器
        headless: false,   //代码运行时打开浏览器方便观察
        // devtools:true   //打开f12界面
    });
    const page = await browser.newPage();  //打开浏览器的一个tab 页
    await page.goto('/');  //访问网址 /
    let img_url = "/img/baidu_jgylogo3.gif";
    //测试获取图片
    let img_str = await  pUtil.getResourceContent(page, img_url);

    //验证获取的图片是否正确

    let base64_prefix = 'data:image/png;base64,';
    img_url = await  base64_prefix + img_str;
    await page.goto(img_url);

    //测试获取js 等其他资源
    let script_url = '/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/jquery/jquery-1.10.2.min_65682a2.js';
    let script_str = await  pUtil.getResourceContent(page, img_url);
    await  console.log(script_str);
    // await ();  //关闭浏览器
})();

pUtil

/**
 * 获取指定url的资源
 * @param page
 * @param url
 * @returns {Promise<*>}
 */
async function getResourceContent(page, url) {
    const {content, base64Encoded} = await page._client.send(
        '',
        {frameId: String(page.mainFrame()._id), url},
    );
    assert.equal(base64Encoded, true);
    return content;
};

参考博客

/puppeteer-api-zh_CN/#?product=Puppeteer&version=v1.19.0&show=api-pageevalselector-pagefunction-args-1

/u013356254/article/details/88564342

/zh-CN/docs/Web/API/Element/getBoundingClientRect