Puppeteer自动化工具保姆级教程

DuoLanzhijian

已于 2022-06-24 03:06:49 修改

阅读量1.2k

点赞数

文章标签：自动化前端 javascript

于 2022-06-24 02:48:57 首次发布

本文链接：https://blog.csdn.net/DuoLanzhijian/article/details/125437875

版权

@关于Pupeeteer的一些简单的使用教程

安装

NodeJS ，puppeteer是基于Node运行环境的；
在这里插入图片描述

先看下自己的电脑是多少位的安装对应的版本

在这里插入图片描述

现在大家的电脑应该都是64位的就安装这个吧

在这里插入图片描述

打开安装程序一直下一步就好了

在这里插入图片描述

安装完之后检查一下是否安装成功按Win+R-------------------------Win(就是键盘上那个带有窗口的按键)

在这里插入图片描述

在里面输入CMD

在这里插入图片描述

按回车后出来一个黑窗口这个黑窗口可以输入东西

在这里插入图片描述

输入 node -v 如果出来一个v 然后后面是一些数字就是安装成功了

在这里插入图片描述

编码环节

在桌面创建一个文件夹命名为puppeteer 然后再次按Win+R 输入CMD 输入cd Desktop/puppeteer

在这里插入图片描述

输入 npm init

在这里插入图片描述

连续按回车直到出现输出目录

在这里插入图片描述

然后输入 npm i puppeteer

在这里插入图片描述

它会下载一些运行环境

在这里插入图片描述

等着它下载完成

在这里插入图片描述

这时候你可以查看一下这个文件夹里面会多一些文件

在这里插入图片描述

在这里创建一个文件叫index.js 用记事本打开

在这里插入图片描述

输入代码

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({
	          headless: false,
	          defaultViewport: null
  });
  const page = await browser.newPage();
  await page.goto('https://www.baidu.com/');

})();

在这里插入图片描述

保存Ctrl+S 用cmd运行它

在这里插入图片描述

就会弹出浏览器

在这里插入图片描述

按F12 打开控制台点这个小鼠标

在这里插入图片描述

然后把鼠标放到需要点击的位置这里是这个输入框会出现代码

在这里插入图片描述

右键点击高亮的代码复制JS路径

在这里插入图片描述

修改index.js 文件

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({
	          headless: false,
	          defaultViewport: null
  });
  const page = await browser.newPage();
  await page.goto('https://www.baidu.com/');
  
  //等待元素加载
  await page.waitForSelector('#kw')
  //获取元素
  const pageButton = await page.$('#kw')
  //修改元素内容
  await pageButton.type("你好");
  

})();

在这里插入图片描述

运行结果

在这里插入图片描述

点击搜索

按F2 点击小鼠标点击百度一下复制JS路径

在这里插入图片描述

修改index.js 代码

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({
	          headless: false,
	          defaultViewport: null
  });
  const page = await browser.newPage();
  await page.goto('https://www.baidu.com/');
  
  
  //这个是copy的页面JS元素 document.querySelector("#kw")
  //等待元素加载
  await page.waitForSelector('#kw')
  //获取元素
  const pageText = await page.$('#kw')
  //修改元素内容
  await pageText.type("你好");
  

  //这个是copy的页面JS元素 document.querySelector("#su")
  //等待元素加载
  await page.waitForSelector('#su')
  
  //获取元素
  const pageButton = await page.$('#su')
  
  //点击
  await pageButton.click()

})();