2.3 Selenium IDE

正如2.2節中介紹的，Selenium IDE是一個Firefox瀏覽器的附加組件，不是一個獨立的工具。它安裝簡單且易學，可以將Web頁面上的操作錄制下來，轉換為腳本文件，是Selenium家族中最容易上手的工具。本節先詳細介紹Selenium IDE的功能，再結合場景演練展示Selenium IDE的實踐過程。

2.3.1 安裝Selenium IDE

筆者編寫本章時，Selenium IDE的最新版本為2.9.1，支持Firefox 17.0及以上版本。

打開Firefox瀏覽器，前往https://addons.mozilla.org/en-US/firefox/addon/selenium-ide/下載IDE插件。如圖2-2所示，單擊Add to Firefox，進入安裝頁面后，單擊“安裝”即可。

圖2-2 在FireFox中安裝Selenium IDE

安裝完成后，在Firefox的“工具”菜單中可看到Selenium IDE選項，到此安裝完畢，如圖2-3所示。

圖2-3 Selenium IDE出現在工具菜單欄

2.3.2 Selenium IDE的使用

打開Selenium IDE，其界面如圖2-4所示。

圖2-4 Selenium IDE界面

● Base URL

指目標測試站點的根路徑，腳本運行時會默認打開這個地址。該站點下的頁面可以在此URL基礎上使用相對URL。比如，我們要測試的Web站點是https://www.pingxx.com，待測試頁面的完整URL是https://www.pingxx.com/products、https://www.pingxx.com/customers之類，可以將Base URL寫為https://www.pingxx.com，如圖2-5所示。若要測試其他頁面，則可以在測試腳本中使用2.3.3小節Selenese中介紹的open命令，打開/products、/customers等頁面。

圖2-5 Base URL

● Tool Bar

?控制回放速度，即控制每個Command之間執行的時間間隔。

?回放Test Suite，即執行Test Case Pane中顯示的所有Test Case。

?回放選中的Test Case。

?暫停/繼續

?暫停后按步執行，用于對錄制腳本進行調試。

?添加Rollup，將在2.3.3小節中對Rollup的用法進行詳細介紹。

?收藏的Test Suite，單擊菜單欄中的Favorites→Add favorite收藏，前提是該Test Suite已經保存了。

?開始/停止錄制。

?制定執行計劃，支持腳本定時運行，如圖2-6所示。

圖2-6 腳本定時計劃

● Test Case Pane

當前Test Suite中的Test Case列表。運行之后，綠色表示通過，紅色表示失敗。

如圖2-7所示，執行結果表明：執行了兩個Test Case，其中一個失敗了。

圖2-7 Test Case Pane（測試范例面板）

● Editor Pane

Editor Pane用于顯示界面操作，也就是我們在測試過程中需要對頁面上的元素執行操作。當Selenium IDE處于錄制狀態時，我們在瀏覽器上的操作將被記錄到這里。

如圖2-8所示，Editor Pane分為Table和Source兩種視圖。

圖2-8 Editor Pane（編輯面板）

默認顯示Table視圖。其中，分為三大元素。

● Command：操作命令，如open、click、type，會在2.3.3小節Selenese中進行詳細說明。

● Target：操作目標。根據操作命令不同，操作目標的類型也不盡相同。它可能是某個元素的屬性值，也有可能是一個表達式。

● Value：操作值，如圖2-8中在文本框輸入的用戶名、密碼，若要更新Table視圖中的內容，選中一行后即可編輯。

● Select按鈕：單擊Select，再將鼠標移至瀏覽器頁面，鼠標劃過的元素會高亮顯示，單擊即可修改Target為該目標。

● Find按鈕：選中Table視圖中的一行，單擊Find，頁面中該對象將高亮顯示。

● Source視圖：顧名思義，即顯示Table視圖相應的源碼。如圖2-9所示，Source視圖默認為HTML代碼。

圖2-9 Editor Pane的Source視圖

Source視圖還支持其他語言的轉換，但是并不提倡這種做法，進入Options→Format中的鏈接（http://blog.reallysimplethoughts.com/2011/06/10/does-selenium-ide-v1-0-11-support-changing-formats/）說明了原因：目前Selenium IDE只有在HTML格式下才可以穩定工作，其他語言格式還在實驗階段，仍需要做很多工作來保證其穩定性。如果一定要轉換，可進入Options→Options…→General，勾選Enable experimental features，再進入Options→Format，如圖2-10所示。

圖2-10 支持多種語言的轉換

當你選擇其他語言時，IDE也會給出不推薦轉換語言的提示，如圖2-11所示。

圖2-11 不推薦轉換語言的提示

轉換為其他語言后，執行按鈕、Table視圖都被置灰，如圖2-12所示。在2.3.3小節中介紹了導出腳本的方式，可轉換為各種編程語言。

圖2-12 Table視圖不可用

● Log

如圖2-13所示，每一個步驟的執行結果都將記錄為Log。默認顯示所有log，可以根據不同類型（Debug、Info、Warn、Error）過濾，便于調試。

圖2-13 Log

● Reference

顯示被選中Command的功能說明，如圖2-14所示，包括所需要的參數，便于快速了解Command的用法。

圖2-14 Reference

● UI-Element

Selenium的高級用法，使用JavaScript定義對象。本節不做介紹，可通過幫助→UI-Element Documentation了解詳情。

● Rollup

將多個操作合并到一個操作步驟中，將步驟內容寫入JavaScript文件后，作為用戶擴展導入。導入完成后，便可以在Rollup標簽頁中看到JavaScript文件中定義的步驟說明，如圖2-15所示。2.3.3小節將演示Rollup的用法。

圖2-15 Rollup

2.3.3 場景演練

前文已經對Selenium IDE做了詳細的介紹，接下來，我們將測試一個具體的場景，來掌握Selenium IDE的使用。

業務背景：企業用戶在登錄系統之后，可在Ping++管理平臺的企業賬戶中進行充值，用于身份實名認證和銀行卡認證接口費用。可以簡單理解為一個電子錢包，支持充值、消費、查看交易明細。

場景說明：登錄Ping++管理平臺并查看企業賬戶及余額、明細，如圖2-16所示。

圖2-16 待測頁面截圖

Selenium IDE使用過程如下：

步驟 01 打開Firefox，確保Selenium IDE在錄制狀態。

步驟 02 在Firefox瀏覽器上進行測試操作，例如訪問待測系統、進入頁面、點擊按鈕等操作。

步驟 03 在操作過程中觀察Selenium IDE界面上的命令變化。在Firefox頁面上每做一次操作，都會錄制形成一條命令。

步驟 04 停止錄制，查看結果。

使用過程很簡單，錄制結果如圖2-17所示。

圖2-17 Selenium IDE錄制結果

錄制完成后，單擊File→Save Test Case，保存腳本到本地，文件格式為HTML。

如圖2-17所示為由錄制生成的Test Case，沒有經過任何的改動。單擊按鈕進行回放，你會發現運行過程中拋出了異常，無法通過，如圖2-18所示。

圖2-18 執行測試失敗

如果你動手實踐了上述操作，或許你已經基于Log面板中的信息找到了腳本異常的原因。如果你還沒有想明白，別著急，讓我們帶著這個疑問先對Selenium IDE提供的命令進行系統性的學習。

我們不僅要了解如何解決腳本中的異常，創建一個可以正常運行的腳本，更重要的是，利用Selenium IDE的高級功能（例如模糊匹配，Roll up）使腳本更加完善，易于維護。

1. Selenese

Selenese是命令集合的統稱，分為以下幾種類型。

● Action：直接作用在頁面元素上的操作，如點擊、輸入等。

常用的有：

? open打開頁面。

? type輸入內容。

? click點擊。

? sendKeys鍵盤輸入。

● Accessor：將某個值保存到變量中，方便復用，提高可維護性。

使用store命令來儲存變量，如圖2-19所示，將變量值作為Target的內容，自定義的變量名作為Value的內容。當我們要使用變量的時候，用${變量名}格式引用變量。圖2-19將用戶名、密碼分別存儲到變量username與password中，如果測試腳本的多個步驟都用到了用戶名和密碼，使用上述變量的方式會讓腳本易于維護。如果用戶名密碼改變了，我們無須逐個修改步驟中的值，只要更新變量值即可，這就是所謂的“腳本參數化”。否則，我們需要確認每個使用用戶名、密碼的步驟都做了更新。

圖2-19 腳本參數化

除了上文提到的store命令之外，常用的Accessor類型的命令還有：

? storeTitle儲存當前頁面的標題（title）。

? storeText儲存元素的文本（text）屬性值。

? storeElementPresent記錄元素是否存在，返回true或false。

● Assertions:Assertions即檢查點，Selenium IDE的“檢查點”支持兩種類型：

Assert與Verify。Assert又譯作“斷言”，它不是某個測試工具獨有的概念，各種測試框架中都能見到它的身影。Assert用于檢查指定條件是否滿足，如果不滿足，整個Test Case運行終止。舉個例子，我們可以在Test Case開始時用Assert相關命令檢查頁面的title屬性是不是等于期望值，如圖2-20所示，如果不等于，可能是頁面跳轉有誤，沒有必要繼續執行后續操作，腳本會即刻終止。

圖2-20 使用assertTitle

常用的Assert命令有：

? assertLocation檢查當前是否在正確的頁面。

? assertTitle檢查當前頁面的title。

? assertValue檢查輸入的值。

? assertSelected檢查select的下拉菜單中選中是否正確。

? assertText檢查指定文本是否正確。

? assertTextPresent /assertTextNotPresent檢查指定文本存在/不存在。

? assertEditabl/assertNotEditable檢查指定文本框可編輯/不可編輯。

Verify也是用于驗證指定條件是否等于期望值，如圖2-21所示。與Assert不同的是，如果不等于期望值，那么當前步驟失敗，繼續執行下一步。它不會影響后續步驟的執行。

圖2-21 使用verifyVisible

常用的Vertify命令有：

? verifyTitle驗證頁面title是否正確。

? verifyTextPresent/ verifyTextNotPresent驗證指定文本存在/不存在。

? verifyElementPresent/ verifyElementNotPresent驗證指定元素存在/不存在。

? verifyVisible驗證指定元素是否可見。

● Wait：手工測試的過程中，頁面毫秒級的加載速度肉眼是感覺不到的，而對于自動化測試而言，頁面的加載問題是測試腳本中一個重要的考慮因素。況且由于網絡、服務器等問題可能會導致頁面加載慢。在手工測試過程中，測試人員往往是等待元素加載完成后才會進行操作；同樣地，測試腳本也要學會“等待”。否則就會遇到2.3.3場景演練開篇腳本中出現的異常。

Selenium IDE提供的Wait命令分為兩種形式。一種形式簡寫為“***AndWait”，即執行操作后，要等待頁面刷新完成才進行下一步，常見的有：clickAndWait（點擊并等待）、typeAndWait（輸入并等待）、selectAndWait（選擇并等待）；另一種形式簡寫為“waitFor***”，即等待直到符合某一特定條件才進行下一步，常見的有：waitForElementPresent（等待直到指定的元素出現在頁面上）、waitForVisible（等待直到元素可見。它與waitForElementPresent非常類似，兩者之間的微妙差別是：Present是以HTML元素的形式存在于頁面上的，而Visibility則是CSS設置的）、waitForTitle（等待直到頁面title為指定的內容）。

Selenium IDE默認的最大等待時間為30000毫秒，即若在30秒內沒有找到元素，則測試步驟失敗，腳本拋出異常。可進入Selenium IDE菜單欄的Options→Options…→General，設置Default timeout value，單位為毫秒。

如圖2-22所示，余額明細是在頁面加載完成之后出現的，可以用它作為加載完成的標志。

圖2-22 待測頁面的截圖

如圖2-23所示，使用waitForElementPresent命令，使腳本在出現余額明細之后才會執行后續操作。

圖2-23 使用wait命令

除了圖2-23的waitForElementPresent方法，本例還可以使用其他的waitFor***方法。圖2-24演示了多種wait命令的使用。這里需要特別說明的是，為了演示clickAndWait的用法，在圖2-24錄制腳本中第4步waitForTitle之前，我們使用了clickAndWait命令。而事實上，腳本中clickAndWait有畫蛇添足之嫌。通常的做法是：“先click再waitForTitle”或者“先clickAndWait再assertTitle”。

圖2-24 多種wait命令的使用

你或許注意到，示例中還使用了另一種等待方式：pause，暫停2秒。它與waitFor***的區別在于，waitFor ***是隱式等待，如果條件滿足，就立即執行下一步，否則就一直等到Selenium IDE設置的最大等待時間，因此具體的等待時間是不固定的；而pause是顯示等待，明確了等待時間，一定要等到時間結束為止。二者相比，waitFor***更高效。

到此，我們已經了解了Selenese命令的類型及其常見用法。如圖2-25所示，運用Selenese命令更新Selenium IDE錄制腳本之后，腳本立刻“舊貌換新顏”，不再因為加載問題導致執行失敗，還做了參數化，設置了基本的檢查點。

圖2-25 運用Selenese命令更新Selenium IDE錄制腳本

2．保存腳本

可以將一系列Test Case保存為一個Test Suite，作為一個腳本文件來管理。

如圖2-26所示，單擊File→Save Test Suite，選擇位置并保存。

圖2-26 保存Test Suite

打開保存的文件，文件為HTML格式，每個Test Case為一個鏈接，如圖2-27所示。

圖2-27 保存的Test Suite文件

點開一個Test Case鏈接，是一個HTML表格，如圖2-28所示。

圖2-28 Test Suite文件中的Test Case

3．編輯腳本的技巧

編輯和調試腳本的過程中，有如下小技巧：

● 在頁面中右擊，在打開的快捷菜單中選擇Insert New Command直接插入步驟。

● 使用暫停，點擊即可逐步執行，方便觀察腳本的執行狀態。

● 在頁面中右擊，在打開的快捷菜單中添加Set/Clear Start Point，或者選中目標行，使用快捷鍵S添加Start Point，只能設置一個，每次執行從此開始，不必從頭開始執行腳本。

● 從右鍵菜單添加Toggle Breakpoint，或者選中目標行，使用快捷鍵B設置Breakpoint（斷點），腳本執行至此會暫停。

● 可在右鍵菜單Insert New Comment中添加Comment，增強腳本可讀性。

● 確保打開Selenium IDE后，在瀏覽器中對目標元素右擊，打開如圖2-29所示的菜單，可快速添加assert、verify、store、waitFor等命令。

圖2-29 瀏覽器中有關Selenium IDE的菜單

4．模糊匹配在檢查點中的使用

有一些頁面元素的屬性值不是固定的，且符合一定的規則，比如帶有Test字符串前綴的訂單號。當我們要為這些動態值設置檢查點的時候，可以使用模糊匹配的功能。接下來，介紹以下幾種模糊匹配的類型。

Globbing

前綴：glob：在selenium中只支持兩種特殊匹配字符。

● *：可以被理解為anything，可以匹配無、單個字符、若干字符，如圖2-30所示。

圖2-30 glob的用法

● ［］：匹配［］中包含的任一單個字符，如［abcdef］，代表匹配a到f的小寫字符（注意區分大小寫），可以使用“-”來代表一定范圍內的字符集（在ACCII中相連的），如［a-f］。

regular expression（正則表達式）

前綴：regexp：或者regexpi:，前者區分大小寫，后者不區分大小寫。

對于正則表達式，你一定不陌生，作為匹配模式，它是最強大、最靈活的。在Selenese中，正則表達式可以完成其他匹配模式比較難以完成的任務。例如，regexp: [0-9]+ 表明只允許數字，如圖2-31所示。

圖2-31 regexp的用法

exact patterns

前綴：exact：當你需要找到*、［］、｛｝這樣的特殊字符時，就需要用到exact匹配模式。

5. Rollup

在實際工作中，往往需要在多個Test Cases中加入多個相同的步驟，比如作為前置條件的登錄等。那么，是不是要復制相同的步驟到每個Test Case中？Selenium IDE的Rollup功能為我們提供了更好的解決方案。

Rollup的做法是，將Test Cases中的相同步驟抽離出來，把它們在JavaScript文件中定義好，之后將這個js文件作為user-extension導入Selenium IDE中。導入之后，在js文件中定義的多個步驟看起來就像是一個步驟似的被Test Case調用。

下面是一個簡單的Rollup范例，將登錄步驟合并為一步，具體步驟如下。

