企业官网建设流程全解析

1. 项目概述

今天要分享的是使用Playwright工具抓取网页Token的实战经验。作为一名长期从事自动化测试开发的工程师，我发现Playwright在网页数据抓取方面有着独特的优势，特别是在处理现代Web应用中的动态Token时表现尤为出色。

Token作为现代Web应用中的核心认证机制，广泛用于API调用、用户身份验证等场景。传统爬虫工具在处理这类动态生成的Token时往往力不从心，而Playwright凭借其完整的浏览器环境模拟能力，能够完美解决这个问题。

2. 环境准备与基础配置

2.1 Playwright安装与初始化

首先需要安装Playwright环境。推荐使用Node.js环境，因为Playwright对JavaScript/TypeScript的支持最为完善：

npm init playwright@latest

这个命令会自动完成Playwright核心库以及配套浏览器（Chromium、Firefox和WebKit）的安装。安装完成后，我们可以创建一个基础脚本文件getToken.js。

注意：Playwright会下载约300MB的浏览器二进制文件，请确保网络畅通。国内用户可能会遇到下载速度慢的问题，可以尝试设置镜像源或使用代理。

2.2 浏览器启动配置

在抓取Token的场景下，建议使用Chromium浏览器并启用无头模式：

const { chromium } = require('playwright'); (async () => { const browser = await chromium.launch({ headless: false, // 调试时可设为false查看浏览器操作 slowMo: 50, // 减慢操作速度便于观察 }); const context = await browser.newContext(); const page = await context.newPage(); // 后续操作代码 await browser.close(); })();

3. Token抓取核心逻辑实现

3.1 页面导航与登录模拟

大多数网站的Token都需要在登录后获取。以某电商网站为例，我们需要先模拟登录流程：

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();

3.2 监听网络请求捕获Token

现代Web应用通常通过API请求返回Token，我们可以通过监听网络请求来捕获：

let authToken = null; page.on('response', async response => { const url = response.url(); if (url.includes('/api/auth')) { const json = await response.json(); authToken = json.token; console.log('获取到Token:', authToken); } }); // 触发需要认证的操作 await page.click('#user-profile');

3.3 从LocalStorage提取Token

有些应用会将Token存储在浏览器的LocalStorage中：

const token = await page.evaluate(() => { return localStorage.getItem('auth_token'); }); console.log('从LocalStorage获取的Token:', token);

4. 高级技巧与优化方案

4.1 处理动态加载的Token

对于单页应用(SPA)中动态生成的Token，可能需要等待特定元素出现：

await page.waitForSelector('#token-element', { timeout: 5000 }); const dynamicToken = await page.$eval('#token-element', el => el.textContent);

4.2 自动化Token刷新机制

实现自动检测Token过期并刷新的逻辑：

const checkAndRefreshToken = async () => { const currentToken = await getCurrentToken(page); if (isTokenExpired(currentToken)) { await page.click('#refresh-token-btn'); await page.waitForResponse(response => response.url().includes('/refresh-token') ); } };

5. 常见问题与解决方案

5.1 跨域问题处理

当目标API与网页不同源时，需要特殊处理：

await context.route('**/api/auth', route => { route.continue({ headers: { ...route.request().headers(), 'Origin': 'https://target-domain.com' } }); });

5.2 反爬虫机制规避

应对网站的反爬虫措施：

await context.setExtraHTTPHeaders({ 'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36' }); // 随机延迟避免检测 await page.waitForTimeout(Math.random() * 3000 + 1000);

6. 完整示例代码

下面是一个完整的Token抓取示例：

const { chromium } = require('playwright'); (async () => { const browser = await chromium.launch({ headless: true }); const context = await browser.newContext(); const page = await context.newPage(); // 监听网络请求 let authToken = null; page.on('response', async response => { if (response.url().includes('/api/auth')) { const json = await response.json(); authToken = json.access_token; } }); // 模拟登录流程 await page.goto('https://example.com/login'); await page.fill('#username', 'testuser'); await page.fill('#password', 'password123'); await page.click('#login-btn'); // 等待登录完成 await page.waitForNavigation(); // 如果Token未通过请求获取，尝试从LocalStorage获取 if (!authToken) { authToken = await page.evaluate(() => { return localStorage.getItem('auth_token'); }); } console.log('最终获取的Token:', authToken); await browser.close(); })();

7. 安全与最佳实践

在实际项目中使用抓取的Token时，需要注意以下安全事项：

1. 不要将Token硬编码在脚本中
2. 使用环境变量存储敏感信息
3. 设置适当的Token过期处理逻辑
4. 遵守目标网站的服务条款
5. 限制Token的使用权限

重要提示：仅将本技术用于合法授权的测试和学习目的。未经授权抓取网站数据可能违反服务条款和相关法律法规。