从puppeteer入门到掘金自动签到

十八画生ovo
676 阅读4分钟

一、puppeteer是什么？

Puppeteer是一个由Google开发的Node.js库，它提供了一个高级的API，用于通过Headless Chrome或Chromium浏览器进行自动化控制和操作。它可以用于模拟用户在浏览器中执行各种操作，例如加载网页、填写表单、点击按钮、截取屏幕截图等。

二、puppeteer有什么用？

  1. 页测试和自动化：Puppeteer可以帮助开发人员编写自动化测试脚本，以确保网页在不同环境和交互下的正常运行。它可以模拟用户的操作并捕获页面的响应，从而实现端到端的测试。
  2. 网页截图和生成PDF：使用Puppeteer，你可以加载网页并截取屏幕截图，也可以将网页保存为PDF文件。这在生成报告、生成网页快照或进行页面分析时非常有用。
  3. 网页数据爬取：Puppeteer可以模拟用户在浏览器中浏览网页的行为，使得你可以轻松地抓取网页上的数据。你可以通过Puppeteer执行一系列的操作来提取所需的数据，例如点击链接、填写表单、滚动页面等

三、怎么使用puppeteer？

1.下载puppeteer

 npm install puppeteer

2.一个简单的例子

新建一个baidu.js文件，输入一下代码。

 const puppeteer = require('puppeteer');
 ​
 (async () => {
   // 启动浏览器实例
   const browser = await puppeteer.launch({
     headless: false,  // 设置为false，启动浏览器界面可见
     slowMo: 200,      // 设置操作的延迟时间为200ms，以便观察操作过程
     defaultViewport: {  // 设置默认的页面视口大小
       width: 0,       // 设置宽度为0，表示使用浏览器的默认宽度
       height: 0,      // 设置高度为0，表示使用浏览器的默认高度
     },
 });
   // 打开一个新页面
   const page = await browser.newPage();
   // 导航到百度首页
   await page.goto('https://www.baidu.com');
   // 在搜索框中输入天气关键词
   await page.type('#kw', '天气');
   // 点击搜索按钮
   await page.click('#su');
 })()
 ​

在命令行中执行

 node baidu.js

3.常用api

  1. puppeteer.launch(options): 启动一个浏览器实例，并返回一个Browser对象。
  2. browser.newPage(): 创建一个新的页面对象，并返回一个Page对象。
  3. page.goto(url, options): 导航到指定的URL。
  4. page.waitForSelector(selector, options): 等待指定的选择器在页面上出现。
  5. page.click(selector, options): 在页面上点击匹配指定选择器的元素。
  6. page.type(selector, text, options): 在页面上指定的输入框中输入文本。

详情api请参考文档：puppeteer.bootcss.com/

四、掘金自动化签到与抽奖一条龙

1.先打开掘金登录

打开掘金，确认一下网址是juejin.cn/user/center…

新建一个signIn.js文件,输入以下代码

 const puppeteer = require('puppeteer');
 const path = require('path');
 const os = require('os');
 ​
 (async () => {
     const browser = await puppeteer.launch({
         headless: false,
         defaultViewport: {
             width: 0,
             height: 0,
         },
         slowMo: 200,
         userDataDir: path.join(os.homedir(), '.puppeteer-data') //指定用户数据目录的路径，用于存储浏览器的用户数据
     });
 ​
     const page = await browser.newPage();
 ​
     await page.goto('https://juejin.cn/user/center/signin?from=sign_in_menu_bar');
 ​
 })()

运行signIn.js，然后进行登录 然后你再次运行signIn.js发现浏览器会保存你的登录状态

2.模拟点击签到，然后进行抽奖（完整代码在后面）

我们使用开发者工具，确认签到按钮的类名

image.png

那么我们用以下代码模拟点击签到按钮的动作

await page.waitForSelector('button.signin');  // 等待签到按钮出现
await page.click('button.signin');            // 点击签到按钮

签到成功之后会有弹出提示我们前往抽奖，那么我们继续确认一下去抽奖按钮的类名

image.png

继续用以下代码模拟

    await page.waitForSelector('div.btn-area > button.btn'); //等待去抽奖按钮出现
    await page.click('div.btn-area > button.btn');           //点击去抽奖按钮出现

那么之后的步骤以此类推就行了

3.完整代码

const puppeteer = require('puppeteer');
const os = require('os');
const path = require('path');

(async () => {
    const browser = await puppeteer.launch({
        headless: false,
        defaultViewport: {
            width: 0,
            height: 0,
        },
        slowMo: 100,
        userDataDir: path.join(os.homedir(), '.puppeteer-data')
    });

    const page = await browser.newPage();

    await page.goto('https://juejin.cn/user/center/signin?from=sign_in_menu_bar');

    // 签到
    await page.waitForSelector('button.signin');
    await page.click('button.signin');

    await page.waitForSelector('div.btn-area > button.btn');
    await page.click('div.btn-area > button.btn');

    // 去抽奖
    await page.waitForSelector('#turntable-item-0');
    await page.click('#turntable-item-0');

    await page.waitForSelector('.wrapper .submit');
    await page.click('.wrapper .submit');

    // 关闭浏览器
    await browser.close();
})()

使用sh文件进一步简化操作

现在只要每天运行node signIn.js就可以自动化签到了，可是每次都要在终端输入命令好麻烦阿

那么只需要新建一个autoSignIn.sh文件，在里面输入

node 你的文件路径/signIn.js

那么我们每次只要点击运行这个autoSignIn.sh文件就可以签到了！

五、写在最后

如果这篇文章对你有帮助，记得点赞和收藏哦！你的支持是对我的最大鼓励和肯定。

同时，如果你有任何意见、建议或者想与我分享你的经验，欢迎在评论区留言，让我们一起互动和交流。我非常期待听到你的声音。

再次感谢你的阅读和支持！希望这篇文章能够给你带来真正的价值，帮助你解决问题或者提供新的见解。

谢谢！

avatar
文章
阅读
粉丝