[Cucumber & Cheese 中文版]3. 初尝Watir
原著：Jeff Morgan 翻译：尔冬 校对：LisaYu
3. 初尝Watir
我们第一个脚本
就像我们在第一章看到的，Cucumber[46]使用其他Ruby gems来与我们希望测试的应用程序产生交互。一种控制浏览器并由此来测试Web应用程序的方法是使用一个叫watir-webdriver[47]的Ruby gem。这一章将会介绍watir-webdriver并提供足够经验使得我们可以测试基本的Web应用程序。
在我们开始编写脚本之前，我们需要创建一个目录来存放它们。如果你使用RubyMine[48]来创建一个新项目，可以通过选择"File"菜单中的"New Project"完成。将项目命名为"learn_watir"。如果你没有使用RubyMine，只需创建一个目录并命名为"learn_waitr"。
我们第一个示例脚本会很简单。它将要测试的是打开一个浏览器并访问Apple网站。在learn_watir目录中创建一个名为"first_script.rb"的新文件。
这是Ruby的一个标准，创建文件使用小写字母并用下划线分隔。
如果你使用的是RubyMine，那么可以右键点击learn_watir项目名并选择"New - File"，将文件命名为"first_script.rb"。当你的脚本创建完成后，你可以在文件中添加以下几行：
require 'rubygems' require 'watir-webdriver' browser = Watir::Browser.new:firefox browser.goto 'http://www.apple.com'
脚本的前两行通知Ruby加载需要的库以使得脚本可以运行。第一行载入了rubygems库，它提供对gem的加载能力。第二行则是明确加载了waitr-webdriver gem。
在Ruby里，gem[49]只不过是你可以使用的第三方库。而Ruby的gem系统实际还不止如此。它是一个明确依赖的gem包管理器。当你使用"gem install"命令来安装一个gem时，它会连接网络上的一个服务器并请求gem的信息。服务器会通知工具所有需要的依赖以便能够安装和使用gem。下一步则由Ruby gem工具安装所有本地计算机没有安装过的依赖。最终结果是gem和它的所有依赖均被安装，并且已准备就绪。
第三行开始变得有趣。在这一行我们为Firefox[50]创建了一个新的Watir Browser对象并命名为browser。这个模式在我们的脚本中将会很常见。当我们创建一个新的browser对象时，在我们的计算机上也会打开一个真实的浏览器应用，并赋值给Watir Browser对象，因此我们可以控制浏览器应用程序。
你可能已经注意到了脚本第三行我们调用Waitr::Browser.new来创建一个自己的browser对象。Watir::准确来说是什么？我们把它叫做命名空间。它可以让我们组织类来防止命名冲突。举个例子，也许还有其他gem想要拥有一个名字为Browser的类。那我们如何分隔它们？命名空间就是帮我们处理这件事的。当我们请求Watir::Browser.new时意味着我们说的是“在Waitr命名空间里查找一个名字为Browser的类并为我创建一个实例”。
脚本的最后一行我们通知真实的浏览器通过我们的browser对象在Apple网站进行网上冲浪。我们通过向browser对象发送一条消息的方式来实现。这条消息就是goto。就像你可能会想像到的，该行的其余部分是随着消息告知浏览器该到达哪个URL。
脚本将使用Firefox浏览器。如果你想看到在其他浏览器上运作，只要移步到下一个脚本就能得到满足。如果你正在使用RubyMine你可以在文件上右键点击并选择位于接近菜单底部的"Run 'first_script'"选项。如果你正在使用命令行，你可以执行以下命令：
ruby first_script.rb
你应该会看到Firefox浏览器启动并转到Apple网站。我们刚刚已经创建好了我们的第一个脚本。
让我们对这个脚本作出一点轻微的修改。以下脚本将在Internet Explorer中运行相同的测试。我们只要简单把":firefox"替换成":ie"即可。
require 'rubygems' require 'watir-webdriver' browser = Watir::Browser.new:ie browser.goto 'http://www.apple.com'
我们可以做一个额外的小修改以便在Chrome[51]上运行相同的脚本。你也许猜到了我们可以将":firefox"改为":chrome"。为了可以使用chrome驱动，你需要下载ChromeDriver二进制文件，你可以在这里[52]找到。只要把它放在你的PATH中，就可以运行这个脚本了。
require 'rubygems' require 'watir-webdriver' browser = Watir::Browser.new:chrome browser.goto 'http://www.apple.com'
你将会注意到我们仅仅做出一个修改就可以让我们的脚本在完全不同的浏览器中运行。这是watir-webdriver威力的一部分。当你编写一个工作在Firefox上的脚本时，它将同样可以工作在Internet Explorer上，并且脚本也很容易就能在其他几个浏览器上运行。
我们的测试应用程序
在这章中我们将使用一个简单的小狗收养应用用以演示（尽管如此，让我们面对现实吧，谁不喜欢收养小狗呢）。你可以在http://puppies.herokuapp.com找到该应用。当你访问这个URL时，你将在应用首页看到以下的小狗列表：
![[Cucumber & Cheese 中文版]3. 初尝Watir_第1张图片](http://img.e-com-net.com/image/info3/734a17d9ce8243cf98529f03e1c4b10c.jpg "pic.png")
继续前进并花时间探索小狗应用。收养一只虚拟的小狗并结帐。
和小狗们一起开始吧
现在是时候为小狗应用编写我们的第一个脚本了。这个脚本与我们写过的第一个脚本惊人地相似。如果你已经打开了前一个脚本，那么继续并关闭它，试着凭记忆完成这个练习。如果你不确定要做什么，请参考"Watir-Webdriver快速参考"附录。以下清单细化了你的脚本必须完成的步骤。
打开浏览器
访问小狗收养站点
等待5秒
关闭浏览器
等待5秒可以通过以下调用完成：
sleep 5
当你把脚本准备好了，继续并运行它。这个脚本此时做的事情并不很多，但是我觉得我们很快就会改变它。但你首先需要学习如何与Web页面上的HTML元素一起工作。
在页面上查找HTML元素并与之交互
你很可能已经知道，HTML页面由HTML元素组成。我们会涵盖几种与HTML页面交互的方式，但首先让我们学习一个强大且简单的技巧，这个技巧用于查找和交互页面的最小组成部分--HTML元素。打开你的浏览器并到达小狗应用。收养一只小狗，然后进入结算页面（通过点击"Complete the Adoption"按钮）。当你位于结算页面时启动你正使用的浏览器的开发者工具（如果你用的是Firefox，这个工具就是Firebug）。在Firefox里你将需要安装Firebug插件[53]。如果你正在使用尚未安装开发工具栏的Internet Explorer的某个版本，你可以从http://www.microsoft.com/en-us/download/details.aspx?id=18359下载。如果你正在使用的Firefox或Internet Explorer已安装合适的工具，你只要简单按下F12按键来启动开发者工具即可。当工具运行时你可以按下"select element"按钮。
![[Cucumber & Cheese 中文版]3. 初尝Watir_第2张图片](http://img.e-com-net.com/image/info3/6ba6d2c15b5e4a0c8f38943403fe0047.jpg "pic.png")
现在在结算页面四处移动你的指针。你应该会看到当你的鼠标悬停在HTML元素上方时周围有一个蓝色的方框。选择"Place Order"按钮。你将可以看到元素的详细信息。在Firefox中使用Firebug时你可以看到以下内容：
![[Cucumber & Cheese 中文版]3. 初尝Watir_第3张图片](http://img.e-com-net.com/image/info3/f98603b9809d409c876397996000fe44.jpg "pic.png")
Watir-webdriver拥有一个清晰一致的方式来定位HTML元素。为了达到我们的目标我们将经常使用以下三个步骤的模式。想像一下我们正在小狗应用的结算页面。为了按下"Place Order"按钮我们会输入以下内容：
browser.button(:value => 'Place Order').click
让我们分解一下这里发生了什么。首先我们必须发送一条消息给browser对象，告诉它我们希望交互的元素是什么类型的。Watir-webdriver包含了大部分你将会在一个典型Web页面上找到的项的方法。在这个例子里我们调用了button方法。
现在我们已经表明想要交互的元素的分类（button），我们需要指定如何在页面上找到它。我们通过识别元素特性来找到我们尝试使用的元素。waitr-webdriver支持多种特性--属性值来查找元素在文档对象模型[54]（或其它地方）中的位置。
在这个例子中我们想找到一个value[55]为"Place Order"的按钮。当我们选中按钮时我们从开发者工具获得信息。对于按钮，value就是显示在按钮上的文本。如果有大于一个的元素匹配这个特性，watir-webdriver将默认返回第一个。要选中页面上标签为"Search"的第二个按钮我们可以使用"button(:value=>'Search', :index=>1)"。我们指定1而不是2的原因是在Ruby中所有的索引是以0为基础的[56]。这意味着第一个元素可以在位置0被找到，第二个在位置1，以此类推。
最后我们需要对我们已经定位到的元素做些什么。在这里我们给按钮发送了click消息。
收养一只小狗
让我们继续并修改之前的脚本来完成一只小狗的收养。这意味着你将查看小狗的详细信息，选择"Adopt Me"按钮，选择"Complete the Adoption"按钮，而后在结算页面填写信息。再次的，使用浏览器开发者工具来识别你想要交互的元素，通过书后的Waitr-Webdriver快速参考来学习如何进行。试着在不查看下面脚本的情况下完成这个脚本。
完成的脚本
这个是一个使用Firefox的完成例子。
require 'rubygems'
require 'watir-webdriver'
browser = Watir::Browser.new:firefox
browser.goto 'http://puppies.herokuapp.com'
browser.button(:value => 'View Details').click
browser.button(:value => 'Adopt Me!').click
browser.button(:value => 'Complete the Adoption').click
browser.text_field(:id => 'order_name').set('Cheezy')
browser.text_field(:id => 'order_address').set('123 main St.')
browser.text_field(:id => 'order_email').set('[email protected]')
browser.select_list(:id => 'order_pay_type').select('Check')
browser.button(:value => 'Place Order').click
前三行为我们使用了Firefox。这个你应该看起来很熟悉，我们已经见过几次了。你已经知道如何改变第三行来使用你自己选择的浏览器。
之后，我们到达小狗网站并点击"View Details"按钮。任何时候我们用value或text定位项，它都是区分大小写的。换句话说如果我们使用":value=>'view details'"我们将不能找到按钮。因为我们没有指定额外的参数，watir-webdriver将选中第一个在页面上找到的指定value的按钮。如果我们想要选择一个特定的小狗元素我们可以指定更多参数。后面我们将看到如何来做。后续两行点击另外的按钮以在网站中航行。最后我们来到结算页面。
脚本的剩余部分填写和提交订购表单。在选择列表中选择一个元素，它仍然是大小写敏感的。我们必须精确匹配表项。
运行脚本。你应该会看到信息"Thank you for adopting a puppy!"。
未完待续.....
备注：
[46] http://cukes.info
[47] https://github.com/watir/watir-webdriver
[48] http://www.jetbrains.com/ruby/
[49] http://en.wikipedia.org/wiki/RubyGems
[50] http://www.mozilla.org/en-US/firefox/new/
[51] https://www.google.com/intl/en/chrome/browser/
[52] http://code.google.com/p/chromium/downloads/list
[53] https://addons.mozilla.org/en-us/firefox/addon/firebug/
[54] http://en.wikipedia.org/wiki/Document_Object_Model
[55] http://www.w3school.com.cn/tags/att_input_value.asp
[56] http://en.wikipedia.org/wiki/Zero-based_numbering