我写了一个自动化脚本涨粉，从0阅读到接近100粉丝（一）-阿里云开发者社区

我写了一个自动化脚本涨粉，从0阅读到接近100粉丝（一）

2023-09-25 106

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 我写了一个自动化脚本涨粉，从0阅读到接近100粉丝

引言

在CSDN写了大概140篇文章，一直都是0阅读量，仿佛石沉大海，在掘金能能频频上热搜的文章，在CSDN一点反馈都没有，所以跟文章质量关系不大，主要是曝光量，后面调研一下，发现情况如下

好家伙，基本都是人机评论,后面问了相关博主，原来都是互相刷评论来涨阅读量，enen...，原来CSDN是这样的，真无语，竟然是刷评论，那么就不要怪我用脚本了。

效果如下

puppeteer入门

先来学习一波puppeteer知识点，其实也不难

puppeteer 简介

Puppeteer 是 Chrome 开发团队在 2017 年发布的一个 Node.js 包, 用来模拟 Chrome 浏览器的运行。

Puppeteer 是一个 Node 库，它提供了一个高级 API 来通过 DevTools 协议控制 Chromium 或 Chrome。Puppeteer 默认以 headless 模式运行，但是可以通过修改配置文件运行“有头”模式。 Chromium 和 Chrome区别

在学puppeteer之前我们先来了解下 headless chrome

什么是 Headless Chrome

在无界面的环境中运行 Chrome
通过命令行或者程序语言操作 Chrome
无需人的干预，运行更稳定
在启动 Chrome 时添加参数 --headless，便可以 headless 模式启动 Chrome

alias chrome="/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome"  # Mac OS X 命令别名
chrome --headless --disable-gpu --dump-dom https://www.baidu.com               # 获取页面 DOM
chrome --headless --disable-gpu --screenshot https://www.baidu.com    # 截图

查看更多chrome启动参数英文中文

puppeteer 能做什么

官方称：“Most things that you can do manually in the browser can be done using Puppeteer”，那么具体可以做些什么呢？

网页截图或者生成 PDF
爬取 SPA 或 SSR 网站
UI 自动化测试，模拟表单提交，键盘输入，点击等行为
捕获网站的时间线，帮助诊断性能问题
......

puppeteer 结构

Puppeteer 使用 DevTools 协议与浏览器进行通信。
Browser 实例可以拥有浏览器上下文。
BrowserContext 实例定义了一个浏览会话并可拥有多个页面。
Page 至少有一个框架：主框架。可能还有其他框架由 iframe 或框架标签创建。
frame 至少有一个执行上下文 - 默认的执行上下文 - 框架的 JavaScript 被执行。一个框架可能有额外的与扩展关联的执行上下文。

puppeteer 运行环境

查看 Puppeteer 的官方 API 你会发现满屏的 async, await 之类，这些都是 ES7 的规范，所以你需要： Nodejs 的版本不能低于 v7.6.0

bash

npm install puppeteer 
# or "yarn add puppeteer"

Note: 当你安装 Puppeteer 时，它会自动下载Chromium，由于Chromium比较大，经常会安装失败~ 可是使用以下解决方案

把npm源设置成国内的源 cnpm taobao 等
安装时添加--ignore-scripts命令跳过Chromium的下载 npm install puppeteer --ignore-scripts
安装 puppeteer-core 这个包不会去下载Chromium

puppeteer 基本用法

先打开官方的入门demo

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({path: 'example.png'});
  await browser.close();
})();

上面这段代码就实现了网页截图，先大概解读一下上面几行代码：

先通过 puppeteer.launch() 创建一个浏览器实例 Browser 对象
然后通过 Browser 对象创建页面 Page 对象
然后 page.goto() 跳转到指定的页面
调用 page.screenshot() 对页面进行截图
关闭浏览器

是不是觉得好简单？

puppeteer.launch(options)

options 参数详解

参数名称	参数类型	参数说明
ignoreHTTPSErrors	boolean	在请求的过程中是否忽略 Https 报错信息，默认为 false
headless	boolean	是否以”无头”的模式运行 chrome, 也就是不显示 UI，默认为 true
executablePath	string	可执行文件的路劲，Puppeteer 默认是使用它自带的 chrome webdriver, 如果你想指定一个自己的 webdriver 路径，可以通过这个参数设置
slowMo	number	使 Puppeteer 操作减速，单位是毫秒。如果你想看看 Puppeteer 的整个工作过程，这个参数将非常有用。
args	Array(String)	传递给 chrome 实例的其他参数，比如你可以使用”–ash-host-window-bounds=1024x768” 来设置浏览器窗口大小。
handleSIGINT	boolean	是否允许通过进程信号控制 chrome 进程，也就是说是否可以使用 CTRL+C 关闭并退出浏览器.
timeout	number	等待 Chrome 实例启动的最长时间。默认为30000（30秒）。如果传入 0 的话则不限制时间
dumpio	boolean	是否将浏览器进程stdout和stderr导入到process.stdout和process.stderr中。默认为false。
userDataDir	string	设置用户数据目录，默认linux 是在 ~/.config 目录，window 默认在 C:\Users{USER}\AppData\Local\Google\Chrome\User Data, 其中 {USER} 代表当前登录的用户名
env	Object	指定对Chromium可见的环境变量。默认为process.env。
devtools	boolean	是否为每个选项卡自动打开DevTools面板，这个选项只有当 headless 设置为 false 的时候有效

puppeteer如何使用

下面介绍 10 个关于使用 Puppeteer 的用例，并在介绍用例的时候会穿插的讲解一些 API，告诉大家如何使用 Puppeteer：

