AI实践哪家强?来 AICon, 解锁技术前沿,探寻产业新机! 了解详情
写点什么

如何成为 Puppeteer 大师

  • 2017-09-24
  • 本文字数:2031 字

    阅读完需:约 7 分钟

对程序进行测试有很多方法。从微型的单元测试开始,到更大型的用户界面测试 Puppeteer 绝对属于后一种。

Puppeteer 宣传自己是

一个 Node 库,它提供了一组高级 API,通过 DevTools 协议控制无界面 Chrome。

简而言之,基于 Chrome Devtools 协议,Puppeteer 可以让用户界面测试变得很轻松。而所有这一切都是免费的。

什么是 Puppeteer?

Puppeteer 是一个用户界面自动化工具。它通过使用 Chrome 无界面模式和 DevTools 协议的组合来实现这一点。正如上面的引用所言,它使用一个更上层的 API 来封装其功能,让用户界面测试自动化变得轻而易举。

人们基于 Chrome DevTools 协议开发了一系列 Google Chrome 工具。你在浏览器中点击更多工具 -> 开发工具,打开的就是 DevTools 。DevTools 协议是 DevTools 的动力基础,我们现在可以使用 Chrome 中的 DevTools 来做更多的事情。

无界面Chrome 是没有Chrome 的Chrome。是的,你没看错。它允许你从浏览器之外的环境(即命令行)与Chromium 进行交互。

将Chromium 和 Blink 渲染引擎带入命令行使得很多事情变得可行,比如自动化测试。

安装

安装很简单,可以通过 yarn npm 来完成。只需运行下面的命令:

复制代码
yarn add pupeeter
# or "npm i puppeteer"

之后可以像其它 nodejs 程序一样用 node 来运行。

创建截图

有时你想测试像 CSS 这样的东西,确保网站观感没有出现回退。

譬如,对我的博客首页进行截图:

复制代码
const puppeteer = require("puppeteer");
(async() => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto("http://jackhiston.com/");
await page.screenshot({ path: "jackhiston-blog.png" });
browser.close();
})();

首先我们要引用 puppeteer 作为依赖包。有了这个,你可以启动一个浏览器实例,它实际上也可以在屏幕上加载浏览器,如下所示:

复制代码
const browser = await puppeteer.launch({ headless: false });

注意 headless 选项。

这样你就可以在浏览页面时创建一个全新的页面,然后你可以“转到”一个特定的网址(在这个例子里会转到我的主页)。

然后,我们可以使用内建的屏幕截图功能来保存页面截图。

爬取网页

另外一个应用场景是用 Puppeteer 爬取网站的内容。在下面的例子里,我将浏览骇客新闻并从第一页上取得所有新闻的链接:

复制代码
const puppeteer = require("puppeteer");
(async() => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
page.on("console", (...args) => console.log("PAGE LOG:", ...args));
await page.goto("https://news.ycombinator.com", { waitUntil: "networkidle" });
const links = await page.evaluate(() => {
const anchors = Array.from(document.querySelectorAll(".storylink"));
return anchors.map(anchor => anchor.textContent);
});
console.log(links.join("\n"));
browser.close();
})();

这里需要注意的是 page.evaluate 功能。它允许我们检查当前所在的页面 ,就像我们在 Chrome 的 DevTools 里做的那样。

点击链接并浏览

我想展示的最后一个用例是导航。在下面的例子中,我展示了你如何点击页面链接并等待页面加载,并将结果记录下来:

复制代码
const puppeteer = require("puppeteer");
(async() => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto("https://news.ycombinator.com", { waitUntil: "networkidle" });
await page.click("a.storylink");
var response = await page.waitForNavigation({ waitUntil: "networkidle" });
console.log(await page.title());
console.log(page.url());
browser.close();
})();

在这里, page.waitForNavigation 是一个很关键的功能。我们可以等到页面加载完毕,因为 promise 只会在点击事件完成后结束。

这对于浏览导航来说非常有用,并且可以进行全面的 UI 用户体验测试。

总结

Puppeteer 的重点是提供 API 来展现 DevTools 协议的功能。

Selenium 这样的工具更加成熟,并提供跨浏览器测试。Puppeteer 不属于 Selenium 这类应用。

Puppeteer 只是许多无界面 Chrome 的应用中的一种。在撰写本文时,已经有很多项目在使用无界面 Chrome。Ken Soh 的博客很好地介绍了这方面的内容。其他使用DevTools 协议的项目可以在这里找到。

