讲师中心 微信公众号
AI工具推荐 视频效率加速

谷歌浏览器如何使用Puppeteer进行自动化测试 Node.js控制Chrome教程【自动化】

秋磊酱_5468

秋磊酱_5468

发布时间:2026-02-24 12:17:02

|

885人浏览过

|

来源于php中文网

原创

Puppeteer提供Node.js控制Chrome/Chromium的自动化接口,支持无头/有头模式;需安装依赖、启动浏览器、加载网页截图、注入脚本提取数据、模拟用户交互。

谷歌浏览器如何使用puppeteer进行自动化测试 node.js控制chrome教程【自动化】

如果您希望使用Node.js控制谷歌浏览器执行网页自动化操作,Puppeteer提供了一套无头或有头模式下的Chrome/Chromium控制接口。以下是实现基础自动化测试与控制的具体步骤:

一、安装Puppeteer依赖

Puppeteer是一个Node.js库,通过DevTools协议与Chrome或Chromium通信,需先在项目中安装对应包。安装过程会自动下载兼容版本的Chromium,也可配置跳过下载以使用系统已安装的Chrome。

1、确保本地已安装Node.js(建议v16.0.0及以上版本)。

2、在项目根目录下运行命令初始化npm:npm init -y。

3、执行安装命令:npm install puppeteer。

4、如需使用系统Chrome而非内置Chromium,安装时添加--no-sandbox参数并后续指定executablePath。

二、启动浏览器实例

通过puppeteer.launch()可创建一个浏览器实例,支持无头模式(默认启用)或有头模式便于调试。实例启动后可获取页面对象并执行导航、截图等操作。

1、创建index.js文件,引入puppeteer模块:const puppeteer = require('puppeteer');

2、调用launch方法启动浏览器:const browser = await puppeteer.launch({ headless: false });

3、使用newPage()创建新标签页:const page = await browser.newPage();

4、关闭浏览器前请勿遗漏browser.close()调用,否则进程将持续占用资源。

三、加载网页并截取屏幕

page.goto()用于导航至指定URL,支持等待网络空闲或DOM加载完成;page.screenshot()可在任意时刻保存当前视口截图,适用于验证页面渲染结果。

1、导航到目标网址:await page.goto('https://example.com', { waitUntil: 'networkidle0' });

用于自动切换项目中适合的node 版本
用于自动切换项目中适合的node 版本

根据 package.json 中的 engines 字段自动检测 Node.js 版本需求,未安装 nvm 时自动安装并切换至对应版本。支持 Windows、macOS、Linux。适用于 Node.js 项目开发、版本切换和环境配置。

下载

2、设置视口尺寸以模拟不同设备:await page.setViewport({ width: 1280, height: 720 });

3、执行截图并保存为PNG文件:await page.screenshot({ path: 'screenshot.png' });

4、截图路径支持绝对路径或相对路径,文件夹需预先存在,否则抛出ENOENT错误。

四、注入脚本并提取页面数据

page.evaluate()可在浏览器上下文中执行JavaScript代码,返回序列化后的结果;该方法隔离Node.js环境与页面环境,是获取DOM元素内容、表单值或计算结果的核心方式。

1、等待特定选择器出现后再执行脚本:await page.waitForSelector('h1');

2、提取首屏h1文本内容:const title = await page.evaluate(() => document.querySelector('h1').innerText);

3、向页面注入自定义函数并传入参数:const result = await page.evaluate((selector) => document.querySelectorAll(selector).length, 'a');

4、evaluate内不可直接访问Node.js变量或require模块,所有依赖必须显式传递或内联定义。

五、模拟用户交互操作

page.click()、page.type()、page.select()等方法可模拟真实用户行为,配合waitForTimeout或waitForSelector可应对异步加载场景,提升脚本健壮性。

1、点击带有data-testid属性的按钮:await page.click('[data-testid="submit-btn"]');

2、在输入框中输入文本并触发键盘事件:await page.type('#search-input', 'Node.js automation');

3、选择下拉菜单中的选项:await page.select('select#country', 'US');

4、按下回车键提交表单:await page.keyboard.press('Enter');

