首页 浏览器资讯正文

啥是无头浏览器,都能干啥?一文说清楚

admin 浏览器资讯 2020-05-10 813 0

引言

您如何知道您正在开发的网站的用户界面(UI)是否正常工作,以及该网站作为一个整体是否提供了最佳的用户体验(UX)?无头浏览器为您提供了一种快速、轻量级的方式来自动化高级操作,并了解您的站点在常见场景中的运行情况。

有很多无头选项可供选择,包括Chrome和Firefox等流行浏览器的无头版本,以及模拟几种不同浏览器的工具。熟悉无头测试的好处,了解更多可用的可能性,以便选择用于web开发和测试的最佳浏览器。

啥是无头浏览器,都能干啥?一文说清楚 浏览器资讯 第1张

无头浏览器基本知识

无头浏览似乎是一个奇怪的术语,但它只是一个没有可识别的图形界面的浏览器或浏览器模拟的名称。与使用熟悉的图形元素测试站点或执行常见操作不同,用例是自动化的,并使用命令行界面进行测试。

无头浏览器通常用于以下场景:

网站及应用测试JavaScript库测试JavaScript模拟与交互在后台运行一个或多个自动化UI测试这些操作可以帮助开发人员确认常见的网站活动是否顺利进行,并能够识别用户界面和用户体验方面的潜在问题。

在当今高度个性化的web环境中,终端用户的体验是至关重要的,因此在发布站点的公共版本之前,解决尽可能多的bug是至关重要的。

无头测试的常用用例

你应该用无头浏览器测试哪些用例?考虑用户在任何给定页面上可能采取的最频繁的操作。用户键入、单击或以其他方式与页面元素交互的每个点都是可能出错的点,您最好在测试阶段发现并修复问题,而不是在几周甚至几个月后发现故障,那时投诉就会蜂拥而至。

在一个无头测试环境,你可以编写和执行脚本:

测试基本流程和可选流程模拟单击链接和按钮自动填写和提交表格测试SSL性能尝试不同的服务器负载获取关于页面响应时间的报告获取有用的网站代码截屏查看结果测试这些用例为您提供了站点UI执行情况的可靠概述,并为您提供了在部署之前进行更改的基本信息。

选择一款无头浏览器

今天的网站呈现了许多复杂的用例,开发人员在过去不需要考虑这些用例。

对用户参与的更多关注创造了更多用户可以交互的元素,特别是电子商务网站,可能需要复杂的多级流来进行适当的导航。

任何妨碍用户顺利体验的问题都会破坏站点的成功。

在评估流行的无头浏览器时,请记住这一点。

您需要一个轻量级的解决方案,它很少占用资源,这样您就可以在后台运行它,而不会减慢开发工作,但是相同的解决方案必须允许您执行每一个必要的测试,以模拟目标用户的预期操作。

并不是所有的无头浏览器都适合相同的测试场景,所以您可能需要尝试几个不同的选项来找到适合您的开发需求的工具组合。

让我们来看看这六个web开发人员的流行选择。

Firefox无头模式

随着Firefox 56版本的发布,Mozilla开始提供对无头测试的支持。开发人员现在可以连接几个不同的api来以headless模式运行Firefox,并测试各种用例,而不是使用其他工具来模拟浏览器环境。

无头火狐的驱动可以是:

SeleniumSlimmerJSW3C WebDriver许多开发人员似乎更喜欢将Selenium作为无头Firefox测试和自动化的API,但是您可以使用最适合编写脚本和运行基本单元测试的选项。

考虑到用户在现代网站上可以进行的所有潜在交互,使用Firefox headless深入到各个元素是开发过程中非常有用的一部分。虽然用户可能会在复杂的流程中遇到问题,并在试图识别和报告错误的过程中感到沮丧,但是您可以使用无头模式的Firefox来解决每个人的问题。

啥是无头浏览器,都能干啥?一文说清楚 浏览器资讯 第2张

Headless Chrome

熟悉Chrome的开发人员可以在headless模式下启动59或更高版本,利用Chromium和Blink渲染引擎提供的所有可能性。这个轻量级的,节省内存的无头浏览器给你的工具:

测试多级导航收集页面信息截屏创建pdf文档导航是现代网站环境中一个特别重要的部分,随着移动用户的不断增加,导航变得越来越重要。尝试无头Chrome当你想要确保用户可以很容易地移动整个网站。收集关于站点如何响应的报告和图像,并使用这些信息进行更改以改进UI。