01 获取元素及操作

如何获取元素？

page.$('#uniqueId')：获取某个选择器对应的第一个元素
page.$$('div')：获取某个选择器对应的所有元素
page.$x('//img')：获取某个 xPath 对应的所有元素
page.waitForXPath('//img')：等待某个 xPath 对应的元素出现
page.waitForSelector('#uniqueId')：等待某个选择器对应的元素出现

Page.$(selector) 获取单个元素，底层是调用的是 document.querySelector() , 所以选择器的 selector 格式遵循 css 选择器规范

Page.$$(selector) 获取一组元素，底层调用的是 document.querySelectorAll(). 返回 Promise(Array(ElemetHandle)) 元素数组.

const puppeteer = require('puppeteer');
async function run (){
    const browser = await puppeteer.launch({headless:false,defaultViewport:{width:1366,height:768}});
    const page = await browser.newPage();
    await page.goto('https://www.baidu.com');
    const input_area = await page.$("#kw");
    await input_area.type("Hello Wrold");
    const search_btn = await page.$('#su');
    await search_btn.click();
}
run();

02 获取元素属性

Puppeteer 获取元素属性跟我们平时写前段的js的逻辑有点不一样，按照通常的逻辑，应该是现获取元素，然后在获取元素的属性。但是上面我们知道获取元素的 API 最终返回的都是 ElemetHandle 对象，而你去查看 ElemetHandle 的 API 你会发现，它并没有获取元素属性的 API.

事实上 Puppeteer 专门提供了一套获取属性的 API， Page.$eval() 和 Page.$$eval()

Page.$$eval(selector, pageFunction[, …args]), 获取单个元素的属性，这里的选择器 selector 跟上面 Page.$(selector) 是一样的。

const value = await page.$eval('input[name=search]', input => input.value);
const href = await page.$eval('#a", ele => ele.href);
const content = await page.$eval('.content', ele => ele.outerHTML);

const puppeteer = require('puppeteer');
async function run (){
    const browser = await puppeteer.launch({headless:false,defaultViewport:{width:1366,height:768}});
    const page = await browser.newPage();
    await page.goto('https://www.baidu.com');
    const input_area = await page.$("#kw");
    await input_area.type("Hello Wrold");
    const search_btn = await page.$('#su');
    await search_btn.click();
    await page.waitFor('div#content_left > div.result-op.c-container.xpath-log',{visible:true});
    let resultText = await page.$eval('div#content_left > div.result-op.c-container.xpath-log',ele=> ele.innerText)
    console.log("result Text= ",resultText);
}
run();

03 处理多个元素

const puppeteer = require('puppeteer');
async function run() {
  const browser = await puppeteer.launch({
    headless: false,
    defaultViewport: {
      width: 1280,
      height: 800,
    },
    slowMo: 200,
  });
  const page = await browser.newPage();
  await page.goto('https://www.baidu.com');
  const input_area = await page.$('#kw');
  await input_area.type('Hello Wrold');
  await page.keyboard.press('Enter');
  const listSelector = 'div#content_left > div.result-op.c-container.xpath-log';
  // await page.waitForSelector(listSelector);
  await page.waitFor(3 * 1000);
  const list = await page.$$eval(listSelector, (eles) =>
    eles.map((ele) => ele.innerText)
  );
  console.log('List ==', list);
}
run();

04 切换frame

一个 Frame 包含了一个执行上下文（Execution Context），我们不能跨 Frame 执行函数，一个页面中可以有多个 Frame，主要是通过 iframe 标签嵌入的生成的。其中在页面上的大部分函数其实是 page.mainFrame().xx 的一个简写，Frame 是树状结构，我们可以通过page.frames()获取到页面所有的 Frame，如果想在其它 Frame 中执行函数必须获取到对应的 Frame 才能进行相应的处理

const puppeteer = require('puppeteer')
async function anjuke(){
    const browser = await puppeteer.launch({headless:false});
    const page = await browser.newPage();
    await page.goto('https://login.anjuke.com/login/form');
    // 切换iframe
    await page.frames().map(frame => {console.log(frame.url())})
    const targetFrameUrl = 'https://login.anjuke.com/login/iframeform'
    const frame =  await page.frames().find(frame => frame.url().includes(targetFrameUrl));
    const phone= await frame.waitForSelector('#phoneIpt')
    await phone.type("13122022388")
}
anjuke();

05 拖拽验证码操作

const puppeteer = require('puppeteer')
async function aliyun(){
    const browser = await puppeteer.launch({headless:false,ignoreDefaultArgs:['--enable-automation']});
    const page = await browser.newPage();
    await page.goto('https://account.aliyun.com/register/register.htm',{waitUntil:"networkidle2"});
    const frame = await page.frames().find(frame=>{
        console.log(frame.url())
        return frame.url().includes('https://passport.aliyun.com/member/reg/fast/fast_reg.htm')
    })
    const span = await frame.waitForSelector('#nc_1_n1z');
    const spaninfo = await span.boundingBox();
    console.log('spaninfo',spaninfo)
    await page.mouse.move(spaninfo.x,spaninfo.y);
    await page.mouse.down();
    const div = await frame.waitForSelector('div#nc_1__scale_text > span.nc-lang-cnt');
    const divinfo = await div.boundingBox();
    console.log('divinfo',divinfo)
    for(var i=0;i<divinfo.width;i++){
        await page.mouse.move(spaninfo.x+i,spaninfo.y);
    }
    await page.mouse.up();
}
aliyun();