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

本文涉及的产品
云原生大数据计算服务 MaxCompute,5000CU*H 100GB 3个月
云原生大数据计算服务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 
相关文章
|
30天前
|
Web App开发 人工智能 JSON
AutoMouser:AI Chrome扩展程序,实时跟踪用户的浏览器操作,自动生成自动化操作脚本
AutoMouser是一款Chrome扩展程序,能够实时跟踪用户交互行为,并基于OpenAI的GPT模型自动生成Selenium测试代码,简化自动化测试流程。
139 17
AutoMouser:AI Chrome扩展程序,实时跟踪用户的浏览器操作,自动生成自动化操作脚本
|
1月前
|
Web App开发 安全 前端开发
一个接口4个步骤轻松搞定最新版Chrome、Edge、Firefox浏览器集成ActiveX控件
目前的浏览器市场,谷歌浏览器占据了半壁江山,因此,谷歌也是最有话语权的,2015年开始取消支持 NPAPI 插件,2022 年10月停止支持 PPAPI 插件;而曾经老大哥IE浏览器也已停止服务,退出历史舞台,导致大量曾经安全、便捷的ActiveX控件无法使用。为了解决这个难题,本人特研发出allWebPlugin中间件,重新让所有ActiveX控件能在谷歌、火狐等浏览器使用。
|
2月前
|
Python
自动化微信朋友圈:Python脚本实现自动发布动态
本文介绍如何使用Python脚本自动化发布微信朋友圈动态,节省手动输入的时间。主要依赖`pyautogui`、`time`、`pyperclip`等库,通过模拟鼠标和键盘操作实现自动发布。代码涵盖打开微信、定位朋友圈、准备输入框、模拟打字等功能。虽然该方法能提高效率,但需注意可能违反微信使用条款,存在风险。定期更新脚本以适应微信界面变化也很重要。
212 61
|
15天前
|
存储 安全 JavaScript
TypeScript-内置应用程序类型-Recode
通过使用 `Record` 类型,开发者可以显著提升代码的安全性和可维护性。无论是配置对象、字典结构还是动态表单,`Record` 类型都提供了一个简洁、类型安全的解决方案。
187 82
|
3月前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
66 2
|
3月前
|
设计模式 JavaScript 安全
TypeScript性能优化及代码质量提升的重要性、方法与策略,包括合理使用类型注解、减少类型断言、优化模块导入导出、遵循编码规范、加强代码注释等
本文深入探讨了TypeScript性能优化及代码质量提升的重要性、方法与策略,包括合理使用类型注解、减少类型断言、优化模块导入导出、遵循编码规范、加强代码注释等,旨在帮助开发者在保证代码质量的同时,实现高效的性能优化,提升用户体验和项目稳定性。
71 6
|
3月前
|
JavaScript 安全 前端开发
TypeScript类型声明:基础与进阶
通过本文的介绍,我们详细探讨了TypeScript的基础与进阶类型声明。从基本数据类型到复杂的泛型和高级类型,TypeScript提供了丰富的工具来确保代码的类型安全和可维护性。掌握这些类型声明能够帮助开发者编写更加健壮和高效的代码,提高开发效率和代码质量。希望本文能为您在使用TypeScript时提供实用的参考和指导。
63 2
|
3月前
|
JavaScript 前端开发 安全
TypeScript进阶:类型系统与高级类型的应用
【10月更文挑战第25天】TypeScript作为JavaScript的超集,其类型系统是其核心特性之一。本文通过代码示例介绍了TypeScript的基本数据类型、联合类型、交叉类型、泛型和条件类型等高级类型的应用。这些特性不仅提高了代码的可读性和可维护性,还帮助开发者构建更健壮的应用程序。
48 0
|
3月前
|
JavaScript 开发者
在 Babel 插件中使用 TypeScript 类型
【10月更文挑战第23天】可以在 Babel 插件中更有效地使用 TypeScript 类型,提高插件的开发效率和质量,减少潜在的类型错误。同时,也有助于提升代码的可理解性和可维护性,使插件的功能更易于扩展和升级。
|
4月前
|
JavaScript 前端开发
TypeScript【类型别名、泛型】超简洁教程!再也不用看臭又长的TypeScript文档了!
【10月更文挑战第11天】TypeScript【类型别名、泛型】超简洁教程!再也不用看臭又长的TypeScript文档了!