Puppeteer初體驗

時間 2019-11-17

標籤 puppeteer 體驗简体版

原文原文鏈接

Puppeteer測試

簡介:

Puppeteer 是一個 node 庫，提供了一組用來操做 chrome 的 API，一個 headless chrome （ui界面可配置)。須要支持async, await 官方也提倡使用ES7標準javascript

運行環境:

node >= v7.6.0
npm i puppeteer -Shtml

API地址:

https://github.com/GoogleChrome/puppeteer前端

實例介紹

本次測試基於express 框架的基礎上所用到的npm包以下：

express
puppeteer

案例1：打開掘金文章並截圖

前提條件：express 基本的瞭解和使用

app.get('/', function (req, res) {
    (async ()=>{
        const browser = await (puppeteer.launch({
            timeout: 15000,
            ignoreHTTPSErrors: true,
            devtools: false,
            headless: true
        }));
        const page = await browser.newPage();
        await page.goto('https://juejin.im/post/5af8f00c51882567105fda7b');
        await page.screenshot({
            path:'photo/juejin.png',
            type:'png',
            fullPage : true
        });

    // res.send(JSON.stringify(list));
        browser.close();
    })()
}) 
複製代碼

你們也注意到了的開篇寫的puppeteer 的寫法是ES7的標準其實 promise.then的寫法很醜因此說想研究的朋友仍是用ES7的好java

上述文本中的 puppeteer.launch 函數用來運行puppeteer並建立一個bowswer的實例對象，可傳options （具體參數參照官網api）node

borwser.newPage()函數做用就是建立一個page實例用來訪問咱們的url地址，這裏我給的是掘金的一篇文章 page.goto(url) 函數的做用就是訪問當前的url地址
screenshot 函數的做用就是截圖 options 主要有 path、type、fullPage 等等就不一一介紹了。很輕鬆的就完成了截圖的操做，是否是以爲很簡單。headless chrome 與其餘幾個不一樣它的邏輯操做是用戶，而PhantomJS 、webdriver都是從程序角度出發的，因此說前端用起來會更順手。git

下面是案例截圖:

案例2：獲取掘金前端板塊列表中最新的文章數據

app.get('/juejin',function(req,res){
    (async ()=>{
        console.log(new Date());
        let browser  = await puppeteer.launch({
            timeout:15000,
            headless:false,
            ignoreHTTPSErrors:true
        });
    
        let page = await browser.newPage();
        let arr = [];
        await page.goto('https://juejin.im/welcome/frontend');
        await page.waitFor(500);
        let sources = await page.evaluate(()=>{
            let con = Array.from(document.querySelectorAll('.entry-list > li a.title'));
             return con.map(item =>item.href);
        });
        for(let i =0;i<sources.length;i++){
              let page =  await browser.newPage();
              await page.goto(sources[i],{timeout:0});
             let html =  await page.evaluate(()=>{
                  let content = Array.from(document.querySelectorAll('div.article-area'));
                  return content.map(con => con.textContent);
              })             
              arr.push({'content':html})
        }
        res.send({'data':arr});
        await browser.close();
        console.log(new Date());
        console.log('end');        
    })()
})
複製代碼