使用 iMacros 来自动化日常的工作
不管在哪一個行業，測試已經成為制造，開發流程中，一個必要的環節。特別是指軟件行業。 近年來由于 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 配件的說明
| 在附加組件欄的簡易的啟動按鈕（不一定排列在這個位置），按下后可以切換菜單會在左邊出現/消失， |
| 這里的#Current.iim?是個保留字，代表當前的腳本。iim?是腳本檔案的附檔名。 當前腳本的意思，就是說每當我們錄制新的腳本的時候，錄制的內容都會被保存在這里，每次按下錄制的按鈕后，會先清空這個檔案里的內容， 然后記錄當前正在錄制的內容。 如果想要保存錄制完成的內容，必須將這個當前腳本，另存為其他名稱 |
| 這里的 3 個 Tab 分別整理了 3 個大類的功能。 Play：播放腳本，已經播放時候的細節。 Rec：錄制的細節。功能的核心所在。 Edit： 對腳本進行編輯，腳本的保存位置等等。 |
| 工具的設定，檔案的保存位置，編輯器，及其他細節。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 的網站提供很清晰的索引，還有相關的范例。如果想要實現某項功能，又不知道該如何的時候，通常在上面都可以找到相關的答案。
一些提高工作效率的技巧
為了提高生產效率，這個工具也開放了接口，可以跟一些熱門的腳本語言結合。具體細節請參見參考資源部分。
參考資料
學習
- “HttpClient 入門” 介紹了 HttpClient 這個可以支持 HTTP 協議的客戶端編程工具包(JAVA 用）。
- “perl LWP 學習筆記” 介紹了 LWP 這個可以支持 HTTP 協議的客戶端編程工具包（Perl 用）。
- “iMacros 腳本語言中 URL 命令細節” 關于 URL 命令的詳細介紹，包括使用范例。
- “HTML a tag” 關于 A Tag 的所有細節。
- “iMacros 腳本語言中 SAVEAS 命令細節” 關于 SAVEAS 命令的詳細介紹，包括使用范例。
- “iMacros 腳本語言與其他編程語言的相互協作” 包括各種熱門語言 Java,Perl,PHP 與 iMacros 交互時的參考代碼。
- developerWorks Web development 專區：通過專門關于 Web 技術的文章和教程，擴展您在網站開發方面的技能。
- developerWorks Ajax 資源中心：這是有關 Ajax 編程模型信息的一站式中心，包括很多文檔、教程、論壇、blog、wiki 和新聞。任何 Ajax 的新信息都能在這里找到。
- developerWorks Web 2.0 資源中心，這是有關 Web 2.0 相關信息的一站式中心，包括大量 Web 2.0 技術文章、教程、下載和相關技術資源。您還可以通過?Web 2.0 新手入門?欄目，迅速了解 Web 2.0 的相關概念。
- 查看?HTML5 專題，了解更多和 HTML5 相關的知識和動向。
獲得產品和技術
- 下載?Firefox 版本的 iMacros 附加組件。
總結
以上是生活随笔為你收集整理的使用 iMacros 来自动化日常的工作的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python项目案例开发pdf-Pyth
- 下一篇： Swift 在淘宝商品评价的技术重构与实