puppeteer 教程（12） ----進階（puppeteer 從瀏覽器緩存中拿文件，js，壓縮文件等）

目標

處理存在淘寶滑塊驗證碼，並封裝成爲工具類。。。。

主要學習以下知識點

方法名稱	方法說明
page.evaluateOnNewDocument	添加一個方法，在以下某個場景被調用：1.頁面導航完成後，2.頁面的iframe加載或導航完成。這種場景，指定的函數被調用的上下文是新加載的iframe。
page._client.send	向Chrome發送一個協議
Page.getResourceContent	返回base64編碼後的字符串

詳細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