彩世界开奖app官网-彩世界平台官方网址(彩票平台)
做最好的网站
来自 前端技术 2019-12-07 08:18 的文章
当前位置: 彩世界开奖app官网 > 前端技术 > 正文

Puppeteer——自动化脚本设计彩世界平台官方网址

三、开发阶段

数据在这个时代非常珍贵,按照网页的设计逻辑,选定特定的href的地址,可以先直接获取对应的资源,也可以通过再次使用 page.goto方法进入,再调用 page.evaluate() 处理逻辑,或者输出对应的PDF文件,当然也可以一口气输出多个PDF文件~

五、疑惑

1.关于全选的功能,puppeteer并不支持全选,虽然官方文档上面说了linux和windows支持全选,但是我的linux系统没有任何反应,估计并不支持。补充一下,我这里说的是实现不了ctrl A的全选功能。

第一步,安装Node.js ,推荐 第二步,在下载安装完了Node.js后, 启动windows命令行工具(windows下启动系统搜索功能,输入cmd,回车,就出来了) 第三步 需要查看环境变量是否已经自动配置,在命令行工具中输入 node -v,如果出现 v10. ***字段,则说明成功安装Node.js 第四步 如果您在第三步发现输入node -v还是没有出现 对应的字段,那么请您重启电脑即可 第五步 打开本项目文件夹,打开命令行工具(windows系统中直接在文件的url地址栏输入cmd就可以打开了),输入 npm i cnpm nodemon -g 第六步 下载puppeteer爬虫包,在完成第五步后,使用cnpm i puppeteer --save 命令 即可下载 第七步 完成第六步下载后,打开本项目的url.js,将您需要爬虫爬取的网页地址替换上去 第八步 在命令行中输入 nodemon index.js 即可爬取对应的内容,并且自动输出到当前文件夹下面的index.pdf文件中

一、了解Puppeteer

中文版资料:

官方文档(英文):

Puppeteer的API(英文):

 

复制过去 使用命令行命令 ` node 文件名 ` 就可以运行获取爬虫数据了 这个 puppeteer 的包 ,其实是替我们开启了另一个浏览器,重新去开启网页,获取它们的数据。

3.2 编码

3.2.1 工程的目录结构

node_modeles中的内容是从git上拉下来的,src文件夹写得是我自己的代码,我执行的是addConfig里面的文件,common中是一些基础性配置,contentHub配置内容较多,所以我另建了一个contentHub文件夹。

彩世界平台官方网址 1

 

3.2.2 common.js文件写的是常用的功能函数,这个是可以通用的。之前我不是说实现不了全选的功能吗,其实可以调用common中的setOption函数实现全选的功能

彩世界平台官方网址 2彩世界平台官方网址 3

 1 const config = require('./config');
 2 
 3 //根据选择器sel选择id为val的子项
 4 async function setOption(page, sel, val) {
 5   await page.evaluate((sel, val) => {
 6     document.querySelector(`${sel} > option[value="${val}"]`).selected = true;
 7     element = document.querySelector(sel);
 8     var event = new Event('change', { bubbles: true });
 9     event.simulated = true;
10     element.dispatchEvent(event);
11   }, sel, val);
12 }
13 
14 //在id为sel的输入框中输入val
15 async function setTextVal(page, sel, val) {
16   await page.evaluate((sel, val) => {
17     document.querySelector(sel).value = val;
18     element = document.querySelector(sel);
19     var event = new Event('change', { bubbles: true });
20     event.simulated = true;
21     element.dispatchEvent(event);
22   }, sel, val);
23 }
24 
25 //判断选择器是否存在
26 async function isExist(page, selector) {
27   var is = await page.evaluate((sel) => {
28     const element = document.querySelector(sel);
29     if (!element) {
30       return false;
31     } else {
32       return true;
33     }
34   }, selector);
35 
36   return is;
37 }
38 
39 //导入单个配置
40 async function importSingleConfiguration(page, configType, configContent) {
41   const confirmBtn = 'input[value="Confirm"]';
42   const configTypeSel = '#edit-config-type';
43   await setOption(page, configTypeSel, configType);
44   await page.click('#edit-import');
45   await setTextVal(page, '#edit-import', configContent);
46   await page.click('#edit-submit');
47   await page.waitForNavigation();
48 
49   const is = await isExist(page, confirmBtn);
50   if (is) {
51     await page.click(confirmBtn);
52     await page.waitForNavigation();
53     await page.waitFor(3 * config.stepWait);
54   }
55 }
56 
57 //设置checkbox中子项的值
58 async function setCheckBoxVal(page, sel, val) {
59   await page.evaluate((sel, val) => {
60     document.querySelector(sel).checked = val;
61     element = document.querySelector(sel);
62     var event = new Event('change', { bubbles: true });
63     event.simulated = true;
64     element.dispatchEvent(event);
65   }, sel, val);
66 }
67 
68 module.exports = {
69   setOption: setOption,
70   setTextVal: setTextVal,
71   importSingleConfiguration: importSingleConfiguration,
72   isExist: isExist,
73   selectAll: selectAll,
74   setCheckBoxVal: setCheckBoxVal,
75 
76 }

