数据API 产品矩阵 案例 关于
掌握聚合最新动态了解行业最新趋势
API接口,开发服务,免费咨询服务

使用Puppeteer玩转Headless Chrome

Chrome 在 59 版本时推出了 Headless Chrome(无界面 Chrome),可用于自动化测试和不需要可视化用户界面的服务器。在之前做这些事情的是 PhantomJS,不过 PhantomJS 是基于 WebKit 的工具,而 Headless Chrome 是基于 Blink 的。

Headless Chrome 由于能和 Chrome Devtools 进行无缝的交互,因此一经推出就受到广大前端开发者的欢迎,Puppeteer 就是Chrome团队推出的基于 Headless Chrome 开发的自动化工具,它可以用来做UI自动化测试,不过,它能做的比测试要多的多,下面就让我们来看一下它能做哪些事情。

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

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

Puppeteer Github地址:

https://github.com/GoogleChrome/puppeteer

简而言之,基于 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 自动化测试。

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

有用的链接

前端之巅.png

原文来自:前端之巅

声明:所有来源为“聚合数据”的内容信息,未经本网许可,不得转载!如对内容有异议或投诉,请与我们联系。邮箱:marketing@think-land.com

掌握聚合最新动态了解行业最新趋势
API接口,开发服务,免费咨询服务
使用Puppeteer玩转Headless Chrome
发布:2017-10-24 13:56:09

Chrome 在 59 版本时推出了 Headless Chrome(无界面 Chrome),可用于自动化测试和不需要可视化用户界面的服务器。在之前做这些事情的是 PhantomJS,不过 PhantomJS 是基于 WebKit 的工具,而 Headless Chrome 是基于 Blink 的。

Headless Chrome 由于能和 Chrome Devtools 进行无缝的交互,因此一经推出就受到广大前端开发者的欢迎,Puppeteer 就是Chrome团队推出的基于 Headless Chrome 开发的自动化工具,它可以用来做UI自动化测试,不过,它能做的比测试要多的多,下面就让我们来看一下它能做哪些事情。

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

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

Puppeteer Github地址:

https://github.com/GoogleChrome/puppeteer

简而言之,基于 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 自动化测试。

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

有用的链接

前端之巅.png

原文来自:前端之巅

声明:所有来源为“聚合数据”的内容信息,未经本网许可,不得转载!如对内容有异议或投诉,请与我们联系。邮箱:marketing@think-land.com

选择想要的接口, 看看能免费获取多少次调用 选择(单选)或填写想要的接口
  • 短信API服务
  • 银行卡四元素检测[简]
  • 身份证实名认证
  • 手机状态查询
  • 三网手机实名制认证[简]
  • 身份证OCR识别
  • 证件识别
  • 企业工商信息
短信API服务
  • 短信API服务
  • 银行卡四元素检测[简]
  • 身份证实名认证
  • 手机状态查询
  • 三网手机实名制认证[简]
  • 身份证OCR识别
  • 证件识别
  • 企业工商信息
  • 确定
选择您的身份
请选择寻找接口的目的
预计每月调用量
请选择预计每月调用量
产品研发的阶段
请选择产品研发的阶段
×

前往领取
电话 0512-88869195
×
企业用户认证,
可获得1000次免费调用
注册登录 > 企业账户认证 > 领取接口包
企业用户认证领取接口包 立即领取
× 企业用户认证,
可获得1000次免费调用,立即领取>
数 据 驱 动 未 来
Data Drives The Future