Puppeteer 由 Chrome DevTools 团队维护,他们正在寻求各种人才为社区作贡献。因此,你可以通过加入 Puppeteer 开源项目来推动无界面 Chrome 自动化测试。

谢谢阅读。请与朋友分享。

有用的链接

查看英文原文 Making a Master Puppeteer


感谢薛命灯对本文的审校。

给InfoQ 中文站投稿或者参与内容翻译工作,请邮件至 editors@cn.infoq.com 。也欢迎大家通过新浪微博( @InfoQ @丁晓昀),微信(微信号: InfoQChina )关注我们。

2017-09-24 19:007899
用户头像

发布了 322 篇内容, 共 151.7 次阅读, 收获喜欢 148 次。

关注

评论

发布
暂无评论
发现更多内容

使用了瓴羊Quick BI,数据分析的效率有效提升

夏日星河

完美主义者友好!合合信息旗下扫描全能王“智能擦除”照片中的杂物

合合技术团队

人工智能 图片 文本

关系型数据库的架构演变

石臻臻的杂货铺

数据库 架构

直播 | StarRocks 实战系列第二期--导入优化&问题排查

StarRocks

数据库 开源

ChatGPT入门案例|商务智能对话客服(二)| 社区征文

TiAmo

openai ChatGPT

拥有了瓴羊Quick BI,企业的数据分析变得更好

巷子

QCon演讲实录(下):多云管理关键能力实现与解析-AppManager

阿里云大数据AI技术

大数据 运维 多云服务 多云管理

WorkPlus即时通讯集成工作平台,提效企业一体化管控

BeeWorks

多款社交黑马海外霸榜,融云全球通信服务护航登顶

融云 RongCloud

什么是网关型堡垒机?与运维审计堡垒机有什么区别?

行云管家

堡垒机 堡垒机网络安全

基于开源IM即时通讯框架MobileIMSDK:RainbowChat v8.4版已发布

JackJiang

即时通讯 即时通讯IM

连续两年榜上有名!TDengine 荣获墨天轮“2022 年度时序数据库”奖项

TDengine

数据库 tdengine 时序数据库

Maven Shade插件relocation修改类常量的问题

Laughing

Java 后端 Maven-Shade-Plugin RelocationClass

程序员超级干货书单:技术人必看

引迈信息

程序员 敏捷开发 书单

黑龙江哈尔滨市等保测评机构有五家啦!名单看这里!

行云管家

等保 机构 等保测评 哈尔滨

利用DUCC配置平台实现一个动态化线程池

京东科技开发者

spring 多线程 代码 动态线程池 ducc

用Docker在本地搭建nginx静态服务器&反向代理

致知Fighting

Java Docker 后端

有了瓴羊Quick BI,企业再也不必担心可视化分析情况

小偏执o

电阻为什么都是4.7kΩ、5.1kΩ,而不是整数5kΩ?

元器件秋姐

科普 元器件 元器件知识 电阻 电阻值

百分点科技宣布接入百度文心一言能力 数据科学基础平台获领先AI技术加持

百分点科技技术团队

飞桨框架v2.4 API新升级!全面支持稀疏计算、图学习、语音处理等任务

百度Geek说

API 框架 3D点云 企业号 2 月 PK 榜 Sparse Transformer

大规模即时云渲染技术,追求体验与成本的最佳均衡

阿里云CloudImagine

云计算 云渲染 云庙会

我不想再传递 nameof 了

newbe36524

C# Docker Kubernetes

飞桨特色产业级模型库助力AI开发与落地更简单

飞桨PaddlePaddle

paddle 开源 模型 飞桨

更专业、安全、可控!政企都选择WorkPlus私有化部署

BeeWorks

可靠、稳定、安全,龙蜥云原生容器镜像正式发布!

OpenAnolis小助手

开源 容器 云原生 镜像 龙蜥社区

瓴羊Quick BI可视化功能,满足企业的数据分析需求

对不起该用户已成仙‖

使用自定义的初始化方法宏(OC)

刿刀

炸了!3年图片都没了

艾小仙

国际财务系统基于ShardingSphere的数据分片和一主多从实践

京东科技开发者

数据库 数据分片 ShardingSphere 企业号 2 月 PK 榜 一主多从

MASA Stack 1.0 发布会 —— 社区问题解答

MASA技术团队

.net stack 应用现代化 MASA

如何成为Puppeteer大师_软件工程_Jack Histon_InfoQ精选文章