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

女爷i 2023-06-15 07:08 27阅读 0赞

## 目标 ##

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

#### 主要学习以下知识点 ####

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

详细api 可参考  
https://blog.csdn.net/mengxiangxingdong/article/details/99237204

### 开始 ###

本文章代码均在 上传在  
https://gitee.com/hugo110/puppeteer-demo  
效果图

### 1.代码 ###

/*
     获取浏览器中的缓存资源
     目前例子是爬取博客的一个头像
     */
    const puppeteer = require('puppeteer'); //引入puppeteer库
    const pUtil = require('./util/PuppeteerUtil.js');
    
    (async () => {
        
        const browser = await puppeteer.launch({
            //启动浏览器
            headless: false,   //代码运行时打开浏览器方便观察
            // devtools:true   //打开f12界面
        });
        const page = await browser.newPage();  //打开浏览器的一个tab 页
        await page.goto('https://www.baidu.com/');  //访问网址 https://www.baidu.com/
        let img_url = "https://www.baidu.com/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 = 'https://ss1.bdstatic.com/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 browser.close();  //关闭浏览器
    })();

pUtil

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

## 参考博客 ##

https://zhaoqize.github.io/puppeteer-api-zh\_CN/\#?product=Puppeteer&version=v1.19.0&show=api-pageevalselector-pagefunction-args-1

https://blog.csdn.net/u013356254/article/details/88564342

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect