使用 puppeteer 实现 gitee pages 自动更新

gitee pages 博客痛点是即使发布了最新的代码，依旧无法像 github 博客一样自动更新站点。除了大佬通过 git Actions 可以完成自动更新，就是手动点击 ，我介个 就是把手动点击界面的操作脚本话，在自己的博客项目 package.json 中配置一个命令映射到执行脚本即可。

puppeteer 官方文档

开始

初始化项目

yarn add puppeteer -D

新建文件

index.js

const path = require("path");

const puppeteer = require("puppeteer");

const browser = async () => {
  const browser = await puppeteer.launch({ headless: false });

  // 创建一个新界面
  const page = await browser.newPage();

  // 前往登录页
  await page.goto("https://gitee.com/login");

  // 用户名组件
  const userNameHandle = await page.evaluate(() => {
    const userNameHandle = document.querySelector("#user_login");
    userNameHandle.value = "Gitee 名称";
  });

  // 密码操作
  const passworldHandle = await page.evaluate(() => {
    const pwdElements = document.querySelector("#user_password");
    pwdElements.value = "Gitee 密码";
  });

  const loginBtnHandle = await page.evaluate(() => {
    const btnElements = document.querySelector(".submit");
    btnElements.click();
  });

  // 等待登录成功
  await page.waitForResponse("https://gitee.com/login");

  // 按钮更新界面
  await page.goto("https://gitee.com/Gitee 页面名称/pages");

  // 监听 弹窗事件
  await page.on("dialog", async (dialog) => {
    dialog.accept();

    await page.waitForTimeout(1000);

    const lodingHandle = await page.evaluate(async () => {
      const loadingFn = () =>
        new Promise((res) => {
          const timer = setInterval(async () => {
            const updateLoadingElement = document.querySelector("#pages_deploying");
            console.log("loadingFn", "正在更新 ... ");
            // 元素不存在即更新完成
            if (!updateLoadingElement) {
              clearInterval(timer);
              res("更新完毕");
            }
          }, 1000);
        });

      await loadingFn();
      return Promise.resolve("更新完成");
    });
    console.log("lodingHandle", lodingHandle);

    await page.waitForTimeout(1500);

    browser.close();
  });

  const updateHandle = await page.evaluate(() => {
    const updateElements = document.querySelector(".update_deploy");
    updateElements.click();
  });
};

browser();

缺点

如果 dom 结构发生改变脚本要重写。

PS

• 后续会持续更新相关内容以及其他内容
• 觉得文章不错的话，记得 👍 🌟 嘻嘻
• 如有不足欢迎指正