利用 iMacros 的浏览器附加组件来提高工作效率
介绍 iMacros 这个强大的工具，使用简单的范例演示了如何使用这个工具来完成对于网页的操作，对于大量的具有重复性的工作内容尤其可以提高效率。对于测试人员或开发人员，这个工具也可以帮助管理 Test Case，与数据流结合来高效率的完成关于各种业务系统的测试。
不管在哪一个行业，测试已经成为制造，开发流程中，一个必要的环节。特别是指软件行业。 近年来由于 Web Application 的开发，是市场上热门的显学，虽然不到汉武帝“独尊儒术”的一统天下，但是根据有效的问卷调查，Web 工程师的人数是最多的。 这么多的人才，每天花了这么多时间在工作上，累积的成果是惊人的，各种工具也跟着蓬勃发展。Web 自动测试，如今已经不是任何新鲜的话题，现今，很多成熟的工具我们可以随手使用，比起多年前，现在的 Web 工程师，效率应该是远远胜于以往。
这里介绍的 iMacros 是一个浏览器的附加组件，经过长时间的发展，已经被无数人验证过是个非常强大的工具。iMacros正如其名，这个工具主要是借由编辑宏（Macros)来操控浏览器，来实现以往需要使用鼠标键盘的人手操作。
iMacros 简介
iMacros 主要用来操作运行 Web Browser，对于主要的 Web Browser：IE、Chrome、Firefox 都有支持。这篇文章主要使用 FireFox 为例子来做说明。
iMacros 经过了多年的发展。功能越来越先进。但是有一点或许大家可以先记住，就是这个工具的角色定位，并不是一个 Almighty-全能的工具，乃是专注与它一开始的角色设定-用来操作浏览器。如此一来，在判断这个工具能做到什么，和不能做到什么的时候，即使不看说明书，都可以做出一个大概的判断。
与 iMacros 具有类似功能的插件或是程序库，按照各种不同的需求，目前已经有很多成熟的解决方案。个人觉得依赖于既有浏览器来实现的方式是最轻省的，可以说是站在巨人的肩膀上，因为省去开发浏览器的环节，大大的减低开发的难度与代码量，也提高应用的便利性。
如果不依赖浏览器的话就必须要程序去实现浏览器的功能了。举出几个例子，比方说是 Perl 里面的 LWP（Library for WWW in Perl）或是 Java 里面的 httpclient 等等。请参见参考资源部分。
接下来我们就开始来说明如何使用这个小而强大的工具 iMacros。
下载
最新版本的 iMacros 附加组件，可以在参考资源部分找到下载地址。
打开后的画面如下，点击 Add to Firefox 后，就可以完成安装。
图 1. 下载的画面
安装
和其他 Firefox 的 Add-on 是一样的安装方式，点击了后，会出现下面的画面。
图 2. 安装的画面
安装后重新启动，就可以就完成了。
图 3. 重新启动 FireFox
界面介绍
安装之后会出现如下的界面。因为以 Firefox 为假定的平台，以下的说明，也以 Firefox 为例子。在其他的浏览器里面，也是具备了类似的界面及功能，在这里就不截屏了。在这里对经常使用的功能做介绍。
图 4. 界面的配件介绍
表 1. 主要 UI 配件的说明
| 编号 | 说明 |
|---|---|
| 1 | 在附加组件栏的简易的启动按钮（不一定排列在这个位置），按下后可以切换菜单会在左边出现/消失， |
| 2 |
这里的#Current.iim 是个保留字，代表当前的脚本。iim 是脚本档案的附档名。 当前脚本的意思，就是说每当我们录制新的脚本的时候，录制的内容都会被保存在这里，每次按下录制的按钮后，会先清空这个档案里的内容， 然后记录当前正在录制的内容。 如果想要保存录制完成的内容，必须将这个当前脚本，另存为其他名称 |
| 3 |
这里的 3 个 Tab 分别整理了 3 个大类的功能。 Play：播放脚本，已经播放时候的细节。 Rec：录制的细节。功能的核心所在。 Edit： 对脚本进行编辑，脚本的保存位置等等。 |
| 4 | 工具的设定，档案的保存位置，编辑器，及其他细节。iMacros提供了很多选项让使用者根据需求进行设置。 |
用途
这个插件的用途，很容易想象，只要是需要使用浏览器，又想要自动操作的，都可以使用这个插件来方便工作。 笔者比较经常用的，大体上可以分为２类，分别是用来进行自动测试，以及简便日常作业的处理，增加工作效率。以前在客户的现场，工作以开发，测试为重心的时候，经常利用 iMacros 来进行自动测试， 现在由于所属的部门以项目管理的工作偏重，而管理系统刚刚好是在内网上的一个 Web 系统，所以对 iMacros的利用，都是在简化繁琐的日常作业。
自动测试
对于一个开发 Web application 程序员来说，用来做各种业务场景测试应该是一个很好的工具。对于各种 Test Case 的管理也属于比较清晰的， 在进行各种维护开发，版本升级的时候，除了对修改过的代码进行 UT 测试之外，为了保证整个业务流程不会因为这样的修改而产生什么预料之外的问题， 利用这个工具来做对业务流程的测试，将会很有效率。
举个例子，比方说是用户注册，登录功能，不管后台用的是什么语言，前台有没有使用 Ajax，对于使用者来说都是填写几个栏位后进行提交， 然后可能会有个邮件通知，完成了注册后，就可以使用取得的 ID 和密码来进行接下来的登录。 这时，如果要填写的栏位很多，每次修改一次程序，都需要新建用户来进行一次测试。只要安排这样的一个脚本， 就可以每次在调试的时候运行一次就可以了。可以说是相当的简便。
- 脚本的编辑管理
脚本的编辑管理的方便性，可以令测试的场景设计变得很容易。
图 5. 脚本一览窗口
管理是使用目录的形式，可以一目了然的进行分类。另外对于每个 iim 档案的命名，也可以稍微下点功夫，定义自己的命名规则，将会大大的提升效率。
另外就是在运行上的各种可以微调的部分，除了透过界面的运行、暂停、停止、Loop 次数的设定之外，借由对脚本的撰写， 还可以进一步对于响应时间的测量，每一个 Click 之间设定停止时间等等进行详细控制。
记得以前在开发银行的业务系统的时候，经常因为银行，会计法规的变动，使得银行系统是必须要经常做更新维护的。
按照每个业务流程，来设计测试的脚本，然后在系统更新的时候利用这写脚本来验证改动所造成的影响。提高了效率，也增添了客户对我们团队的信赖感。 - Data Driven Test 的支持
Data Driven Test 按照字面的意思，就是以数据来驱动测试。从另外一个观点来看，设计系统的目的最终还是要操作数据。 而数据被持久（persistent）的透过数据库来保存。 在对网页上的表单进行输入的时候，输入的内容在经过了业务流程后通常会有各种的变化，在设计测试场景的时候，我们也可以利用这个工具来协助。 在这里，iMacros 提供了读取 CSV 档案，已经透过接口连接各类型数据库，还有就是在各种 Script 语言里面调用 iMacros 的功能。 另外就是在编制 iMacros 脚本的时候，也可以使用一些变量来对数据进行传递与控制。 不过根据笔者个人的经验，利用一些模板引擎（比方说 Java 的 Velocity）来读取数据库，然后动态的产生 iMacros 脚本，也是一种很便捷的方法， 入门的门槛也比较低，因为不需要熟悉很多 iMacros 脚本的语法，变量也不需要在iMacros脚本里面进行控制。
- 测试结果的保持
iMacros 脚本允许我们保存画面截屏（可以选择各种常用的格式）和保存画面 HTML 等的方式来对每个画面进行保存。 之前在银行的项目里，操作过程的画面，特别是有计算结果显示的画面，是需要在每个流程完成时，当做是产品之一交付给客户的， 利用这个功能就相当的便利。在保存图片或页面的时候，命名的规则也可以在脚本里面进行设定，比方说以时间命名，以画面名称命名，或是综合命名等等。
日常作业的简便化
基本上还是利用到在做自动测试时候同样的功能。 日常的作业依照业务不同可以说是很难做出分类，下列举出几个例子，在笔者的日常工作中经常的会使用。
表 2. 日常生活中的运用举例
| 场景 | 细节 |
|---|---|
| 每个月的订单发出 | 在 Excel 里面先整理好订单的数据，然后利用 VBA 来产生执行脚本，利用 iMacros 将这些数据在系统的下单页面中提交， 除了保证了数字不会因为人工填写出现失误，速度也非常的快。 |
| 下载页面 | 笔者经常操作的系统里面，经常需要把几个内网的页面内容保存下来，发给供应商，下载保存页面也可以利用 iMacros 的脚本来帮忙执行。可以大大的提升效率。 |
| 填写表单 | 笔者经常访问一些需要输入检索条件，来过滤信息的网站，以为检索条件无法被保存，导致每次访问是都需要从新输入。利用iMacros脚本，这样的问题就解决了。 |
| 记忆操作路径 | 同事有时候会问，这个系统如何操作的时候，就可以录制一段 iMacros 脚本，发给同事，同事执行后就能一目了然。 |
简介 iMacros 脚本
在录制脚本前，为了演示的方便，笔者准备了一个简单的表单界面，这个表单具有下列几个元素。这个表单列出了经常我们会使用的控件，接下来的内容，都会围绕这个例子为中心展开。
图 6. 示例用简单网站的画面
录制脚本
打开测试网站的页面，按下如下发的记录按钮，记录的内容会在上方的视窗中同步显现，而这个视窗的内容，被保存在#Current.iim里面。
图 7. 记录使用者操作过程的画面
依次进行操作后，在画面里输入如下的内容。在 Add 之前，按下 Take Screenshot 按钮，然后点击页面上的 Add，下个页面点击 Confirm。
图 8. 操作过程中进行画面截屏的脚本设定
点击了示例网站中的 Confirm 按钮后画面如下，然后在点击控制菜单中的“停止”来完成脚本的录制。
图 9. 按下停止完成脚本的录制
储存脚本
录制完成后，脚本被记录在#Current.iim这个档案中，如果对录制结果满意，我们可以对脚本进行别名储存，以免下次录制时候被覆盖。 按下储存按键
图 10. 另存当前脚本
然后输入档案名，保存位置（在预设位置即可）
图 11. 输入新档名进行保存
按下确定后，会发现上面的视窗里出现保存后的新档案了。
图 12. 储存后新的脚本在一览窗口里显示
播放脚本
接下来我们要对脚本进行播放。 选择 演示用.iim，然后点击运行 Tab 的"运行"按钮，或是直接双击演示用.iim 都可以运行该脚本。
图 13. 运行刚刚录制完成的脚本
运行的画面过于动态，因此就不在这里截屏表示了，运行之后的结果如下所示。因为操作过程完全一样，所有结果就是多了一条一模一样的数据。
图 14. 运行完成后的结果
iMacros 的脚本语言介绍
接下来我们点击演示用.iim ，然后在编辑 Tab 里面选择"编集宏"，(或是使用文本编辑器，在保存 演示用.iim 档案的位置直接打开该档案也 OK)， 来看看iMacros为我们录制了什么内容。
图 15. 编辑刚刚录制完成的脚本
这里为了方便讲解，对图片进行了个结合处理，左边是录制的脚本，右边是我们在页面上输入的内容。
图 16. iMacros 所录制的内容
这里的 1 到 15 行，根据 8020 法则，或许包含了 80%在日常工作中，最常被使用的机能。下面各行的内容进行简要的说明。
- 访问页面第三行的
URL GOTO=http://localhost/sample/tblmember_shiplist.php代表到达这个页面。如果说目的地页面在执行脚本前已经到达，比方说是直接在地址栏里输入，或是借由保存的 Bookmark，那这一行可以删去。 通常的情况下，如果说要抵达预备执行 iMacros 的预定页面是需要经过一段操作步骤（比方说用户登录后才能进行的一些操作，必须在 Session 里面先准备好一些数据）， 那就无法透过直接指定链接地址来直接访问，可以先手动操作到目的地的页面，然后在执行脚本. URL 这个命令的细节可以在下列链接得到参照:参见参考资源部分。 - 点击链接第四行的
TAG POS=1 TYPE=A ATTR=TXT:Add代表点击下方这个链接时候所产生的动作：
图 17. Add 在画面上的位置
图 17 所表示链接的 HTML 源代码
<a href="tblmember_shipadd.php">Add</a>
TAG 是个 iMacros 脚本里面的命令。这个命令的作用是在选择当前 HTML 页面里面的元素（Element），至于要选择什么元素，需要在其后方指定参数来标明。 后面的参数用来标记出 HTML 元素所具备的不同属性来定义每个元素的位置，就好像家里的地址一样，
比方说是上海市长宁区。。这里的市和区就是属性，而且具有从上到下，将范围一步步缩小的特征。 详细的说明请参考下方表格
属性 说明 POS 如果有 2 个以上的元素共用完全相同的属性（比方说同一个小区的同一栋楼），这个 POS 的参数可以借由不同位置来帮助明确定位（也就是说同一栋楼里的第几楼）。在这里因为只有一个元素，所以参数值是 1。 TYPE 这个参数用来标明所要定位的这个 HTML Tag 是什么类型。在 HTML 源代码里面可以看出，这个 HTML Tag 的类型是个 A Tag(A 代表 anchor 的简写），所有这里 TYPE 后面的参数值就是 A。
关于 A Tag 更多的说明，可以参考详细说明：参见参考资源部分。ATTR 这个参数用来标明所要定位的这个 HTML Tag 具有什么样的属性。因为是参照到该对应的 HTMLTag 所具备的属性，因此可以指定的项目是很多的，在 HTML 源码里面可以看出具有 href="tblmember_shipadd.php" 的属性，作为另外一种选择，这里的 Tag 属性也可以标记为 ATTR=HREF：tblmember_shipadd.php TXT 这个参数用来标记被 Tag 所包围的文字部分。由 HTML 源码可以看到在 Tag 之间包裹着 Add 这个文字。 - 表单输入
接下来的从脚本的第 5 行到第 12 行的作用，是用来填写表单
图 18. 录制脚本中和表单输入相关的部分
这里的脚本里面包含了更多的定位信息，和之前所说明过的内容一样，都是为了要正确的标记所要操作的 HTML 元素所在的位置而有的内容。可以说是和 HTML 源码里头的每个类型，属性是交互参照的。 这里比较需要注意的是 CONTENT 这个参数，代表着表单要输入的内容，在做更多弹性的运用的时候，我们可能会需要去编辑这一个参数， 其余的部分都可以透过录制而自动完成，基本上修改的机会不大。
另外就是 FORM 的这个参数，因为所有的表单原件都是被包裹在 FORM 里头的，所以在脚本里的几乎每一行都可以看到 FORM=NAME：的标记，标明这个原件是属于哪个表单的。属性 说明 CONTENT - 1：
在文字的输入框的情况，可以看脚本里面的第 5，8，12 行。在第 5 行和第 12 行可以看见，在文本输入里经常会用到的空格和换行，在脚本里，替代的用<SP>来表示半角空格，及<BR>来表示换行符号 - 2：
在 RadioBox 的情况，可以看脚本里面的第 6 行，相应的 HTML 的源代码节录如下
<input type="radio" name="x_gender" id="x_gender" value="{value}">
<input type="radio" name="x_gender" id="x_gender" value="1">男
<input type="radio" name="x_gender" id="x_gender" value="2">女
在这一行里面看不见 CONTENT，因为是使用 POS 来做定位。 - 3：
在下拉框的情况下，可以看脚本里面的第 7 行，相应的 HTML 的源代码节录如下
<select id="x_area" name="x_area">
<option value="" selected="selected">Please Select</option>
<option value="1">黄浦区</option>
<option value="2">普陀区</option>
这里选择的是普陀区，因此在 CONTENT 里使用%2 来做定位。 - 4：
在多选框的情况下，可以看脚本里面的第 9 行，相应的 HTML 的源代码节录如下
<select id="x_habbits[]" name="x_habbits[]" multiple="multiple">
<option value="1">读书</option>
<option value="2">看电影</option> 这也是属于 HTML 的 Select 标签，因此可以发现脚本的第 7 行和第 9 行使用类似的定位方式。 - 5：
在 Checkbox 的情况下，可以看脚本里面的第 10.11 行，相应的 HTML 的源代码节录如下
<input type="checkbox" name="x_media[]" id="x_media[]" value="{value}">
<input type="checkbox" name="x_media[]" id="x_media[]" value="1">电视
<input type="checkbox" name="x_media[]" id="x_media[]" value="2">报纸
在录制的脚本里面使用了 POS 之外，和 RadioBox 不同，还加上了 CONTENT=YES，这是因为点击了 Checkbox 的时候，有 2 种可能性，一种是勾选，在点一下代表取消勾选。和 RadioBox 的动作有所区别所造成的。
FORM 在演示用的 HTML 的源代码是 <form name="ftblmember_shipadd" id="ftblmember_shipadd" action="tblmember_shipadd.php" method="post"
而在脚本里面也相应的使用了 FORM=NAME:ftblmember_shipadd 来标记这个 Form 的位置。 - 1：
- 保存图片
接下来是脚本的第 13 行。
SAVEAS TYPE=PNG FOLDER=* FILE=*这一行脚本的目的是保存荧幕截屏。这里使用了 SAVEAS 这一个脚本命令。这个命令有下列的属性参数。
属性 说明 TYPE 这里表示要保存的副档名。在保存荧幕截屏的情况下，可以指定的副档名有 BMP，PNG，JPEG 三种。除了保存截屏，也可以保存这个画面。细节可以参见参考资源部分 FOLDER 保存的档案位置。可以指定详细路径，但是空格的部分要用<SP>来代替。如果不指定，也就是使用像第 13 行一样的写法，则保存到预设路径。 FILE 保存的档名。如果使用像第 13 行一样的写法，代表的以当前的档名（副档名为 TYPE 所已经指定）。
可以使用+来 append 更多的信息，比方说，下列的写法就可为档案的命名加上时间信息：
FILE=+{{!NOW:ddmmyyyy}}上面所说的预设目录，是在下列图 19这个位置所进行的设定。
图 19. iMacros 中保存路径的设定
在示例里面的图片被保存到了这个位置，以当前的档名保存
图 20. 在录制过程中被保存的截屏档案
- 提交表单
在脚本的第 14,15 行对表单进行了 Submit 动作，基本上和前面所讲解的一样，利用 TAG 命令定位 Submit 按钮的位置，然后在运行脚本的时候， iMacros就会自动的去做出 Submit 的动作了。
录制完成后的再编辑
以上介绍完成了如何基本的使用 iMacros。但是光是如此，iMacros 对我们的功用还是不是很大。
接下来，继续我们以上的范例，想要展开一个如何使用 Excel 管理使用者的资料，然后将这些资料输入到系统的方法。
- 数据的整理
这里我们打算利用 Excel 来整理需要输入的数据。为了简化说明及代码的复杂性，这里只把姓名和地址这 2 个文字输入框当做是可以变动的数据。
场景： 客户给了我们一下的数据，希望我们代为输入到业务系统之中：（空格已经被预先用<SP>取代）图 21. 在 Excel 中预先准备的输入数据
- 与模板引擎的结合
这里的模板引擎，可以有很多各种不同的选择，比方说 Java 的 Velocity，就是一种很强大也很方便的模板引擎。 使用模板引擎的目的，是为了将数据透过模板后输出，在这里也就是输出成 iim 档案，以供执行的时候使用。 这里为了简化说明，还是使用 EXCEL，打算写一个 VBA 来将 Excel 的数据输出成为脚本。
因为这次的范例具有需要输入中文的部分，所以在写作过程中遇到了编码的问题。简而言之，iMacros 脚本支持的是 UTF8 的编码，但是 VBA 的 print 方法所输出的是 GB2312 的编码， 如此一来，会造成 iMacros 无法识别脚本内容的问题，为了解决这个问题，要引用 Microsoft ActiveX Data Objects 2.8 Library 这个程式库，然后不使用 print 的方法，改用 ADODB.Stream 来做中文字的输出。 完成后的 VBA 如下：
图 22. 产生脚本用的 VBA 程序
- 生成 iim 档案，并在 iMacros 里面运行
运行上述的 VBA 后，演示用_VBA 生成.iim 这个档案应该就会出现在指定的目录之下了。
这时可以打开 iMacros 的控制面板，在下列的位置刷新列表。图 23. 刷新宏列表
刷新后，生成的新档案会在列表中出现，点击编辑宏，可以看到生成的内容。
图 24. 打开由 VBA 生成的脚本
图 25. VBA 所生成的内容
接下来就在列表中双击这个演示用_VBA 生成.iim ，接下来就看 iMacros 表演了。执行后的画面如下，供参考。
图 26. 执行脚本后的画面
而保存的画面截屏，在系统预设的目录里面，如下图
图 27. 执行过程中保存的截屏
日常作业的简便化
经由以上的演示，应该可以了解，这个工具节省了我们大量的时间，只要将脚本准备好，让它被执行，过了一点时间后，就可以收获成果了。
唯一的问题就是如何准备脚本，还是需要不断的尝试错误，累积经验后，才能成为这件工作的专家。
iMacros 的网站提供很清晰的索引，还有相关的范例。如果想要实现某项功能，又不知道该如何的时候，通常在上面都可以找到相关的答案。
一些提高工作效率的技巧
为了提高生产效率，这个工具也开放了接口，可以跟一些热门的脚本语言结合。具体细节请参见参考资源部分。
[原链接]http://www.ibm.com/developerworks/cn/web/1310_linlg_imacro/
添加这个组件玩了一下，其实就和seleniumIDE功能类似