Chrome浏览器实例的TypeScript自动化脚本

本文涉及的产品
云原生大数据计算服务MaxCompute,500CU*H 100GB 3个月
简介: Chrome浏览器实例的TypeScript自动化脚本

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,并捕获页面的截图。

  1. 启动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;
}

  1. 导航到指定URL
    启动浏览器后,我们需要创建一个新的页面并导航到指定的URL。
    typescript

async function navigateToUrl(url: string, browser: puppeteer.Browser) {
const page = await browser.newPage();
await page.goto(url, { waitUntil: 'networkidle0' });
return page;
}

  1. 捕获页面截图
    在页面加载完成后,我们可以捕获页面的截图。
    typescript

async function captureScreenshot(page: puppeteer.Page) {
await page.screenshot({ path: 'screenshot.png' });
}

  1. 关闭浏览器
    最后,不要忘记关闭浏览器实例以释放资源。
    typescript

async function closeBrowser(browser: puppeteer.Browser) {
await browser.close();
}

  1. 整合脚本
    将上述函数整合到一个主函数中,并运行。
    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生成等。

相关实践学习
基于MaxCompute的热门话题分析
本实验围绕社交用户发布的文章做了详尽的分析,通过分析能得到用户群体年龄分布,性别分布,地理位置分布,以及热门话题的热度。
SaaS 模式云数据仓库必修课
本课程由阿里云开发者社区和阿里云大数据团队共同出品,是SaaS模式云原生数据仓库领导者MaxCompute核心课程。本课程由阿里云资深产品和技术专家们从概念到方法,从场景到实践,体系化的将阿里巴巴飞天大数据平台10多年的经过验证的方法与实践深入浅出的讲给开发者们。帮助大数据开发者快速了解并掌握SaaS模式的云原生的数据仓库,助力开发者学习了解先进的技术栈,并能在实际业务中敏捷的进行大数据分析,赋能企业业务。 通过本课程可以了解SaaS模式云原生数据仓库领导者MaxCompute核心功能及典型适用场景,可应用MaxCompute实现数仓搭建,快速进行大数据分析。适合大数据工程师、大数据分析师 大量数据需要处理、存储和管理,需要搭建数据仓库?学它! 没有足够人员和经验来运维大数据平台,不想自建IDC买机器,需要免运维的大数据平台?会SQL就等于会大数据?学它! 想知道大数据用得对不对,想用更少的钱得到持续演进的数仓能力?获得极致弹性的计算资源和更好的性能,以及持续保护数据安全的生产环境?学它! 想要获得灵活的分析能力,快速洞察数据规律特征?想要兼得数据湖的灵活性与数据仓库的成长性?学它! 出品人:阿里云大数据产品及研发团队专家 产品 MaxCompute 官网 https://www.aliyun.com/product/odps 
目录
打赏
0
1
1
0
235
分享
相关文章
浏览器自动化检测对抗:修改navigator.webdriver属性的底层实现
本文介绍了如何构建一个反检测爬虫以爬取Amazon商品信息。通过使用`undetected-chromedriver`规避自动化检测,修改`navigator.webdriver`属性隐藏痕迹,并结合代理、Cookie和User-Agent技术,实现稳定的数据采集。代码包含浏览器配置、无痕设置、关键词搜索及数据提取等功能,同时提供常见问题解决方法,助你高效应对反爬策略。
131 1
定期备份数据库:基于 Shell 脚本的自动化方案
本篇文章分享一个简单的 Shell 脚本,用于定期备份 MySQL 数据库,并自动将备份传输到远程服务器,帮助防止数据丢失。
AutoMouser:AI Chrome扩展程序,实时跟踪用户的浏览器操作,自动生成自动化操作脚本
AutoMouser是一款Chrome扩展程序,能够实时跟踪用户交互行为,并基于OpenAI的GPT模型自动生成Selenium测试代码,简化自动化测试流程。
301 17
AutoMouser:AI Chrome扩展程序,实时跟踪用户的浏览器操作,自动生成自动化操作脚本
构建高效运维体系:从自动化到智能化的演进
本文探讨了如何通过自动化和智能化手段,提升IT运维效率与质量。首先介绍了自动化在简化操作、减少错误中的作用;然后阐述了智能化技术如AI在预测故障、优化资源中的应用;最后讨论了如何构建一个既自动化又智能的运维体系,以实现高效、稳定和安全的IT环境。
153 4
机器学习+自动化运维:让服务器自己修Bug,运维变轻松!
机器学习+自动化运维:让服务器自己修Bug,运维变轻松!
128 14
,自动化运维成为现代IT基础设施的关键部分。Puppet是一款强大的自动化运维工具
【10月更文挑战第7天】随着云计算和容器化技术的发展,自动化运维成为现代IT基础设施的关键部分。Puppet是一款强大的自动化运维工具,通过定义资源状态和关系,确保系统始终处于期望配置状态。本文介绍Puppet的基本概念、安装配置及使用示例,帮助读者快速掌握Puppet,实现高效自动化运维。
152 4
基于AI的自动化服务器管理:解锁运维的未来
基于AI的自动化服务器管理:解锁运维的未来
301 0
基于AI的自动化事件响应:智慧运维新时代
基于AI的自动化事件响应:智慧运维新时代
220 11
智能化运维:从自动化到AIOps的演进之路####
本文深入探讨了IT运维领域如何由传统手工操作逐步迈向高度自动化,并进一步向智能化运维(AIOps)转型的过程。不同于常规摘要仅概述内容要点,本摘要将直接引入一个核心观点:随着云计算、大数据及人工智能技术的飞速发展,智能化运维已成为提升企业IT系统稳定性与效率的关键驱动力。文章详细阐述了自动化工具的应用现状、面临的挑战以及AIOps如何通过预测性分析和智能决策支持,实现运维工作的质变,引领读者思考未来运维模式的发展趋势。 ####
智能化运维:从自动化到AIOps的演进与实践####
本文探讨了智能运维(AIOps)的崛起背景,深入分析了其核心概念、关键技术、应用场景及面临的挑战,并对比了传统IT运维模式,揭示了AIOps如何引领运维管理向更高效、智能的方向迈进。通过实际案例分析,展示了AIOps在不同行业中的应用成效,为读者提供了对未来智能运维趋势的洞察与思考。 ####
307 1
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等