Playwright实现Cookie免登录的完整方案

Playwright提供了多种方式来实现手动登录后保存Cookie，后续访问时直接使用保存的Cookie免登录的功能。以下是几种成熟可靠的实现方法：

1. 使用storageState保存和加载登录状态

这是Playwright官方推荐的方式，可以保存完整的浏览器上下文状态，包括cookies和localStorage。

保存登录状态的实现代码(Node.js版本)：

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

(async () => {
  // 启动浏览器
  const browser = await chromium.launch({ headless: false });
  const context = await browser.newContext();
  const page = await context.newPage();
  
  // 执行登录操作
  await page.goto('https://example.com/login');
  await page.fill('#username', 'your_username');
  await page.fill('#password', 'your_password');
  await page.click('#login-button');
  
  // 等待登录完成
  await page.waitForNavigation();
  
  // 保存状态到文件
  await context.storageState({ path: 'auth/state.json' });
  
  // 关闭浏览器
  await browser.close();
})();

使用保存的状态免登录访问：

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

(async () => {
  const browser = await chromium.launch();
  
  // 加载之前保存的状态
  const context = await browser.newContext({
    storageState: 'auth/state.json'
  });
  
  const page = await context.newPage();
  
  // 直接访问需要登录的页面
  await page.goto('https://example.com/dashboard');
  console.log(await page.title());
  
  await browser.close();
})();

这种方法的主要优点是：

• 保存完整的浏览器状态，包括cookies和localStorage
• 不需要手动处理cookie的解析和存储
• 适用于大多数基于cookie或localStorage的认证系统

2. 手动保存和加载Cookies

如果需要更精细地控制cookie，可以手动保存和加载cookie。

保存Cookies的实现代码：

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

(async () => {
  const browser = await chromium.launch();
  const context = await browser.newContext();
  const page = await context.newPage();
  
  // 登录过程...
  await page.goto('https://example.com/login');
  // ...填写登录表单并提交
  
  // 获取cookies
  const cookies = await context.cookies();
  
  // 保存到文件
  fs.writeFileSync('cookies.json', JSON.stringify(cookies));
  
  await browser.close();
})();

使用保存的Cookies免登录访问：

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

(async () => {
  const browser = await chromium.launch();
  const context = await browser.newContext();
  
  // 加载cookies
  const cookies = JSON.parse(fs.readFileSync('cookies.json'));
  await context.addCookies(cookies);
  
  const page = await context.newPage();
  await page.goto('https://example.com/dashboard');
  
  await browser.close();
})();

3. 使用持久化用户数据目录

对于需要长期保持登录状态的场景，可以使用浏览器的持久化用户数据目录：

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

(async () => {
  // 首次运行 - 登录并保存数据
  const browser = await chromium.launchPersistentContext('./user-data-dir', {
    headless: false
  });
  
  const page = await browser.newPage();
  await page.goto('https://example.com/login');
  // ...登录操作
  
  // 后续运行 - 直接使用已登录状态
  const browser2 = await chromium.launchPersistentContext('./user-data-dir');
  const page2 = await browser2.newPage();
  await page2.goto('https://example.com/dashboard');
})();