Edit: puppeteer可以借助cookie登录吗，可以自动输入用户名密码登录

编辑文章

标题 *

URL 别名 *

内容 * (支持 Markdown 格式)

puppeteer可以借助cookie登录吗，可以自动输入用户名密码登录？

**答案是：完全可以，而且这正是 Puppeteer 最擅长、最常用的两个核心场景！**

在自动化测试和爬虫中，处理登录通常有以下两种方式：

---

### 方法一：自动输入用户名和密码登录（表单交互）

Puppeteer 可以完全模拟人在键盘上打字和点击鼠标的过程。

#### 核心原理：
1. 打开登录页面。
2. 找到用户名和密码框的 CSS 选择器（Selector）。
3. 使用 `page.type()` 模拟打字输入。
4. 使用 `page.click()` 点击登录按钮（或按 Enter 键）。
5. 等待页面跳转/登录成功。

#### 代码示例：
```javascript
const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch({ headless: false }); // 设为 false 方便看效果
    const page = await browser.newPage();

// 1. 打开登录页面
    await page.goto('https://example.com/login');

// 2. 输入用户名（#username 是输入框的 ID 或 Selector）
    await page.type('#username', 'my_account_name', { delay: 100 }); // delay 模拟真实打字速度

// 3. 输入密码
    await page.type('#password', 'my_secret_password', { delay: 100 });

// 4. 点击登录按钮（#login-btn 是登录按钮的 ID）
    await page.click('#login-btn');

// 5. 等待登录成功的关键元素出现（比如右上角的个人头像或退出按钮）
    await page.waitForSelector('.user-avatar');

console.log('登录成功！');
    await browser.close();
})();
```

> **提示**：如果遇到**图片/拖拽验证码**，自动输入密码后可能需要配合第三方打码平台，或者切换到下面这种更高效的方式：**Cookie 登录**。

---

### 方法二：借助 Cookie 免密登录（更高效、稳定）

在绝大多数自动化场景中，**反复输入密码登录不仅高效性低，还容易触发网站的验证码或风控**。

更好的做法是：**先登录一次，把 Cookie 保存到本地，以后每次直接注入 Cookie 绕过登录过程**。

#### 步骤 1：保存 Cookie 到本地（只需运行一次）
先通过代码打开浏览器，手动（或自动）登录后，把 Cookie 提取并存为 JSON 文件。

```javascript
const puppeteer = require('puppeteer');
const fs = require('fs');

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

await page.goto('https://example.com/login');

console.log('请在弹出的浏览器中手动完成登录/扫码...');

// 等待登录成功（比如等待页面跳转到首页/个人中心）
    await page.waitForNavigation({ waitUntil: 'networkidle0' });

// 获取当前所有的 Cookie
    const cookies = await page.cookies();

// 将 Cookie 保存为本地 json 文件
    fs.writeFileSync('./cookies.json', JSON.stringify(cookies, null, 2));
    console.log('Cookie 已保存到 cookies.json');

await browser.close();
})();
```

#### 步骤 2：直接注入 Cookie 实现免密登录（后续每次运行）
以后每次运行脚本时，直接将保存好的 Cookie 注入浏览器，访问受保护的页面：

```javascript
const puppeteer = require('puppeteer');
const fs = require('fs');

(async () => {
    const browser = await puppeteer.launch({ headless: "new" });
    const page = await browser.newPage();

// 1. 读取本地保存的 Cookie
    const cookies = JSON.parse(fs.readFileSync('./cookies.json'));

// 2. 将 Cookie 注入到 Puppeteer 的当前页面中
    await page.setCookie(...cookies);

// 3. 直接访问需要登录后才能看的页面（如个人中心/后台）
    await page.goto('https://example.com/user/profile');

// 验证是否登录成功（截图查看）
    await page.screenshot({ path: 'logged_in_page.png' });
    console.log('免密登录成功，页面已截图！');

await browser.close();
})();
```

---

### 总结与最佳实践建议

1. **自动输入登录**：适合做 **UI 自动化测试**（测试登录功能本身是否正常）。
2. **Cookie 免密登录**：适合做 **数据爬虫/自动化运维**。不仅速度快，而且可以**完全绕过验证码、极验滑块、手机短信验证**等复杂的安全防线。
3. **补充（LocalStorage/SessionStorage）**：现代很多前端框架（如 React/Vue）使用 JWT 令牌保存在 `LocalStorage` 中，Puppeteer 也可以通过 `page.evaluate()` 直接向 `localStorage` 写入 Token 来实现免密登录。

配图 (可多选)

选择新图片文件或拖拽到此处

标签