Chrome浏览器作为全球使用最广泛的浏览器之一，其自动化操作的需求也随之增长。Puppeteer是一个Node库，它提供了一套高级API来控制Chrome或Chromium。本文将介绍如何使用TypeScript结合Puppeteer来创建一个自动化脚本，并在代码中集成代理信息，以实现对Chrome浏览器实例的控制。
为什么选择TypeScript和Puppeteer
TypeScript是一种由微软开发的开源编程语言，它是JavaScript的一个超集，添加了类型系统和对ES6+的支持。使用TypeScript可以提高代码的可读性和可维护性，同时减少运行时错误。
Puppeteer是一个Node库，它提供了一套API来控制无头版或全版Chrome。Puppeteer默认以无头模式运行，但也可以配置为运行“全头”模式。它能够模拟用户的行为，如点击、滚动、导航等，非常适合于自动化测试、生成页面截图或PDF等场景。
环境准备
在开始之前，确保你的开发环境中安装了Node.js和npm（Node包管理器）。接下来，你需要安装TypeScript和Puppeteer。
bash
npm install -D typescript @types/node puppeteer
创建TypeScript配置
创建一个tsconfig.json文件来配置TypeScript编译器的选项：
json
{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
},
"include": ["src/*/"],
"exclude": ["node_modules"]
}
编写自动化脚本
接下来，我们将编写一个简单的自动化脚本，该脚本将启动Chrome浏览器，设置代理，导航到一个指定的URL，并捕获页面的截图。
- 启动Chrome浏览器实例
首先，我们需要启动一个Chrome浏览器实例，并设置代理。
typescript
import puppeteer from 'puppeteer';
const proxyHost = "www.16yun.cn";
const proxyPort = "5445";
const proxyUser = "16QMSOML";
const proxyPass = "280651";
async function launchBrowser() {
const browser = await puppeteer.launch({
headless: false, // 设置为非无头模式，以便我们可以看到浏览器操作
slowMo: 50, // 减慢操作速度，便于观察
args: [
--proxy-server=http://${proxyUser}:${proxyPass}@${proxyHost}:${proxyPort},
'--proxy-bypass-list=*',
'--no-sandbox',
'--disable-setuid-sandbox',
'--disable-dev-shm-usage',
],
});
return browser;
}
- 导航到指定URL
启动浏览器后，我们需要创建一个新的页面并导航到指定的URL。
typescript
async function navigateToUrl(url: string, browser: puppeteer.Browser) {
const page = await browser.newPage();
await page.goto(url, { waitUntil: 'networkidle0' });
return page;
}
- 捕获页面截图
在页面加载完成后，我们可以捕获页面的截图。
typescript
async function captureScreenshot(page: puppeteer.Page) {
await page.screenshot({ path: 'screenshot.png' });
}
- 关闭浏览器
最后，不要忘记关闭浏览器实例以释放资源。
typescript
async function closeBrowser(browser: puppeteer.Browser) {
await browser.close();
}
- 整合脚本
将上述函数整合到一个主函数中，并运行。
typescript
async function main() {
const browser = await launchBrowser();
const page = await navigateToUrl('https://www.example.com', browser);
await captureScreenshot(page);
await closeBrowser(browser);
}
main();
运行脚本
保存上述代码到src目录下的一个文件中，例如自动化脚本.ts。然后，使用以下命令编译并运行TypeScript脚本：
bash
tsc && node dist/自动化脚本.js
总结
通过上述步骤，我们成功创建了一个使用TypeScript和Puppeteer的Chrome浏览器自动化脚本，该脚本集成了代理设置。这个脚本能够启动Chrome浏览器，设置代理，导航到指定的URL，并捕获页面的截图。这只是Puppeteer强大功能的冰山一角，你可以根据需要扩展更多的功能，如表单填写、链接点击、PDF生成等。
