从PhantomJS迁移到Puppeteer

https://github.com/ariya/phantomjs

https://github.com/GoogleChrome/puppeteer

因为Puppeteer 是google的亲儿子，所以我还是决定抱更粗的大腿！

——比如没有大腿的phantomjs两名开发者已经： 冻结状态，无人维护

Puppeteer

Puppeteer(中文翻译”木偶”) 是 Google Chrome 团队官方的无界面（Headless）Chrome 工具，它是一个 Node 库，提供了一个高级的 API 来控制 DevTools协议上的无头版 Chrome 。也可以配置为使用完整的 Chrome。

Puppeteer 中的 API 分层结构

• Browser： 对应一个浏览器实例，一个 Browser 可以包含多个 BrowserContext

• BrowserContext： 对应浏览器一个上下文会话，就像我们打开一个普通的 Chrome 之后又打开一个隐身模式的浏览器一样，BrowserContext 具有独立的 Session(cookie 和 cache 独立不共享)，一个 BrowserContext 可以包含多个 Page

• Page：表示一个 Tab 页面，通过 browserContext.newPage()/browser.newPage() 创建，browser.newPage() 创建页面时会使用默认的 BrowserContext，一个 Page 可以包含多个 Frame

• Frame: 一个框架，每个页面有一个主框架（page.MainFrame()）,也可以多个子框架，主要由 iframe 标签创建产生的

• ExecutionContext： 是 javascript 的执行环境，每一个 Frame 都一个默认的 javascript 执行环境

• ElementHandle: 对应 DOM 的一个元素节点，通过该该实例可以实现对元素的点击，填写表单等行为，我们可以通过选择器，xPath 等来获取对应的元素

• JsHandle：对应 DOM 中的 javascript 对象，ElementHandle 继承于 JsHandle，由于我们无法直接操作 DOM 中对象，所以封装成 JsHandle 来实现相关功能

• CDPSession：可以直接与原生的 CDP 进行通信，通过 session.send 函数直接发消息，通过 session.on 接收消息，可以实现 Puppeteer API 中没有涉及的功能

• Coverage：获取 JavaScript 和 CSS 代码覆盖率

• Tracing：抓取性能数据进行分析

• Response： 页面收到的响应

• Request： 页面发出的请求

基本使用

这里不解释，直接看文档

Puppeteer实现选择性截图

截图的代码很简单

const puppeteer = require('puppeteer');
const start = async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    page.setViewport({width:1920*1,height:1080*1}); 
    page._emulationManager._client.send(
        'Emulation.setDefaultBackgroundColorOverride', { color: { r: 0, g: 0, b: 0, a: 0 } });
    await page.goto('https://baidu.com',{waitUntil :"load|domcontentloaded|networkidle2",timeout:3000});
 
    await  page.screenshot({
        path:'baidu.png',fullPage:true
    });
    await page.close();
    await browser.close();
}
start();

也可截一部分区域

const clip = await page.evaluate(() => {//调用evaluate 方法返回id 为form元素的位置信息
  let { x, y, width, height } = document.getElementById('form').getBoundingClientRect();
  return { x, y, width, height };
});
await  page.screenshot({
  path:'baidu.png',
  clip //设置clip 属性
});

针对元素进行截图

let form = await page.$('#form');//获取页面Dom对象form
form.screenshot({//调用页面内Dom对象的screenshot 方法进行截图
  path:'form.png'
});

现截的图跟预设的效果不一致，不是透明的，需要设置透明属性,最终修改完毕如下

参考文章：

Puppeteer已经取代PhantomJs https://cloud.tencent.com/developer/article/1612741

转载本站文章《从PhantomJS迁移到Puppeteer》,
请注明出处：https://www.zhoulujun.cn/html/webfront/browser/webkit/2020_0917_9165.html