BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

如何成为Puppeteer大师

| 作者 Jack Histon 关注 0 他的粉丝 ,译者 薛命灯 关注 12 他的粉丝 发布于 2017年9月25日. 估计阅读时间: 9 分钟 | QCon北京2018全面起航:开启与Netflix、微软、ThoughtWorks等公司的技术创新之路!

亲爱的读者:我们最近添加了一些个人消息定制功能,您只需选择感兴趣的技术主题,即可获取重要资讯的邮件和网页通知

对程序进行测试有很多方法。从微型的单元测试开始,到更大型的用户界面测试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渲染引擎带入命令行使得很多事情变得可行,比如自动化测试。

安装

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

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)关注我们。

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我
社区评论

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT