Web UI测试的好帮手 - Selenium - skyoo61

Web UI测试的好帮手 - Selenium

一般Web UI怎么测试它们运行是不是正确呢？例如说按下某个按钮后，是不是跑出我们预期的结果?答案其实很简单，找几个人来试就可以了。

的确大部分的Web应用程序开发团队如果不是工程师自己测试UI，就是让实习生或者让负责这个程序的策划来测试。但大家也都明白，这样的测试真的是非常花时间，所以大部分的测试都是只做到70%或者80%就交给客户了。

而如果今天在策划里又加入了新功能，不确定会不会影响现在系统的执行，或者是想对系统程序进行重构的话，我们都必须再一次开启浏览器来验证原有的功能是否还是正确执行。假设页面操作的步骤很繁锁时，那么这样的测试可能就会要了测试人员的小命。

其实如果可以让UI测试这件事自动化不是很好吗？也就是说如果我们能把页面操作流程以及预期它会出现的结果编写成测试代码的话，就可以减少花费在测试人力的成本了。

Selenium 就是这样概念下诞生的一套测试框架，它最大的特色就是[直接用真实的浏览器来为我们测试页面上的UI]。换句话说，我们建立的测试是真的可以反映出浏览器操作时的状况，当然其中也包含JavaScript!

注：不过页面偏了几个pixels这个问题，就是Selenium能胜任的工作了。

接下来就是我简略研究心得，如果有错误之处，还望大家指正。

Selenium IDE

既然Selenium 是以真实的浏览器做为测试工具，那么我们该如何建立测试案例呢？因此Selenium就提供了一个名称Selenium IDE的工具来协助透过浏览器来建立测试案例。

目前Selenium IDE 是透过 Firefox 的 Add-on 机制来实现，也就是说目前只能用在Firefox或能够安装Firefox Add-on的浏览器上。不过它所产生出来的Script就不一定只有Firefox才能执行了。我们之后可以指定其他类型的浏览器来测试。

建立与执行Test Case

首先先以Firefox 打开Selenium的下载页面，下载并安装最新的Selenium IDE。完成后就可以在上方的工具菜单[工具 > Selenium IDE]打开如下图的Selenium IDE窗口：

详细的Selenium IDE界面介绍可以参考官方手册的IDE Features,这里简单介绍怎么通过Selenium IDE录制测试。

首先查看右上角的红色录制按钮是否正在录制中，如果是的话，就先按下它以停止录制。接着在左方的[Untitled]上按下右键，选择[Properties...]后出现下图：

在这里我们可以为稍后要录制的Test Case命名，这里先将Title的名称改为 [WebTest]。

现在按下右上解的红色录制按钮，Selenium IDE就会开始帮我们记录下我们操作页面的步骤。

现在我们以 Clicki 登录为测试，首先切换回Firefox浏览器，接着打开 Clicki 登录页面，并输入帐号和密码：

按下[登录]键，并出现登录成功或失败结果，这时我们可以选取预期会出现的提示，然后按下右键，在右键菜单中选择验证的方式：

在右键菜单下方会出现几个常用的验证方式，我们也可以在[Show All Available Commands]的子菜单中看到所有的可用验证指令。这些指令的意义可以参考官方手册的 Selenium Commands章节，这里就不再详细介绍。

动作完成之后，切换回Selenium IDE 并按下红色录制按钮以停止录制。这时我们就可以看到在Table选项里已经有我们刚刚所进行的步骤：

那么现在来测试一下刚刚录制的结果，按下绿色三角型的[执行]键，应该就能看到浏览器自动执行了刚刚的步骤。

而结果验证无误时，上面的画面就会出来全都是绿色的执行结果。

按照这个方式，我们可以同时建立多组Test Case，并将它们存成HTML，供后续测试用。每个Test Case都会被存成一个HTML，最后才用一个Test Suite的HTML将所有的Test Case HTML包含进来。

除了存为HTML之外，我们也可以将这些Test Case输出为可以执行的代码，让支持该程序语言的测试框架可以执行,以达到完全自动化的效果。

导出其它格式的Script

一般来说，在用Selenium IDE录制好Test Case后，我们会希望它能够自动化执行，因为转换成测试用的程序是可行的方法之一。另外一个用程序语言的优点是，我们可以在测试中加入流程逻辑、错误处理以及资料库整合等等，这些都是Selenium IDE所无法完成的。

Selenium IDE 支持了多种程序语言格式的输出，我们只要在工具菜单的[Options > Format]子菜单中，就可以看到多种程序语言的格式。

当然这里我就选择了PHP，Selenium IDE就会自动帮我们转换为PHPUnit可以执行的Test Case代码：

