Puppeteer初体验

Puppeteer测试

简介:

Puppeteer 是一个 node 库，提供了一组用来操做 chrome 的 API， 一个 headless chrome （ui界面可配置)。 须要支持async, await 官方也提倡使用ES7标准

运行环境:

node >= v7.6.0
npm i puppeteer -S

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的好

上述文本中的 puppeteer.launch 函数 用来运行puppeteer并建立一个bowswer的实例对象，可传options （具体参数参照官网api）

borwser.newPage()函数做用就是建立一个page实例用来访问咱们的url地址，这里我给的是掘金的一篇文章 page.goto(url) 函数的做用就是访问当前的url地址
screenshot 函数的做用就是截图 options 主要有 path、type、fullPage 等等 就不一一介绍了。很轻松的就完成了截图的操做，是否是以为很简单。headless chrome 与其余几个不一样 它的逻辑操做是用户，而PhantomJS 、webdriver都是从程序角度出发的，因此说前端用起来会更顺手。

下面是案例截图:

案例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');        
    })()
})
复制代码

上述代码中的访问url就不在讲解了 主要讲解从列表中获取 全部文章的地址 而后访问个个网址提取文章的内容。

page.evaluate 函数的主要用途是添加可执行的JavaScript代码段到page中咱们须要的是获取元素中的地址，因此咱们先要找到元素的位置，开控制台找元素就不用多说了把，page.evaluate 函数中 documentSelectorAll 就是来找携带地址的a 元素。

Array.from 相似于建立新array实例同样 咱们获取到了元素的href 而后 return 出来。

for循环去遍历拿到的地址列表 建立新的page页面而后去访问 去找到文字内容的节点而后返回出来 在这里我定义了一个数据 用来接收每一个页面文章的内容，for循环完成后 经过res.send函数 返回给前端页面，这样就能够在前端看到我获取到的数据了。

borwser.close() 那确定就是关闭浏览器啊，都操做完了确定是要结束的啊。   文中的page.waitFor() 功能相似咱们的timeout 函数差很少

案例2运行截图：

案例2数据截图：

以上就是Puppeteer 的测试实例讲解，有兴趣的同窗能够深刻研究研究，案例太多就不一一解释了。

英文很差的同窗看看这个博客 把 有不少经常使用的api介绍

https://blog.csdn.net/u010142437/article/details/79136182