阅读 54

第一章-puppeteer与函数计算的紧密结合

收获

首先,我确定的告诉你最关心的话题,该文章程序以最简单的方式运行并且能够跑起来(因此其中涉及到翻墙下载,在我部署环境的过程中就遇见很多坑),我会把整个程序环境给你且能.下载既running.

超人牙

亮点

这个程序已经集成到阿里云的函数计算,只需要把文件打包上传函数计算,不用部署环境直接运行.这是一个非常大的亮点.

部署不是难,下载比较难.真的难~(我文章会把环境给出来的)

总该介绍一下它吧?

我的见解

puppeteer n. 演木偶戏的人;操纵木偶的人. 就是你写程序,操纵网页. 比如你人工填写一个网页表单需要10分钟(包括上传图片). 而puppeteer只需要1分钟.

官方解释

puppeteer n. 演木偶戏的人;操纵木偶的人 Puppeteer 是一个 Node 库,它提供了一个高级 API 来通过 DevTools 协议控制 Chromium 或 Chrome。Puppeteer 默认以 headless 模式运行,但是可以通过修改配置文件运行“有头”模式。Headless Chrome 是 Chrome 浏览器的无界面形态,可以在不打开浏览器的前提下,使用所有 Chrome 支持的特性运行你的程序

它能做什么?

我的见解
  • 爬虫
  • 程序模拟用户操作 ######官方解释
  • 生成页面 PDF。
  • 抓取 SPA(单页应用)并生成预渲染内容(即“SSR”(服务器端渲染))。
  • 自动提交表单,进行 UI 测试,键盘输入等。
  • 创建一个时时更新的自动化测试环境。 使用最新的 JavaScript 和浏览器功能直接在最新版本的Chrome中执行测试。
  • 捕获网站的 timeline trace,用来帮助分析性能问题。
  • 测试浏览器扩展。

它与其他类似框架的优势?

表格对比

image.png
根据上面的图,第二名Node puppeteer(对于前端人员来说学习成本低),使用的是node,第三名,用Python做爬虫的各位,不要再用PhantomJS了,因为PhantomJS已死,证实:超人牙,第一名是使用的python,对前端人员不友好.但是我再送一篇文章给你们

为什么why-puppeteer-is-better-than-selenium

超人牙

中文文档传送门

超人牙

示例代码(到**网站,返回该页面的数据)

'use strict';

const setup = require('./starter-kit/setup');
const fs = require('fs');

exports.handler = async (request, response, context) => {
  const browser = await setup.getBrowser(context);
  const queries = request.queries;

  exports.run(browser, queries).then(result => response.send(result)).catch(err => response.send(err));
};

exports.run = async (browser, queries) => {
  let account = queries['account'] ? queries['account'] : ''; 
  let password = queries['password'] ? queries['password'] : ''; 
  const page = await browser.newPage();
  await page.goto('https://www.*******/');
  await page.waitFor(3000);
  let sText = await page.$eval('body', el => el.innerText);
  return sText;
};
复制代码

常见问题

  • 如果获取不到dom,需要你去看看是否该dom在一个iframe内.
 let iframe = await page.frames().find(f => f.name().substr(0, 3) == '155');
复制代码
  • 如果获取元素的节点是动态变化怎么办? 删除动态id或者name,再右键获取dom节点
  • 适当的等待优化程序
 await page.waitFor(2000); 
复制代码
  • 获取内容
let sText await page.$eval('body > div.popbox > ul', el => el.innerText); 
复制代码
  • 读取远程图片并存储到本地,然后上传input标签(图片)
  // 上传反面照片
  try {
    let url = cardback1; // 第二步骤的第一个身份证
    let opts = {
      url: url // 图片地址
    };
    var time2 = new Date().getTime();
    let path = "/tmp/"+ time2+".png";
    let r1 = await new Promise((resolve, reject) => {
      request.get(opts).on('response', response => {
        console.log("img type:", response.headers['content-type']);
      }).pipe(fs.createWriteStream(path)).on("error", e => {
        console.log("pipe error", e);
        resolve('');
      }).on("finish", () => {
        console.log("finish");
        resolve("ok");
      }).on("close", () => {
        console.log("close");
        resolve();
      });
    });
  } catch (e) {
    console.log(e);
  }
  await iframe7.waitFor(3000);


  // 上传背面身份证
  console.log('开始上传背面身份证');
  const filePath2 = "/tmp/"+ time2+".png";
  const input2 = await iframe7.$('#fm');
  await input2.uploadFile(filePath2);
  await iframe7.waitFor(5000);
  console.log('完成背面的身份证上传');
复制代码

程序

  • 使用 : 下载安装包,解压,到根目录: npm run local 完事~
  • 解释 : 程序比较大(包含了Chromium浏览器)
  • 下载地址 : pan.baidu.com/s/170Z1naEU…
  • 提取码 : 4jxe 大概450M
  • 下载不下来的可以私聊我发给你哦~
关注下面的标签,发现更多相似文章
评论