共计 3607 个字符，预计需要花费 10 分钟才能阅读完成。
在 Web 自动化测试和数据抓取（Web Scraping）中，Playwright 是一个非常强大的工具。它不仅支持多浏览器自动化，还能高效处理表单填充、按钮点击、页面跳转等交互操作。
本文将以 GitHub 个人资料页面为例，使用 Playwright 实现 自动登录 ，并抓取 GitHub 个人资料信息（如用户名、followers 数量等）。整个过程涵盖 页面元素交互、cookie 复用、数据提取 等关键技术，可用于类似的网站模拟登录和数据采集。
一、环境准备
1. 安装 Playwright
如果你的环境尚未安装 Playwright，可以运行以下命令安装：
npm init -y # 初始化项目（可选）npm install -D playwright
然后，安装 Playwright 需要的浏览器：
npx playwright install
二、实现 GitHub 自动登录
在 Playwright 中，我们可以使用 page.fill() 填充表单，page.click() 点击按钮来实现自动登录。以下代码展示了如何登录 GitHub 并抓取个人资料信息。
1. 登录 GitHub 并抓取个人资料
const {chromium} = require('playwright');
(async () => {const browser = await chromium.launch({ headless: false}); // 开启 GUI 便于调试
const context = await browser.newContext();
const page = await context.newPage();
console.log("访问 GitHub 登录页面...");
await page.goto('https://github.com/login');
// 填写用户名和密码
await page.fill('input[name="login"]', 'your-username'); // 替换为你的 GitHub 用户名
await page.fill('input[name="password"]', 'your-password'); // 替换为你的 GitHub 密码
// 点击登录按钮
await page.click('input[type="submit"]');
// 等待页面跳转
await page.waitForNavigation();
console.log("登录成功，访问个人资料页面...");
await page.goto('https://github.com/your-username'); // 替换为你的 GitHub 用户名页面
// 抓取用户名和 Followers 数量
const username = await page.innerText('span.p-nickname');
const followers = await page.innerText('a[href*="followers"] span');
console.log(`GitHub 用户名: ${username}`);
console.log(`Followers 数量: ${followers}`);
await browser.close();})();
代码解析
page.goto('https://github.com/login')：访问 GitHub 登录页面。page.fill('input[name="login"]', 'your-username')：填充用户名。page.fill('input[name="password"]', 'your-password')：填充密码。page.click('input[type="submit"]')：点击登录按钮。await page.waitForNavigation()：等待页面跳转完成。page.goto('https://github.com/your-username')：访问 GitHub 个人主页。page.innerText('span.p-nickname')：提取用户名。page.innerText('a[href*="followers"] span')：提取 Followers 数量。
🔴 ⚠️ 注意：请勿使用 Playwright 登录未经授权的网站进行爬取，建议仅用于个人账户测试，避免违反网站的使用政策。
三、使用 Cookie 复用登录状态
每次登录都需要输入用户名和密码，显然效率不高。Playwright 允许我们 保存登录状态，下次启动浏览器时直接复用已有的 Cookie，避免重复登录。
1. 保存登录状态
在第一次登录后，我们可以保存 cookies 和 localStorage 以供后续使用。
const {chromium} = require('playwright');
const fs = require('fs');
(async () => {const browser = await chromium.launch({ headless: false});
const context = await browser.newContext();
const page = await context.newPage();
await page.goto('https://github.com/login');
await page.fill('input[name="login"]', 'your-username');
await page.fill('input[name="password"]', 'your-password');
await page.click('input[type="submit"]');
await page.waitForNavigation();
console.log("登录成功，保存 Cookie...");
const storage = await context.storageState();
fs.writeFileSync('auth.json', JSON.stringify(storage));
await browser.close();})();
2. 复用 Cookie 自动登录
下次运行时，我们可以直接加载 auth.json，避免重复输入账号密码。
const {chromium} = require('playwright');
const fs = require('fs');
(async () => {const browser = await chromium.launch({ headless: false});
const context = await browser.newContext({storageState: 'auth.json' // 复用登录状态});
const page = await context.newPage();
console.log("使用 Cookie 直接访问个人主页...");
await page.goto('https://github.com/your-username');
const username = await page.innerText('span.p-nickname');
const followers = await page.innerText('a[href*="followers"] span');
console.log(`GitHub 用户名: ${username}`);
console.log(`Followers 数量: ${followers}`);
await browser.close();})();
四、处理双因素认证（2FA）
如果 GitHub 开启了双因素认证（2FA），则 Playwright 需要处理额外的验证码输入。你可以：
- 手动输入验证码，然后在 Playwright 代码中
await page.waitForNavigation()等待手动输入完成。 - 使用短信 / 邮件接收验证码，然后使用
page.fill()填充验证码。
例如：
await page.fill('input[name="otp"]', '123456'); // 需要手动替换为真实验证码
await page.click('button[type="submit"]');
await page.waitForNavigation();
五、总结
本文使用 Playwright 模拟 GitHub 登录，并抓取个人资料信息，介绍了 自动填充表单、抓取数据、Cookie 复用、处理 2FA 等核心技术。此方法适用于类似的网站自动化交互，例如：
- 自动化测试：在 CI/CD 中进行 UI 自动化测试。
- 批量数据采集：抓取个人信息、粉丝数、仓库数据等。
- 账号管理：批量登录多个账号并执行操作。
不过，需要注意的是，Playwright 并不适用于恶意爬取行为，使用时需遵守网站的 robots.txt 和 API 访问限制，以免触发封禁机制。
💡 你对 Playwright 还有哪些需求或挑战？欢迎留言讨论！🚀