步驟 01 將登錄操作的源碼保存為loginCommandsRollup.js文件。

    var manager = new RollupManager);
    manager.addRollupRule{
        //name,description,pre,post中描述了Rollup的基本屬性，在IDE中，選中Rollup行，在下
方的Rollup面板中可以看到，便于用戶了解該Rollup
        name:'loginCommandsRollup',   //Rollup的名字，在引入該Rollup時使用
        description:'Combine login commands.',   //描述，介紹該Rollup的功能
        pre: 'The Dashboard works.The username and password is correct.', //執行該Rollup的前提條件
        post:'The user login Dashboard successfully.',  //執行該Rollup的結果
        args: [],
        commandMatchers: [],
        getExpandedCommands: functionargs) {
          var commands=[];  //定義一個Rollup包含的Step列表
          //如下為Rollup包含的Step，按照順序，依次被執行，每個Step包含3個字段，command、
target、value，在此不再贅述
          commands.push{
              command: 'open',
              target: '/',
              value: ''
          });
          commands.push{
              command: 'clickAndWait',
              target: 'link=登入',
              value: ''
          });
          commands.push{
              command: 'type',
              target: 'id=username',
              value: '*********'
          });
          commands.push{
              command: 'type',
              target: 'id=password',
              value: '**********'
          });

          commands.push{
              command: 'click',
              target: 'id=loginBtn',
              value: ''
          });
          return commands;
        }
    });

步驟 02 打開Selenium IDE，進入options-options…-General，如圖2-32所示。單擊Selenium Core extensions.js(user-extensions.js) 一欄的Browser按鈕，選中本地的js文件，即可導入Selenium Core extentions中。

圖2-32 導入js文件，以供Rollup使用

步驟 03 回到Selenium IDE面板，添加Step, Commands填寫rollup, Target填寫上述．js文件中的name，即loginCommandsRollup，這樣便完成了Rollup的添加。

步驟 04 選中Rollup行，切換至Rollup面板，即可看到詳情，一目了然，如圖2-33所示。

圖2-33 Rollup的引用效果

另外，如圖2-34所示，你也可以單擊工具欄中的Apply rollup rules，直接添加Rollup。

圖2-34 添加Rollup的對話框

可以看到，原本包含多個步驟的登錄操作被合并成一個步驟了。這樣做不但簡化了腳本結構，還可以在不同的Test Case中引入這個Rollup，提高了重用性，降低了維護成本。

Rollup只適用于Selenium IDE界面，導出的各個語言的腳本均不支持Rollup，比如Python報錯如下：

    # ERROR: Caught exception [ERROR: Unsupported command [rollup | loginCommandsRollup | ]]

6．導出腳本

Selenium IDE支持將Test Case導出為C#、Java、Python 2、Ruby腳本（其中不支持將Test Suite導出為Python腳本）。下面以導出基于Python的unitest框架及WebDriver的腳本為例來介紹具體的操作步驟。

步驟 01 如圖2-35所示，錄制腳本已經準備好，該腳本實現登錄Ping++管理平臺并進入企業賬戶的測試場景。

圖2-35 錄制腳本已準備好

步驟 02 如圖2-36所示，進入File，選擇Export Test Case As... →Python 2/unittest/WebDriver，擴展名為．py，保存至本地。

圖2-36 File菜單

