likes
comments
collection
share

小王和小李的开发小冒险：用 Puppeteer 解决本地 Cookie 问题🚀本文介绍了如何利用 Puppeteer

作者站长头像
站长
· 阅读数 43

在繁忙的开发办公室里，小王和小李正为一个棘手的问题而烦恼。他们的任务是让公司的统一登录系统在本地开发环境中顺利运行。小王和小李的挑战主要集中在如何高效地设置和更新本地 Cookie。

传统方法的烦恼😩

“小李，最近我们在本地开发中遇到了一个问题，”小王说，“每次线上登录成功后，我们都得手动复制粘贴 token 到 本地开发环境的Cookie 中，既麻烦又容易出错。”

小李点了点头，“我知道，或者我们可以把 token 写进 webpack 或者 vite 配置里，但每次 token 改变时我们还得手动修改配置，这真的很不方便。”

小王叹了口气，“是啊，而且这种方法不够灵活，每次更改都需要重启开发服务器，影响效率。”

发现 Puppeteer 的神奇之处✨

就在两人讨论得不可开交时，小李突然眼睛一亮，“小王，你听说过 Puppeteer 吗？我看到作者用 Puppeteer 实现了自动化操作，感觉这可能是解决我们问题的关键。”

小王好奇地问：“Puppeteer？那是什么？”

小李兴奋地解释：“Puppeteer 是一个 Node.js 库，可以帮助我们自动化浏览器操作。我们可以用它来模拟用户登录，然后自动获取并设置 Cookie。这样，我们就不需要每次手动更新了。”

实际操作的惊喜🛠️

于是，小王和小李决定尝试使用 Puppeteer 来优化他们的开发流程。他们编写了一个脚本，自动完成登录操作，并在登录成功后自动设置 Cookie。

const puppeteer = require("puppeteer");
const inquirer = require("inquirer");

(async () => {
  // 提示用户输入
  const { url, username, password } = await inquirer.prompt([
    {
      type: "input",
      name: "url",
      message: "请输入目标 URL:",
      default: "http://localhost:8080/#/DataStandard_home",
    },
    {
      type: "input",
      name: "username",
      message: "请输入用户名:",
      default: "account",
    },
    {
      type: "input",//password
      name: "password",
      message: "请输入密码:",
      default: "psw",
    },
  ]);

  // 启动浏览器并打开页面
  const browser = await puppeteer.launch({
    headless: false,
    defaultViewport: {
      width: 0,
      height: 0,
    },
    debuggingPort: 9999,
  });

  const page = await browser.newPage();

  // 执行登录操作
  await login(page, { url, username, password });

  // 不关闭浏览器，保持打开状态
})();

async function login(page, config) {
  // 访问登录页面
  await page.goto(
    "https://company-login.example.com/login"
  );

  // 等待必要的元素出现
  await page.waitForSelector(".loginform");

  // 输入用户名和密码
  const $username = await page.$('.usernem_dom');
  await $username.type(config.username, { delay: 100 });

  const $password = await page.$('.password_dom');
  await $password.type(config.password, { delay: 100 });

  // 点击复选框和登录按钮
  const $checkbox = await page.$('.checkagree_dom');
  await $checkbox.click();

  const $button = await page.$(".submit");
  await $button.click();

  // 设置 Cookie 并跳转到目标 URL
  setTimeout(async () => {
    const cookies = await page.cookies();
    const NEED_COOKIE = cookies.find(
      (item) => item.name === "NEED_COOKIE"
    )?.value;
    await page.setCookie({
      name: "NEED_COOKIE",
      value: NEED_COOKIE,
      domain: "localhost",
    });
    await page.goto(config.url);
  }, 1000);
}

小李对这个自动化脚本的效果非常满意，“看，Puppeteer 确实能帮我们自动化这些操作。每次登录后，我们只需运行这个脚本，它就会自动更新 Cookie，不再需要手动操作。”

小王也露出了满意的笑容，“这真是太棒了！用 Puppeteer，我们不仅简化了开发流程，还提高了效率。现在我们可以更专注于开发本身了。”

优化后的喜悦🎉

从那以后，小王和小李的开发工作变得更加顺利。每当需要更新 Cookie 时，他们只需运行 Puppeteer 脚本，就能快速完成所有操作。为了进一步优化，他们还决定在 PowerShell 中设置一个函数，以便更方便地运行 Node.js 脚本：

  1. 创建 Shell 脚本📜

    他们创建了一个 Shell 脚本 autologin.sh，内容如下：

    #!/bin/bash
node /c/Users/YourUsername/Scripts/index.js

  2. 定义 PowerShell 函数🖥️

    小王在 PowerShell 中定义了一个函数 autologin，以便于运行 Node.js 脚本：

    function autologin {
    & "C:\Program Files\Git\bin\bash.exe" -c "/c/Users/YourUsername/Scripts/autologin.sh"
}

  3. 编辑 PowerShell 配置文件📝

    为了每次打开 PowerShell 时都能使用这个函数，小李打开了 PowerShell 配置文件，并将函数定义添加到文件中：

    notepad $PROFILE

    在打开的 Notepad 中添加以下内容：

    function autologin {
    & "C:\Program Files\Git\bin\bash.exe" -c "/c/Users/YourUsername/Scripts/run-node.sh"
}

    保存并关闭文件，然后在 PowerShell 中运行以下命令以加载配置文件：

    . $PROFILE

    现在，他们可以在 PowerShell 中通过输入 autologin 命令来运行 Node.js 脚本。

通过这次小冒险，小王和小李不仅解决了一个繁琐的问题，还学会了如何利用工具提升工作效率。他们的开发生活变得更加顺畅，而 Puppeteer 成为了他们的得力助手。

这就是小王和小李的故事——一个关于如何通过 Puppeteer 和 PowerShell 将复杂的本地开发任务变得简单而高效的故事。希望这个故事能为你们带来启发，让你们在面对类似挑战时找到解决方案。💡

转载自:https://juejin.cn/post/7408533003708563456
评论
请登录