View Code

 

3.2.3 config.js文件中申明了许多基础性配置

我要跳转的网站url,登录的用户名和密码,站内页面跳转的路径等信息都配置在这个文件里面

彩世界平台官方网址 4彩世界平台官方网址 5

const baseUrlArray = [
     {
         url: '',
         langcode: '',
     },
];
const baseUrl = baseUrlArray[0].url;

const getUrl = (index) => {
    const baseUrl = baseUrlArray[index].url;
    return {
        hubConnection: `${baseUrl}/example`,
    };
}

const getLangCode = (index) => {
    return baseUrlArray[index].langcode;
}

module.exports = {
    secondWait: 1000,
    stepWait: 5000,
    username: '',
    password: '',
    credentials: {
        username: '',
        password: '',
    },
    baseUrl: baseUrl,
    baseUrlArray: baseUrlArray,
    urls: getUrl(0),
    getUrl: getUrl,
    getLangCode: getLangCode,
}

View Code

 

3.2.4 login.js

彩世界平台官方网址 6彩世界平台官方网址 7

 1 const config = require('./config');
 2 
 3 async function login(page, url = null) {
 4 
 5   //fill authenticate user name and password
 6   await page.authenticate(config.credentials);
 7 
 8   // goto login page
 9   await page.goto(url ? url : config.urls.login);
10   const agreeButton = await page.$('#block-popup .btn');
11   await agreeButton.click();
12 
13   //fill admin user name and password
14   await page.focus('#edit-name');
15   await page.keyboard.type(config.username);
16   await page.focus('#edit-pass');
17   await page.keyboard.type(config.password);
18 
19   const inputElement = await page.$('#edit-submit');
20   await inputElement.click();
21 
22   await page.waitForNavigation();
23 }
24 
25 module.exports = login;

View Code

 

3.2.5 好了,登录成功了

 

puppeteer 官网地址: puppeteer地址 Node.js官网地址:链接描述 Puppeteer是谷歌官方出品的一个通过DevTools协议控制headless Chrome的Node库。可以通过Puppeteer的提供的api直接控制Chrome模拟大部分用户操作来进行UI Test或者作为爬虫访问页面来收集数据。 环境和安装 Puppeteer本身依赖6.4以上的Node,但是为了异步超级好用的async/await,推荐使用7.6版本以上的Node。另外headless Chrome本身对服务器依赖的库的版本要求比较高,centos服务器依赖偏稳定,v6很难使用headless Chrome,提升依赖版本可能出现各种服务器问题,最好使用高版本服务器。

我被分配了一个繁琐的任务,就是要给100个相同的站点做同样的配置。曾经就有做过相同的事,那时还不会写脚本,全靠手动配置。机械的配置了两天的时间,身体感觉被掏空。所以这次我决定还是写一个脚本自动的进行配置。

无论您是否了解Node.js和puppeteer的爬虫的人员都可以操作,请您一定万分仔细阅读本文档并按顺序执行每一步

3.1 初始化项目

  引用了

  项目都是以创建文件夹开始。

  $ mkdir thal
  $ cd thal

  初始化 NPM,填入一些必要的信息。

  $ npm init

  安装 Puppeteer。由于 Puppeteer 并不是稳定的版本而且每天都在更新,所以如果你想要最新的功能可以直接通过 GitHub 的仓库安装。

  $ npm i --save puppeteer

  Puppeteer 包含了自己的 chrome / chromium 用以确保可以无界面地工作。因此每当你安装/更新 puppeteer 的时候,他都会下载指定的 chrome 版本。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

四、收获

1.需要被其它页面引用的函数,常量必须要在module.exports={}中申明

2.headles: false是设置自动化操作是可视化的

3.在输入框中输入值并覆盖原有的值:

    4.调用其他页面函数的声明:const common = require('./common');

 

接下来我们直接来爬取Node.js的官网首页然后直接生成PDF

二、环境

只安装了node环境

 

