基于puppeteer的登录流程自动化升级

基本步骤参考《把 puppeteer 融入调试流程，调试体验爽翻了！》，感谢作者的分享，带给了新思路

对于本地开发项目，需要我们在本地设置cookie，常规方法：1、将token写在webpack或者vite里，每次变了还得手动修改。2、登录成功后手动复制粘贴到cookie里。

今天看到作者基于puppeteer的操作，根据公司的实际情况我根据项目需要进行了优化处理。目前我们的登录是公司统一的登录，所以每次获取cookie都需要单独去获取，在点击登录之后，再设置本地cookie

// 暂时定为autologin文件夹下的index.js

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({
    headless: false,
    defaultViewport: {
      width: 0,
      height: 0
    },
    debuggingPort: 9999
  });

  const page = await browser.newPage();
  login(page)
})();

async function login(page) {
  // 线上地址或者测试环境地址，或者可以理解为需要单独的登录的地方
  await page.goto('http://xxxxxx/static/#/login');

  await page.waitForSelector('#username');

  const $username = await page.$('#username');
  await $username.type('1111111', {
    delay: 100
  });

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

  const $button = await page.$('button[type="submit"]');
  await $button.click();
  // 以上代码参考https://juejin.cn/post/7182965703962542135的文章  
  setTimeout(async () => {    
    const cookieHandle = await page.cookies();    
    await page.setCookie({'value': cookieHandle[0].value, 'domain': 'localhost', name: 'xubsw'});    
    await page.goto('http://localhost:8096/#/xxx');  
  }, 1000)
}

1、把autologin文件放到你顺手修改文件的地方。记下路径方便修改/users/work/autologin为你的文件地址

2、在autologin里新建一个auto.sh

#!/bin/bash

node /Users/work/autologin/index.js

3、编辑~/.zshrc并设置alias

vi ~/.zshrc

alias alogin="bash /Users/work/autologin/auto.sh”

执行 source ~/.zshrc

在终端命令里执行 alogin 即可。

原本需要手动设置输入账号的方式，现在只需要执行alogin一条命令即可，省时高效，每次只需要单独处理登录的账号和密码就可以了