啥是无头浏览器,都能干啥?一文说清楚 浏览器资讯 第3张

PhantomJS

复杂性在现代internet环境中很常见,而PhantomJS的构建就是为了使用基本的命令行测试来处理这一切。这个无头的WebKit可以通过JavaScript API编写脚本,并使用CasperJS来处理测试。PhantomJS能够模拟完整的导航场景,可以显示用户在浏览时可能遇到错误的所有地方。

对多种web标准的支持使得PhantomJS非常灵活和强大。页面自动化、网络监控和其他重要特性允许您模拟一切,从最基本的用户交互到包含多个输入的流。可供使用的无头选项:

测试页面导航模拟用户行为使用断言测试截图PhantomJS的另一个好处是它的开源状态。该程序于2011年发布,目前仍在由专门的开发人员进行更新。

啥是无头浏览器,都能干啥?一文说清楚 浏览器资讯 第4张

Zombie.js

Zombie.js是另一个轻量级框架,用于在没有浏览器的模拟环境中测试客户端JavaScript。当前版本的Zombie (Zombie 5.x)经过测试,可以与Node.js版本4-6一起工作。

Zombie.js的一些特性:

运行在Node.js,使它很容易与您的项目集成功能齐全的API变态的快Zombie JS还提供了一组断言,你可以直接从浏览器对象访问这些断言。例如,可以使用断言检查页面是否成功加载。除了断言之外,Zombie JS还提供了处理cookie、选项卡、身份验证等的方法。

啥是无头浏览器,都能干啥?一文说清楚 浏览器资讯 第5张

HtmlUnit

HtmlUnit是用Java编写的,它允许你使用Java代码来自动化用户与网站交互的许多基本方式。

可以用来测试如下功能:

填写和提交表格点击链接网站重定向HTTP身份验证HTTPS页面性能HTTP头的性能该工具能够模拟几种不同的浏览器,这进一步扩展了它的功能。使用HtmlUnit,你可以在Chrome、Firefox 38及以后版本、Edge、IE8和IE11中创建脚本化用例。这涵盖了大量的新浏览器和旧浏览器,帮助确保每个用户在网站上线后都能获得更好的体验。电子商务网站很大程度上依赖于HtmlUnit允许你测试的大部分元素。

表单提交、站点安全和导航都是电子商务UI的组成部分,对转换和销售有重要影响。糟糕的用户界面意味着糟糕的用户体验,在快节奏的网络世界里,消费者会放弃这样的网站,转而在竞争对手的平台进行购物。HtmlUnit是一个有用的朋友,特别是你的工作,以打造一个业务网站与优越的性能为主。

啥是无头浏览器,都能干啥?一文说清楚 浏览器资讯 第6张

Splash

在Splash的文档中,无头浏览器被誉为轻量级浏览器,为开发人员提供了多种功能。这个“JavaScript呈现服务”使用HTTP API操作,在Python 3中使用Twisted和QT5实现。

如果你有如下需要,Splash可真是好工具:

了解HTML的性能测试渲染和加载速度关闭图像或使用AdBlock更快的加载可视化网站用户体验使用Lua浏览脚本一次处理多个页面Splash以HAR格式提供渲染信息,还允许你对结果进行屏幕截图。这个无头浏览器也可以与Scrapy集成,在你需要或想要从其他网站刮代码的情况下。由于它的通用性,Splash对于那些为测试工具包寻找“万能工具”的开发人员来说是一个非常有用的工具。

啥是无头浏览器,都能干啥?一文说清楚 浏览器资讯 第7张

写在最后

这些浏览器只代表了开发人员可以使用的少数测试环境。话虽如此,通过将本文中提到的前5个无头浏览器与谷歌趋势进行比较,可以明显看出PhantomJS仍然是最流行的无头浏览器工具之一。

啥是无头浏览器,都能干啥?一文说清楚 浏览器资讯 第8张

因为有各种各样的选择,你可以为不同的用例尝试多个,并确定哪一个最适合测试特定的场景。从简单的交互到完全自动化的流程,无头浏览器提供了优化每个开发站点的UI和UX所需的框架。

我是@程序员小助手,持续分享编程知识,欢迎关注。

评论