步驟 03 查看導出的腳本，代碼如下

    # -*- coding: utf-8-*-
    from selenium import webdriver
    from selenium.webdriver.common.by import By
    from selenium.webdriver.common.keys import Keys
    from selenium.webdriver.support.ui import Select
    from selenium.common.exceptions import NoSuchElementException
    from selenium.common.exceptions import NoAlertPresentException
    import unittest, time, re

    class LoginDashboardAndCheckBalance(unittest.TestCase):
      def setUp(self):
          self.driver = webdriver.Firefox()
          self.driver.implicitly_wait(30)
          self.base_url = "https://www.pingxx.com/"
          self.verificationErrors = []
          self.accept_next_alert = True

        def test_login_dashboard_and_check_balance(self):
          driver = self.driver
          # open | / |
          driver.get(self.base_url + "/")
          #assertTitle|Ping++ 聚合支付系統 | 支付寶 微信支付 分期Apple Pay|
          self.assertEqual(u"Ping++ 聚合支付系統 | 支付寶 微信支付 分期Apple Pay",
driver.title)
          #click|link=登入 |
          driver.find_element_by_link_text(u"登入").click()
          #waitForTitle| 管理平臺 |Ping++|
          for i in range(60):
              try:
                  if u"管理平臺 |Ping++"==driver.title: break
              except: pass
              time.sleep(1)
          else: self.fail("time out")
          # store | ********** | username
          username = "**********"
          # store | ******** | password
          password = "********"
          # type | id=username | ${username}
          driver.find_element_by_id("username").clear()
          driver.find_element_by_id("username").send_keys(username)
          # type | id=password | ${password}
          driver.find_element_by_id("password").clear()
          driver.find_element_by_id("password").send_keys(password)
          # click | id=loginBtn |
          driver.find_element_by_id("loginBtn").click()
          # 等待賬戶入口出現
          # waitForElementPresent | id=accountMenu |
          for i in range(60):
              try:
                if self.is_element_present(By.ID, "accountMenu"): break
              except: pass
              time.sleep(1)
          else: self.fail("time out")
          # verifyVisible | id=accountMenu |
          try: self.assertTrue(driver.find_element_by_id("accountMenu").is_displayed())
          except AssertionError as e: self.verificationErrors.append(str(e))
          # click | //div[@id='accountMenu']/span |
          driver.find_element_by_xpath("http://div[@id='accountMenu']/span").click()
          #click|link=企業賬戶 |
          driver.find_element_by_link_text(u"企業賬戶").click()
          # waitForVisible | class=text-blue balance_charge |
          # ERROR: Caught exception [Error: unknown strategy [class] for locator [class=text-blue
balance_charge]]
          # waitForElementPresent | css=a.active |
          for i in range(60):
              try:
                if self.is_element_present(By.CSS_SELECTOR, "a.active"): break
              except: pass
              time.sleep(1)
          else: self.fail("time out")
          # click | css=a.active |
          driver.find_element_by_css_selector("a.active").click()
          # waitForVisible | css=span.text-blue.balance_details |
          for i in range(60):
              try:
                  if driver.find_element_by_css_selector ("span.text-blue.balance_details").is_displayed():
break
              except: pass
              time.sleep(1)
          else: self.fail("time out")
          # click | css=span.text-blue.balance_details |
          driver.find_element_by_css_selector("span.text-blue.balance_details").click()
          # 等待余額明細可見
          # waitForElementPresent | id=balance_details |
          for i in range(60):
              try:
                  if self.is_element_present(By.ID, "balance_details"): break
              except: pass
              time.sleep(1)
          else: self.fail("time out")

        def is_element_present(self, how, what):
          try: self.driver.find_element(by=how, value=what)
          except NoSuchElementException as e: return False
          return True

        def is_alert_present(self):
          try: self.driver.switch_to_alert()
          except NoAlertPresentException as e: return False
          return True

        def close_alert_and_get_its_text(self):
          try:
              alert = self.driver.switch_to_alert()
              alert_text = alert.text
              if self.accept_next_alert:
                  alert.accept()
              else:
                  alert.dismiss()
              return alert_text
          finally: self.accept_next_alert = True
        def tearDown(self):
            self.driver.quit()
            self.assertEqual([], self.verificationErrors)
    if__name__=="__main__":
        unittest.main()

上述腳本中，除了實際的操作步驟之外，末尾還有一些附加的代碼，這些代碼是可在IDE中設置的。具體的設置方法是，進入Option→Option...→Formats，選擇Python 2/unittest/WebDriver，如圖2-37所示，可自定義Header、Footer、Indent、Show Selenese等，以及關于Selenium RC的配置。

圖2-37 配置導出腳本的格式

在此介紹的Selenium IDE應用只是Selenium家族的冰山一角。

你會發現，Selenium IDE可快速上手，方便新手入門，但也恰恰因為它的簡易，只能錄制、管理比較簡單的測試用例，不能作為開發和維護復雜測試集合的解決方案。后續我們將了解Selenium家族的其他成員，希望本小節已經開啟你學習Selenium的大門。