Playwright爬虫实战 – 连接本地浏览器复用登录状态（以知乎为例）

原理概述

本地浏览器复用原理

Playwright 提供了 connectOverCDP 方法，允许我们通过 Chrome DevTools Protocol (CDP) 连接到已打开的浏览器实例。这种方式可以直接复用浏览器的会话状态（如 cookies、localStorage 等），从而避免重复登录。

环境要求

• 支持浏览器：Chrome/Chromium/Edge等基于Chromium内核的浏览器
• 远程调试：需通过--remote-debugging-port参数启动浏览器
• 登录准备：首次需手动登录目标网站

浏览器安装与配置

检查浏览器安装路径

 Windows下安装路径

右键chrome的图标，点击属性，打开文件位置

找到exe的位置

MacOS下安装路径

# 检查Chrome安装情况
ls /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome

# 正确输出：
/Applications/Google Chrome.app/Contents/MacOS/Google Chrome

启动浏览器

Windows下启动

# 强制终止所有Chrome进程（解决端口占用）
taskkill /IM chrome.exe /F /T

# 标准启动命令（注意路径转义）
& "C:\Program Files\Google\Chrome\Application\chrome.exe" `
  --remote-debugging-port=9222 `
  --user-data-dir="C:\chrome_debug_profile" `
  --disable-extensions `
  --disable-background-networking

MacOS下启动

nohup /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
  --remote-debugging-port=9222 \
  --user-data-dir=/tmp/chrome_dev_profile \
  > /tmp/chrome.log 2>&1 &

参数解析：

• --user-data-dir：创建独立用户目录，避免影响日常使用

• nohup：保持后台运行

• 输出日志到/tmp/chrome.log

实战代码实现

浏览器登录准备

按上述命令启动浏览器

例如MacOS下，在命令行运行：

nohup /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
  --remote-debugging-port=9222 \
  --user-data-dir=/tmp/chrome_dev_profile \
  > /tmp/chrome.log 2>&1 &

手动登录

在刚才启动的Chrome浏览器中，输入知乎网址，并手动登录。这里推荐二维码扫描方式，当然，输入用户名密码也是可以的。

# 输入知乎网址，并手动登录
https://www.zhihu.com/signin

保持浏览器运行状态

登录成功以后，保持浏览器运行专题（不要关闭）

实战代码

实现如下代码 index.js

并在命令行运行 node index.js

const { chromium } = require('playwright');
const { expect } = require('@playwright/test'); // 导入 expect

(async () => {
  // 连接到已打开的 Chromium 浏览器实例
  const browser = await chromium.connectOverCDP('http://127.0.0.1:9222');
  const context = browser.contexts()[0]; // 获取默认的浏览器上下文
  const page = context.pages()[0]; // 获取第一个页面

  // 打开知乎首页
  await page.goto('https://www.zhihu.com');

  // 检查是否登录成功：验证页面中是否包含“进入创作中心”文本
  try {
    await expect(page.getByText('进入创作中心')).toBeVisible({ timeout: 15000 });
    console.log('登录状态已恢复，可以开始爬取数据！');
  } catch (error) {
    console.log('登录状态恢复失败，请重新登录。');
    await browser.close();
    return;
  }

  // 等待推荐问题列表加载完成
  await page.waitForSelector('.TopstoryItem');

  // 抓取前 5 条推荐问题的标题
  const questions = await page.$$eval('.TopstoryItem', (items) => {
    return items.slice(0, 5).map((item) => {
      const titleElement = item.querySelector('h2.ContentItem-title');
      return titleElement ? titleElement.innerText.trim() : '无标题';
    });
  });

  // 打印抓取到的问题标题
  console.log('抓取到的前 5 条推荐问题：');
  questions.forEach((question, index) => {
    console.log(`${index + 1}. ${question}`);
  });

  // 关闭浏览器连接
  await browser.close();
})();

运行代码之后效果：

代码说明

1. 连接到已打开的浏览器实例：

• 使用 chromium.connectOverCDP('http://127.0.0.1:9222') 连接到已启动的 Chromium 浏览器实例。
• 9222 是 Chromium 的远程调试端口号。

1. 2. 获取浏览器上下文和页面：

• 使用 browser.contexts()[0] 获取默认的浏览器上下文。
• 使用 context.pages()[0] 获取第一个页面。

1. 3. 检查登录状态：

• 使用 expect(page.getByText('进入创作中心')).toBeVisible() 验证页面中是否包含 进入创作中心 文本，确认登录状态。

1. 4. 抓取数据：

• 使用 page.$$eval() 提取页面中的推荐问题标题。
• 通过 slice(0, 5) 限制只抓取前 5 条数据。

1. 5. 关闭连接：

• 使用 browser.close() 关闭与浏览器的连接。