puppeteer学习----登录人才网并截图

1.puppeteer

1.1 介绍

image.png

1.2 相关资料

推荐看官方文档,因为api变的很多,网上流传的一些教程只能看一部分,还有一部分api已经不能用了

• GitHub仓库: https://github.com/GoogleChrome/puppeteer
• 官方文档: https://pptr.dev/
• 大佬们翻译的中文文档: https://zhaoqize.github.io/puppeteer-api-zh_CN

2.安装puppeteer

2.1 当然要先安装NodeJS

1. windows下直接访问官网下安装包傻瓜安装, 推荐按LTS版本
   当然 windows也能用nvm, 我机子就用的nvm, 不过上次帮别人安的时候发现环境变量有点问题, 我自己好得很...

2. Linux和Mac当然推荐直接通过nvm安装

3. 参考资料:

• NodeJS中文: https://nodejs.org/zh-cn/
• nvm: https://github.com/creationix/nvm
• nvm-windows: https://github.com/coreybutler/nvm-windows

2.2 安装yarn? (可省略)

$ npm install -g yarn

参考资料:

• yarn官网: https://yarnpkg.com/zh-Hans/
• yarn 与 npm 的比较(网上有很多): https://juejin.im/entry/5821f387570c350060c115cd

2.3 开始安装吧

1. 新建个文件夹
2. 执行npm init 初始化项目
3. 由于安装puppeteer需要下载chromium, 很难下载下来,官方也给了方法,
   在命令行先输入set PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1即可跳过下载
   
   set PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1即可跳过下载
   
   
   命令行输入
4. 开始安装

$ npm install --save puppeteer
# 或者
$ yarn add puppeteer

5. 等待安装完即可
   不知道是不是本生安装了chrome浏览器, 机子里自带了chromium, 我在依赖中看到了存在chromium, 如果你没有的话可以去网上下

   
   
   存在chromium

6. 参考资料

• Chromium下载地址: https://download-chromium.appspot.com/

3.使用puppeteer模拟登录人才网并截图

1.在项目中新建一个文件, 例如test.js

2.写代码咯

1. 引入依赖

const puppeteer = require('puppeteer');

2. 初始化配置, 以及访问页面

(async () => {
  const browser = await puppeteer.launch({
    headless: false, // 不使用无头浏览器,即可以看到真实浏览器打开的操作
    defaultViewport: { // 浏览器框的大小
      width: 1366,
      height: 768
    }
  });
  const page = await browser.newPage(); // 打开一个新的标签页
  await page.goto('http://jd.0550.com'); // 访问人才网
  await page.screenshot({ // 先截个图保存下来
    path: 'job.png'
  });

3. 登录人才网
   可以先分析登录框的dom

   
   
   image.png
   
   

   随后进行相关操作

  await page.tap('#username')  // 获取用户名input
  await page.type('#username', '111') 输入用户名

  await page.tap('#password') // 获取密码input
  await page.type('#password', 'nodetech2018') // 输入密码
  await page.tap('.btn-login') // 点击登录

  await timeout(3000) // 等会, 等登录完成
  await page.screenshot({ //截图
    path: 'job2.png'
  });
  browser.close(); // 任务完成, 关闭浏览器
})();

4. 延时函数

let timeout = function (delay) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      try {
        resolve(1)
      } catch (e) {
        reject(0)
      }
    }, delay);
  })
}

4.操作录屏

操作录屏