本文详细介绍了如何使用 Playwright 实现浏览器录制登录、保存 Cookie 及自动登录的功能，涵盖从基础的 codegen 录制到手动编码实现登录状态管理的完整流程，并提供了实际应用示例和常见问题解决方案。

Playwright实现录制登录、保存Cookie及自动登录的完整指南

Playwright是一个强大的浏览器自动化工具，支持录制用户操作、保存登录状态以及复用Cookie实现自动登录。下面我将详细介绍在Node.js环境下如何使用Playwright实现这些功能。

一、录制登录操作并保存Cookie

1. 使用codegen录制登录过程

Playwright提供了codegen命令可以录制用户操作并生成代码：

npx playwright codegen --save-storage=auth.json https://example.com/login

执行此命令会：

打开浏览器和Playwright Inspector窗口
记录你在登录页面的所有操作
在关闭浏览器后，将cookie和本地存储信息保存到auth.json文件中

2. 手动编码实现登录并保存状态

如果需要更精细的控制，可以手动编写登录脚本：

1
const { chromium } = require('playwright');
2

3
(async () =&gt; {
4
  const browser = await chromium.launch({ headless: false });
5
  const context = await browser.newContext();
6
  const page = await context.newPage();
7

8
  // 访问登录页面
9
  await page.goto('https://example.com/login');
10

11
  // 填写登录表单
12
  await page.fill('#username', 'your_username');
13
  await page.fill('#password', 'your_password');
14
  await page.click('#login-button');
15

16
  // 等待登录完成
17
  await page.waitForNavigation();
18

19
  // 保存登录状态到文件
20
  await context.storageState({ path: 'auth.json' });
21

22
  await browser.close();
23
})();

这种方法可以保存完整的浏览器上下文状态，包括cookies、localStorage和sessionStorage

二、使用保存的Cookie实现自动登录

1. 加载保存的状态文件

1
const { chromium } = require('playwright');
2

3
(async () =&gt; {
4
  const browser = await chromium.launch({ headless: false });
5

6
  // 加载之前保存的登录状态
7
  const context = await browser.newContext({
8
    storageState: 'auth.json'
9
  });
10

11
  const page = await context.newPage();
12

13
  // 直接访问需要登录的页面
14
  await page.goto('https://example.com/dashboard');
15

16
  // 验证是否已登录
17
  await page.screenshot({ path: 'logged-in.png' });
18

19
  await browser.close();
20
})();

通过storageState选项加载保存的状态文件，可以跳过登录步骤直接进入已认证状态

2. 直接操作Cookies

如果需要更精细地控制Cookies，可以手动操作：

1
const { chromium } = require('playwright');
2
const fs = require('fs');
3

4
(async () =&gt; {
5
  // 从文件读取cookies
6
  const cookies = JSON.parse(fs.readFileSync('cookies.json', 'utf-8'));
7

8
  const browser = await chromium.launch();
9
  const context = await browser.newContext();
10

11
  // 添加cookies到上下文
12
  await context.addCookies(cookies);
13

14
  const page = await context.newPage();
15
  await page.goto('https://example.com');
16

17
  // 其他操作...
18

19
  await browser.close();
20
})();

这种方法适合只需要cookies而不需要完整浏览器状态的场景

三、高级技巧与注意事项

1. Cookie的有效期管理

检查cookie的expires属性，确保没有过期
对于会话cookie(没有设置expires)，需要在同一浏览器会话中使用

2. 处理动态内容

1
// 等待特定元素出现，确认登录成功
2
await page.waitForSelector('.user-avatar', { timeout: 5000 });

3. 多环境适配

1
// 可以根据不同环境加载不同的状态文件
2
const env = process.env.NODE_ENV || 'development';
3
const stateFile = `auth.${env}.json`;
4

5
const context = await browser.newContext({
6
  storageState: fs.existsSync(stateFile) ? stateFile : undefined
7
});

4. 错误处理

1
try {
2
  await page.goto('https://example.com/dashboard');
3
} catch (error) {
4
  console.error('可能登录状态已失效:', error);
5
  // 重新登录逻辑...
6
}

四、实际应用示例

1. 完整的登录状态保存与复用

1
const { chromium } = require('playwright');
2
const fs = require('fs');
3
const path = require('path');
4

5
const STATE_PATH = path.join(__dirname, 'auth.json');
6

7
async function loginAndSaveState() {
8
  const browser = await chromium.launch({ headless: false });
9
  const context = await browser.newContext();
10
  const page = await context.newPage();
11

12
  try {
13
    await page.goto('https://example.com/login');
14

15
    // 登录操作
16
    await page.fill('#username', 'your_username');
17
    await page.fill('#password', 'your_password');
18
    await page.click('#login');
19

20
    // 等待登录完成
21
    await page.waitForURL('https://example.com/dashboard');
22

23
    // 保存状态
24
    await context.storageState({ path: STATE_PATH });
25
    console.log('登录状态已保存');
26

27
    return true;
28
  } catch (error) {
29
    console.error('登录失败:', error);
30
    return false;
31
  } finally {
32
    await browser.close();
33
  }
34
}
35

36
async function useSavedState() {
37
  if (!fs.existsSync(STATE_PATH)) {
38
    console.log('没有找到保存的登录状态，需要先登录');
39
    return;
40
  }
41

42
  const browser = await chromium.launch({ headless: false });
43
  const context = await browser.newContext({
44
    storageState: STATE_PATH
45
  });
46
  const page = await context.newPage();
47

48
  try {
49
    await page.goto('https://example.com/dashboard');
50
    console.log('成功使用保存的状态登录');
51

52
    // 执行需要登录的操作...
53

54
  } catch (error) {
55
    console.error('使用保存的状态失败:', error);
56
  } finally {
57
    await browser.close();
58
  }
59
}
60

61
// 使用示例
62
(async () =&gt; {
63
  const useSaved = await useSavedState();
64
  if (!useSaved) {
65
    await loginAndSaveState();
66
    await useSavedState();
67
  }
68
})();

五、常见问题解决

登录状态无效：
- 检查cookie是否过期
- 确认网站没有额外的安全措施(如IP绑定)
- 可能需要更新保存的状态文件
跨域问题：
- 确保cookie的domain和path设置正确
- 对于跨域场景，可能需要手动设置cookie属性
页面元素定位问题：
- 使用Playwright的定位策略(如getByText, getByRole等)
- 考虑使用page.pause()进行调试

通过以上方法，你可以轻松实现Playwright的录制登录、保存Cookie以及自动登录功能，大大提高自动化测试和爬虫开发的效率。