相关文章

谷歌浏览器
谷歌浏览器

谷歌浏览器Google Chrome是一款可让您更快速、轻松且安全地使用网络的浏览器。Google Chrome的设计超级简洁,使用起来得心应手。这里提供了谷歌浏览器纯净安装包,有需要的小伙伴快来保存下载体验吧!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
SkildArt
SkildArt Hot

SkildArt是一款AI文本写作工具,一站式 AI 视觉创作平台。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

AionClaw
AionClaw Hot

AionClaw是一款面向办公、创作和编程任务的AI桌面智能体。

立刻MV
立刻MV Hot

立刻MV是一款AI文本写作工具,AI 音乐视频(MV)创作工具。

Loomy
Loomy Hot

一款AI工具,主要用于科大讯飞发布的桌面级 AI 助理,比 OpenClaw 更易用、更安全!,适合需要提升相关任务效率的用户。

蛙蛙写作

一款AI论文写作工具,主要用于超级AI智能写作助手,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

超级简历WonderCV

一款AI办公效率工具,主要用于免费求职简历模版下载制作,应届生职场人必备简历制作神器,适合需要提升相关任务效率的用户。

相关专题

更多
chrome什么意思
chrome什么意思

chrome是浏览器的意思,由Google开发的网络浏览器,它在2008年首次发布,并迅速成为全球最受欢迎的浏览器之一。本专题为大家提供chrome相关的文章、下载、课程内容,供大家免费下载体验。

2826

2023.08.11

chrome无法加载插件怎么办
chrome无法加载插件怎么办

chrome无法加载插件可以通过检查插件是否已正确安装、禁用和启用插件、清除插件缓存、更新浏览器和插件、检查网络连接和尝试在隐身模式下加载插件方法解决。更多关于chrome相关问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

5679

2023.11.06

Chrome开启无痕模式
Chrome开启无痕模式

本专题整合了Chrome无痕模式开启相关内容,阅读专题下面的文章了解更多详细教程。

4027

2026.03.24

require的用法
require的用法

require的用法有引入模块、导入类或方法、执行特定任务。想了解更多require的相关内容,可以阅读本专题下面的文章。

1975

2023.11.27

c语言const用法
c语言const用法

const是关键字,可以用于声明常量、函数参数中的const修饰符、const修饰函数返回值、const修饰指针。详细介绍:1、声明常量,const关键字可用于声明常量,常量的值在程序运行期间不可修改,常量可以是基本数据类型,如整数、浮点数、字符等,也可是自定义的数据类型;2、函数参数中的const修饰符,const关键字可用于函数的参数中,表示该参数在函数内部不可修改等等。

2298

2023.09.20

go语言goto的用法
go语言goto的用法

本专题整合了go语言goto的用法,阅读专题下面的文章了解更多详细内容。

2977

2025.09.05

硬盘接口类型介绍
硬盘接口类型介绍

硬盘接口类型有IDE、SATA、SCSI、Fibre Channel、USB、eSATA、mSATA、PCIe等等。详细介绍:1、IDE接口是一种并行接口,主要用于连接硬盘和光驱等设备,它主要有两种类型:ATA和ATAPI,IDE接口已经逐渐被SATA接口;2、SATA接口是一种串行接口,相较于IDE接口,它具有更高的传输速度、更低的功耗和更小的体积;3、SCSI接口等等。

3188

2023.10.19

PHP接口编写教程
PHP接口编写教程

本专题整合了PHP接口编写教程,阅读专题下面的文章了解更多详细内容。

5129

2025.10.17

Vite 项目如何打包和部署
Vite 项目如何打包和部署

Vite项目打包部署专题汇集生产构建、产物预览、输出目录、资源路径、Nginx与GitHub Pages部署及常见白屏和路由404问题的已审核文章,帮助读者完成上线流程。

40

2026.10.28

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WEB前端教程【HTML5+CSS3+JS】
WEB前端教程【HTML5+CSS3+JS】

共101课时 | 21.2万人学习

JS进阶与BootStrap学习
JS进阶与BootStrap学习

共39课时 | 4.9万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn