gitee pages 自动更新新思路

使用 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);

    await page.evaluate(() => {
      // 定时器判断是否还在定时状态
      const timer = setInterval(async () => {
        const updateLoadingElement = document.querySelector("#pages_deploying");

        // 元素不存在即更新完成
        if (!updateLoadingElement) {
          timer.clearInterval();

          await page.waitForTimeout(1000);

          // 更新完毕
          page.close();

          throw "更新完毕";
        }
      }, 1000);
    });
  });

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

browser();

缺点

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

PS

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