WEB前端的自动化测试-Yeti篇

写一些单元测试来保证代码的质量和可维护性是码农必须要做的事，通常来说，写一点代码，写一点测试是一种很好的实践，然而身为前端码农，写出的代码可能需要运行在很多环境当中。如果我们写一点代码，然后就在IE6789，Chrome，Firefox，Safari，可能还有山寨浏览器abcd中人肉测试的话，实在是太崩溃了。幸好，大神们除了给我们提供了QUnit,YUITest,Jasmine等等单元测试框架之外，还提供了一些自动化测试工具，比如jsTestDriver，Selenium（Selenium Grid 2），以及本篇要介绍的Yeti，让我们能够更高效的写“有质保”的代码。

这3种自动化测试工具中，专注于提供本地自动化测试的就是来自YUI团队的Yeti了，它能够支持Qunit、YUITest、Jasmine、Mocha写成的单元测试，通过命令行可以方便的搭建Hub服务，并且能集成到WebStorm等IDE环境中，一键测试所有环境；来自google的jsTestDriver是全能型的，既适合在本地环境快速测试，又能够集成到CI中，执行代码提交后的自动化测试，也有QUnit的Adapter（这是能支持较新QUnitAPI的分支版本，jsTestDriver官方Wiki中的Adapter太旧了）来支持Qunit API写成的测试，但我始终觉得jsTestDriver少了点什么，没有选用……；ThoughtWorks的Selenium是一款Web自动化测试框架，提供了API来支持自动化的界面测试，做测试的同学应该比较熟悉。YUI团队提供了YUITest Selenium Driver，能够让Selenium运行YUITest的单元测试。Selenium运行需要每次驱动浏览器打开和关闭，不太适合本地环境快速的反馈循环。在《WEB前端的自动化测试-Selenium篇》会介绍如何在Selenium Grid 2中运行YUITest。

安装

Yeti是NodeJS的一个模块，能够使用npm很方便的安装。

$ npm install -g yeti

这样就可以在命令行直接使用yeti命令来执行测试了。

快速开始

$ yeti test/*.html

该命令会在创建一个一次性的Hub服务 http://localhost:9000/ ，打开需要测试的浏览器连接到该服务，在命令行回车后，就会开始在各个浏览器中测试相对路径test/*.html指定的单元测试页面。
一般在开发中，不会这样使用Yeti，每次创建服务太浪费时间。

创建Hub服务

$ yeti --server

会创建一个默认端口是9000的Hub服务 http://localhost:9000/，也可以用--port参数来指定端口。该命令会占用一个命令行终端，运行测试需要打开新的命令行终端。可以用这个Hub服务来捕获需要测试的浏览器，如果本地LAN有WIFI，那么移动终端的浏览器也可以很方便的测试，如果没有WIFI，可以参考结合localtunnel使用，方便移动终端测试。

$ yeti --hub http://localhost:9000/ test/*.html

在另外的命令行中执行该命令，就可以在已连接的浏览器中测试了。--hub参数指定Hub服务的地址。
虽然一行命令就可以自动运行测试了，但是能够一行命令都不输入就更快了吧。

集成Yeti到WebStorm

WebStorm是非常好用的前端IDE，jetbrains的其他IDE应该也都是神器，就是卖的比较贵，本屌丝只能先用着google到的分享帐号。

在WebStorm的扩展工具面板中，点选添加

在WebStrom的设置中可以添加扩展工具，File>Settings>External Tools面板中，点选黄色的+号。

 

 

Yeti设置

主要需要设置Program, Parameters, Working derectory三项：Program是选择命令行运行的程序，因为Yeti是NodeJS模块，所以是需要你机器中node.exe的路径；Parameters就是node的参数，这里需要找到Yeti的安装目录，具体怎么找请google一下吧。Yeti的可执行文件后面需要跟上Yeti的参数，–hub指定Hub服务地址，后面则是需要测试的页面路径，图中的设置是WebStorm提供的路径参数（这些参数可以点击Insert macro按钮后选择），$FileRelativePath$指当前鼠标选中的文件相对Project目录的路径；Working directory是当前命令工作的目录，这里把它指向Project根目录了。这里的路径可能需要注意下，如果测试页面中有相对路径的js或其他资源，命令中的测试页面路径的顶层目录需要把这些资源包含进去，否则在测试时就会产生404。这里的表述不太清楚，懒得再截图了=。=！

设置完毕后，就可以选中项目中的测试页面，右键菜单中可以找到刚配置过的yeti，点击yeti选项就可以执行该页面的测试了。同样的，也可以再配置一份命令来运行整个项目的单元测试。

右键菜单执行测试

当然，也可以给yeti扩展设置快捷键，同样是Settings>Keymap面板，找到External tools下的yeti，双击并选择Add Keyboard Shortcut，就可以按组合键设置了。

给yeti设置快捷键

测试后会返回结果，如果有测试没有通过，会打印未通过的测试信息。但是貌似只对YUITest有良好支持，使用QUnit测试，只有偶尔能得到未通过的测试信息-。-

测试成功的命令行返回

测试失败的命令行返回

yeti还有些其他参数如--timeout、--query，以及config文件和输出Junit格式的报告等功能，具体可以参考Yeti主页或Github上的文档。

欢迎留言讨论。

本博客文章由LiZn创作或分享，以创作公用CC 姓名标示-非商业性-相同方式分享 3.0 Unported 授权条款共享。 
转载请注明 转自: WEB前端的自动化测试-Yeti篇 http://www.lizn.net/automated-testing-with-yeti/
希望本文能够对你有所帮助，欢迎留言讨论，如果你喜欢本站文章，可以使用该 RSS订阅地址来订阅本站。