然后我们把Source复制下来，新建一个空白文件中，保存为 WebTest.php：

<?php
require_once 'PHPUnit/Extensions/SeleniumTestCase.php';
class Example extends PHPUnit_Extensions_SeleniumTestCase
{
  protected function setUp()
  {
    $this->setBrowser("*chrome");
    $this->setBrowserUrl("http://change-this-to-the-site-you-are-testing/");
  }
  public function testMyTestCase()
  {
    $this->open("/login.html");
    $this->type("LoginForm_email", "test@clicki.cn");

    $this->type("LoginForm_password", "123456");

$this->click("userSubmit"); $this->waitForPageToLoad("30000"); $this->assertTrue($this->isTextPresent("邮箱不存在,请先注册.")); } } ?>

不过在生成的Script中，网址的部分似乎还有Bug，因为它不会改写为我们目前要测试的网址。所以请把：

$this->setBrowserUrl("http://change-this-to-the-site-you-are-testing/");

改为：

$this->setBrowserUrl("http://www.clicki.cn");

另外我们也可以在工具菜单上选择[文件 > Export Test Case As]来另存为其他格式的文件。

注：关于PHPUnit 整合 Selenium 的说明，可以参考 PHPUnit 官方手册的 PHPUnit and Selenium 章节。

每个Test Case都可以按照这些方式来生成可以用PHPUnit测试的PHP代码，然后将它们放在测试目录中。

不过在使用PHPUnit来执行这些Test Case时，它们要怎么启动浏览器来测试呢？这就得靠以下所要介绍的Selenium RC服务器来辅助了。

Selenium RC

在通过PHPUnit或其他xUnit来执行我们建立的Test Case测试时，必须要能够启动浏览器来测试，这个工作就要交给Selenium RC Server来帮我们代劳了。由于Selenium RC Server是用Java所开发的，
所以不限制执行的平台，只要这些平台能够启动浏览器代测试即可。

请按照以下步骤安装与执行Selenium RC Server：

1. 下载Selenium RC(selenium-remote-control-1.0.x.zip)。
2. 解压，将selenium-server-1.0.x 解压至某一目录，并改名为Selenium-server。
3. 在Windows下，将Firefox(或其他浏览器)的执行脚本所在的路径加入Path系统环境变量中。
4. 在命令行模式下执行[java -jar /path/to/selenium-server.jar]，启动Selenium RC Server。
完成后应该就会出现下图所示的结果了：

接下来重新打开一个命令行窗口，以phpunit指令来测试我们的Test Case:

注：在此之前，请先确认已经安装好PHPUnit 3，请参考PHPUnit官方手册的Installing PHPUnit章节。

在执行测试的过程中，你应该会看到Selenium RC Server自动启动了我们的Firefox浏览器，然后进行先前我们建制的测试。

如果你有注意到我们在Test Case里指定的浏览器是[ *chrome ]，但Selenium RC Server启动的却是Firefox，请别太惊讶。这是国为 [ *chrome ]在这里用来执行一个特别模式的Firefox,跟Google的Chrome无关。如果需要用Google Chrome的话，就要改用 [ *googlechrome ]。

注：由于我本身对Selenium RC也是刚刚入门，所以许多功能还在摸索中；因此如果想了解更多有关Selenium RC的特性的话，可以参考官方手册或者评论讨论。

心得与想法

以下是我在研究Selenium时的一些想法，或者从前辈那里听来的一些经验，供大家参考学习。

用设计样版建立测试

在策划初期，我们常常都会先拿到设计人员完成的HTML样版，这些样版通常已经会设定好连接或者表单显示的结果(当然是静态数据）；这么做的目的当然是为了让客户了解网站执行的流程，也可以修正是否有不顺畅的问题。

当客户确认之后，或许我们就可以利用这些样版，通过Selenium IDE来生成Test Case；这样一来就可以省下一些上线前所要花费用来测试UI的人力。

注：不过也因为有时样版做得太好，客户以为离上线时间不远，然后工程师的恶梦就开始了。而且还要小心在程序开发期间，客户突然对界面不满意的状况发生。

安排夜间测试

通常执行Selenium测试是很花时间及机器性能的，因为浏览器要不停启动、关闭、启动、关闭，这样一来就有可能耗掉程序员使用的机器开发的时间。

因此如果能将测试全部先写好，然后安排在下班后的夜间来做测试，应该会是一个比较好的解决方式。当然如果发现问题，也可以依赖Selenium RC Server的记录来检查。

当然是否要利用这样的模式来做Selenium测试，还是要看各位实际的状况与开发经验，这些想法就供大家参考。

相关参考文章