这里就不做过多介绍了,毕竟 Node.js 是可以上天的,或许未来它真的什么都能做。这么优质简短的教程,请收藏或者转发给您的朋友,谢谢。

const puppeteer = require; // 引入依赖  => { //使用async函数完美异步 const browser = await puppeteer.launch(); //打开新的浏览器const page = await browser.newPage(); // 打开新的网页 await page.goto('https://www.jd.com/'); //前往里面 'url' 的网页const result = await page.evaluate => { //这个result数组包含所有的图片src地址let arr = []; //这个箭头函数内部写处理的逻辑 const imgs = document.querySelectorAll;imgs.forEach {arr.pushreturn arr });// '此时的result就是得到的爬虫数据,可以通过'fs'模块保存'})()

TIPS: 本项目设计思想就是一个网页一个PDF文件,所以每次爬取一个单独页面后,请把index.pdf拷贝出去,然后继续更换url地址,继续爬取,生成新的PDF文件,当然,您也可以通过循环编译等方式去一次性爬取多个网页生成多个PDF文件。

如果你是一名技术人员,那么可以看我接下来的文章,否则,请直接移步到我的github仓库,直接看文档使用即可

需求:

const puppeteer = require;const url = require => {const browser = await puppeteer.launchconst page = await browser.newPage()//选择要打开的网页 await page.goto(url, { waitUntil: 'networkidle0' })//选择你要输出的那个PDF文件路径,把爬取到的内容输出到PDF中,必须是存在的PDF,可以是空内容,如果不是空的内容PDF,那么会覆盖内容let pdfFilePath = './index.pdf';//根据你的配置选项,我们这里选择A4纸的规格输出PDF,方便打印await page.pdf({path: pdfFilePath,format: 'A4',scale: 1,printBackground: true,landscape: false,displayHeaderFooter: false});await browser.close

文件解构设计

上面只爬取了京东首页的图片内容,假设我的需求进一步扩大,需要爬取京东首页中的所有标签对应的跳转网页中的所有 title的文字内容,最后放到一个数组中。 我们的async函数上面一共分了五步, 只有 puppeteer.launch, browser.close() 是固定的写法。 page.goto 指定我们去哪个网页爬取数据,可以更换内部url地址,也可以多次调用这个方法。 page.evaluate 这个函数,内部是处理我们进入想要爬取网页的数据逻辑 page.goto和page.evaluate两个方法,可以在async内部调用多次,那意味着我们可以先进入京东网页,处理逻辑后,再次调用page.goto这个函数

注意,上面这一切逻辑,都是puppeteer这个包帮我们在看不见的地方开启了另外一个浏览器,然后处理逻辑,所以最终要调用browser.close()方法关闭那个浏览器。

使用Node.js爬取网页资源,开箱即用的配置 将爬取到的网页内容以PDF格式输出

这时候我们对上一篇的代码进行优化,爬取对应的资源。

仓库地址:附带文档和源码

const puppeteer = require; => {const browser = await puppeteer.launch();const page = await browser.newPage();await page.goto('https://www.jd.com/');const hrefArr = await page.evaluate => {let arr = [];const aNodes = document.querySelectorAll;aNodes.forEach {arr.pushreturn arr});let arr = [];for (let i = 0; i < hrefArr.length; i  ) {const url = hrefArr[i];console.log //这里可以打印 await page.goto;const result = await page.evaluate => { //这个方法内部console.log无效 return $; //返回每个界面的title文字内容});arr.push //每次循环给数组中添加对应的值}console.log //得到对应的数据 可以通过Node.js的 fs 模块保存到本地await browser.close

小试牛刀,爬取京东资源

本项目实现需求:给我们一个网页地址,爬取他的网页内容,然后输出成我们想要的PDF格式文档,请注意,是高质量的PDF文档

上面有天坑 page.evaluate函数内部的console.log不能打印,而且内部不能获取外部的变量,只能return返回,使用的选择器必须先去对应界面的控制台实验过能不能选择DOM再使用,比如京东无法使用querySelector。这里由于京东的分界面都使用了jQuery,所以我们可以用jQuery,总之他们开发能用的选择器,我们都可以用,否则就不可以。

对应像京东首页这样的开启了图片懒加载的网页,爬取到的部分内容是loading状态的内容,对于有一些反爬虫机制的网页,爬虫也会出现问题,但是绝大多数网站都是可以的

本需求使用到的技术:Node.js和puppeteer

本文由彩世界开奖app官网发布于前端技术,转载请注明出处:Puppeteer——自动化脚本设计彩世界平台官方网址

关键词: 脚本 如何使用 网页 之家