讓跨瀏覽器測試 Web 應用程序變得簡單

本文引自http://www.ibm.com/developerworks/cn/web/wa-crossbrowser/

我們都知道(我們也應該 知道),需要在多個瀏覽器和操作系統中測試我們的 Web 應用程序。但這個任務常常是理論上行得通卻難於付諸實現。用戶可能會使用各種各樣的瀏覽器和操作系統組合來訪問您的站點,而要實現一整套完整的跨瀏覽器測試則可能對您的開發資源造成不小的損耗。

什麼?除了 IE 還有這麼多瀏覽器?

21 世紀早期的開發人員可能只需要對 Internet Explorer 進行測試,但是這些日子已經一去不復返了。如今,IE 佔據了大約 80% 的瀏覽器訪問量。這個數字非常龐大,但並不具有絕對優勢 — 當然,沒有公司會將 20% 的用戶羣拱手與人。

您也不要妄想您的用戶使用的瀏覽器特性可以反映大部分 Internet 用戶的習慣。根據國家和興趣的不同,使用瀏覽器和操作系統的的習慣也不盡相同。很多站點都針對特定的用戶羣,這些站點的用戶很可能使用的是非 Windows 操作系統和 Internet Explorer 以外的瀏覽器。例如,訪問 developerWorks 站點的訪客中,60% 的人使用 Internet Explorer,而 35% 的人使用 Firefox。特別是 Web 開發專區,使用 Firefox 的人數多達 51%,而只有 41% 的訪客使用 Internet Explorer。

幸運的是,一些工具和技巧可以使跨瀏覽器測試變得稍微簡單一些 — 並且開銷也更低。在本文中,您將瞭解各種可用於測試的策略;根據您的需求和資源,您可以找到最適合自己的策略。我將首先介紹一些比較全面的測試技術,如果資源和時間的限制使您無法實現所需的測試,本文還將介紹一些替代方法。

瀏覽器的小花招

附加功能

請記住,並不是所有人都可以在其瀏覽器上啓用很多 Web 應用程序所依賴的兩種技術 — Flash 和 JavaScript。對於本文介紹的技術,不管您的最終選擇是什麼,都應該在打開和關閉 JavaScript 和 Flash 的情形下進行測試(很多託管服務提供了一種簡單的方法來啓用這些選項)。對 cookie 也是如此 — 關閉 cookie、清除,執行所有可能的操作來模擬訪問站點的瀏覽器的可能狀態。

無疑,JavaScript 是 Ajax 應用程序的基礎。對 Ajax 代碼進行跨平臺測試稍微有些困難;關鍵在於,越接近真實的用戶體驗,硬件或瀏覽器模擬層越少,測試效果就越好。跨瀏覽器調試 Ajax 應用程序比較複雜,並且使用搜索引擎正確地進行索引也很困難,這兩大原因阻礙了這種應用程序的廣泛應用。有關更多信息,請參考 參考資料 中的鏈接,其中包括 developerWorks Ajax 資源中心的鏈接。

跨多個瀏覽器和操作系統進行測試,最顯而易見、最全面(當然成本也最高)的方法就是對多個瀏覽器和操作系統進行實際測試。從很多方面講,瀏覽器是測試過程中最簡單的部分,因爲大多數主流瀏覽器都是免費的。儘管如此,請記住,您將進行測試的不僅僅是幾種不同的瀏覽器,還包括同一 瀏覽器的各種版本。作爲開發人員,您通常都會在自己的計算機中使用最新最好的瀏覽器版本 — 這也是出現 “對多個瀏覽器進行測試” 這一咒語的原因之一 — 但是,快速查看一下站點的瀏覽器統計信息,您就會發現,並不是所有用戶都像您一樣。

目前,同時運行同一種瀏覽器的多個版本比較困難,因爲大多數瀏覽器的安裝過程都覆蓋了以前的所有版本。還好,有一些解決方法。對於 Firefox,可以將每個瀏覽器的可執行文件保存爲不同的名字,然後確保首次啓動各個版本時啓用配置文件管理程序,這樣就不會共享這些配置文件。圖 1 展示了同時運行的兩個 Firefox 瀏覽器版本 — 最新的 2.0.0.10 發行版和比較陳舊的 0.7 版本。

圖 1. 同時運行的多個 Firefox 版本 同時運行的多個 Firefox 版本

對於 Internet Explorer,這個過程要稍微複雜一些。Windows 實際上 不希望您這樣做;爲了應對它的 “抵制”,您需要對註冊表設置進行一些調整。一家小型軟件公司 TredoSoft 發佈了一款可以安裝多個 IE 版本的免費工具,以及能夠正確調整註冊表鍵和 DDL 的指令,該公司因此而獲得了廣泛關注;請查看 參考資料 中的鏈接(其中還包含我即將介紹到的其他工具和擴展的鏈接,但是我以及 developerWorks 不會對這些鏈接進行擔保)。

進行實際測試 不僅應該使用不同配置對各種瀏覽器進行測試,測試計算機(或者,適當規模的企業中受信任的遠程用戶測試程序)也應該有自己的 Internet 連接。換而言之,不要忘記測試真實的連接,這樣便不會由於本地加載圖片和腳本而影響測試準確性。儘可能多地添加真實世界中的因素 — 彈出窗口和廣告攔截程序、個人防火牆和用戶可能在其瀏覽器中使用的所有其他軟件,這些因素都會影響頁面的顯示方式;也可以幫助您更好地理解真實終端用戶的體驗。University of Washington 的 Web Tripwire Toolkit(參見 參考資料)可以幫助您瞭解由於其他干擾而非瀏覽器實現引起的古怪問題。

當然,在設置並運行所有這些瀏覽器之前,需要知道從哪裏獲得它們!比如,Microsoft® 不會在其網站上提供 Internet Explorer 5 的下載,並且在 Mozilla Foundation 頁面您也不一定能獲得 Firefox 1.0,這些都是老版本。幸運的是,積極的 Web 用戶們爲舊的可執行文件創建了檔案文件。evolt.org 上由自願者推動的 Web 社區提供了大量各種風格的舊版瀏覽器,包括 IE、Opera 等等,但是缺少最新的 Mozilla 發行版;這些可以在諸如 filehippo.com 及類似的文件聚合站點找到,您可以很輕鬆地找到這些站點。對於 Apple 的 Safari,開發者喜愛的 Multi-Safari 項目將早期的 Safari 版本進行了打包,因此可以方便地實現並行運行(參加 參考資料 中有關內容的鏈接)。

節省屏幕空間

處理多個瀏覽器時可能遇到的一個實際問題就是如何避免窗口混亂。雖然,很多時候無法避免,但是您至少可以通過兩種方便的工具來稍微整理一下。IE Tab 是一種 Firefox 插件,允許您在一個 Firefox 選項卡中運行一個 Internet Explorer 實例。這並不是模擬 — 它確實使用了 IE 呈現引擎,這意味着您看到的內容就是您在 Explorer 中實際獲得的內容,但是,這也意味着只能在 Windows 中工作。圖 2 展示了它的實際效果。

圖 2. 使用 IE Tab 同時運行的多個 Firefox 版本

RightLynx 是一種針對 Internet Explorer 和 Firefox 的插件,當您右鍵單擊時將彈出一個窗口,顯示當前頁面在 Lynx 中的顯示狀態,因此您不必始終打開活動的終端窗口;一個 Web 服務將在 Lynx 中加載頁面並將結果文本發送回您的計算機。這些工具都是免費的,並且安裝簡單,您可以在 參考資料 一節找到相關鏈接。

Lynx:古老而又嶄新的瀏覽器

當我提到 Lynx 時,您可能會大吃一驚。年輕的開發人員可能已經忘記了這個基於文本的瀏覽器,它最早出現於 90 年代早期,專門針對 UNIX® 命令行(但是也有針對 DOS、Windows 等的版本)。圖 3 展示了使用 Lynx 訪問 Web 開發專區的界面。

圖 3. 使用 Lynx 使用 Lynx

使用 Lynx 測試站點乍一看似乎毫無意義 — 畢竟,訪問您的站點的任何人都傾向於使用流行的圖形化瀏覽器。然而,Lynx 可以顯示站點的基本架構,因而能夠向最重要的站點訪客 Web 牽引程序和 spider 展示站點的近似外觀,它們能夠爲搜索引擎執行站點索引,從而提供站點流量。Lynx 工具能夠確保重要的搜索項不會隱藏在 Ajax 小部件之後。

虛擬化和模擬

當然,瀏覽器只是測試的一部分;您也許希望跨多個操作系統進行測試。與可以免費下載到開發計算機上的瀏覽器相比,操作系統的測試成本自然要高出許多。最全面的測試方法當然是對多個系統進行實際測試,包括 Windows 計算機、Mac、Linux® box 和其他需要進行測試的操作系統的物理版本。這很可能超出一年的 Web 開發預算,但是,幸運的是,可以使用一些方法將一臺計算機轉化爲多個測試平臺。

最簡單的方法就是創建一個雙啓動設置,即將多個操作系統裝在同一臺計算機上,在啓動時可以選擇所加載的系統。一般來講,操作系統都被保存在不同的硬盤分區中,但是 LiveDistros 被保存在 CD 或 thumb 驅動中,以避免硬盤驅動格式發生衝突。雙啓動過去一直用於 Linux 和其他開源版本,但是基於 x86 的 Macs 的出現意味着很多計算機現在都能夠雙啓動 Windows 和 OS X。

雙啓動的缺點是在操作系統之間進行切換需要等待很長時間。但是虛擬化則不存在這個問題,實現虛擬化後,可以同時運行多個操作系統。過去只有功能強大的服務器才能實現虛擬化,現在,只要擁有一臺標準版本的桌面 PC,您就可以使用這個工具。如果您打算使用多個操作系統爲用戶提供服務,那麼需要在測試計算機上實現某種形式的虛擬化。在圖 4 中,我在 Power Mac 中使用了 Virtual PC,同時在兩個操作系統中使用 4 種不同瀏覽器訪問 developerWorks Web 架構專區。

圖 4. 同時運行 4 種瀏覽器:OS X 上的 Safari 和 Firefox,Windows XP 上的 Firefox 和 Internet Explorer 同時運行 4 種瀏覽器:OS X 上的 Safari 和 Firefox,Windows XP 上的 Firefox 和 Internet Explorer

通過使用多種工具(包括 VMWare 和 Virtual PC),您可以輕鬆地在所有普通 PC 上運行 Windows 和其他與 x86 兼容的操作系統。其中一個操作系統充當主機,其他系統則在虛擬化應用程序中運行。這樣,不需要重新啓動,您可以在屏幕上相鄰的窗口中,比如 Windows Vista、Windows XP 和最新的 Ubuntu 版本,測試您的應用程序。您仍然需要購買所有不同的操作系統,但至少只需要使用相同的硬件。

您可能注意到,我在上面的樣例操作系統中沒有提到 Mac OS X。很不幸,OS X 只能夠在 Mac 硬件上運行,但是可以對 Mac 使用一些虛擬化方法。因此,如果希望使用在單個機器上應用最廣泛的系統,可以考慮使用 Intel® Mac 以及針對它的兩種主要的虛擬化產品,VMWare Fusion 或 Parallels Desktop(參見 參考資料 中的鏈接)。通過使用這種設置,您可以測試 OS X、Windows、Linux 以及其他運行在 x86 硬件之上的任何操作系統。當然,這種方法的缺點就是無論硬件還是軟件都不是免費的,甚至還很貴。

移動設備測試

如果您的 Web 站點或應用程序針對的是移動用戶 — 或者您期希能夠爲大量移動用戶提供服務 — 無疑,您需要對實際的移動設備進行測試。遺憾的是,與 PC 市場相比,移動設備市場非常零散,因而很難購買和維護非常穩定的物理測試設備,並且成本也較高。還好,您也可以通過桌面計算機來模擬移動平臺。

很多特定的移動平臺提供了免費的 SDK,包括可運行在 PC 桌面上的設備模擬程序。例如,您可以下載針對 Google Android 平臺的 SDK(參見 參考資料 中的鏈接)。訪問瀏覽器有些難度 — 您需要在 Eclipse 開發環境中安裝 Android 插件,然後啓動其中一個樣例應用程序 — 完成這些操作後,您將可以訪問基於 WebKit 的瀏覽器,WebKit 開源框架是支撐 Safari 和 Nokia S60 智能手機瀏覽器的基礎。圖 5 顯示了運行中的瀏覽器模擬程序。

圖 5. Android SDK 中的瀏覽器 Android SDK 中的瀏覽器

移動瀏覽器市場也非常零散,但是很多高端智能手機現在可以使用經過修改的桌面瀏覽器 — iPhone 使用 Safari,而 Opera Mobile 可以用於衆多智能手機,因此您可以直接在桌面上完成手機瀏覽器測試,但是,桌面瀏覽器和手機瀏覽器之間的相關性並不理想(iPhoney 是一種使用 Safari 標準桌面版本的 OS X 應用程序,但是至少可以向您呈現站點在受限的 iPhone 屏幕中的顯示效果;參見 參考資料 中的免費下載鏈接)。

當然,很多手機仍然需要通過受限的 WAP 訪問 Web。如果需要測試一個 WAP 站點,可以從網上獲得大量免費的 WAP 模擬程序,在瀏覽器窗口中運行即可。

總之,要通過內部測試獲得廣泛的覆蓋率,移動測試是最困難的部分。但是您還有其他的選擇,我將在下一節介紹。

外包測試

看到這裏,您可能感到有些絕望。也許測試的最後期限就在明天。也許您還不太信服我剛纔介紹的這些技術。或者您在時間或資金方面的預算非常緊張。或者,IT 部門不希望您在計算機中安裝舊版本的瀏覽器或修改註冊表鍵。這時候,您該如何做?除了最新版的 Firefox 和 IE 外,您是否無法對其他瀏覽器進行測試?

您仍然還有一種選擇:您可以通過託管服務執行測試。您需要提供一個 URL,這些服務將顯示該 URL 在各種平臺上的顯示效果。您現在無法從自己的測試計算機中實際訪問某個站點,但是,只需要很低的成本就可以訪問大量平臺 — 有些時候甚至不需要花一分錢。

Browsershots.org 展示了可以從這種服務的免費版本中獲得的好處。圖 6 展示了可以使用的各種選項(移動平臺和 Lynx 不包括在內)。對於選中的每個框,您獲得一個 PNG 文件,它是指定的 URL 在該瀏覽器/操作系統組合的顯示效果的屏幕截圖。這個過程會耗時半個小時或更長時間,因此,需要在後臺運行該過程,以便可以執行其他任務,但是這個重要的測試部分是免費的。

圖 6. 對 Browsershots.org 的定製結果 對 Browsershots.org 的定製結果

如何應對長期的全面測試

如果預算充足,那麼還可以做得更好一些。例如,如果支付一個月的費用,Browsercam.com 可以使您訪問更多的平臺和瀏覽器 — 包括某些移動平臺 — 以及一些動態頁面,允許您測試 Ajax 應用程序和其他基於 JavaScript 的頁面。諸如 Litmusapp 這樣的服務可以集成到您的測試和開發流程中,提供版本化支持和方法,向外部客戶機發布測試結果。

這些服務同樣適用於移動領域,新的移動設備總是層出不窮,遠遠超過大多數人的想像。DotMobi Virtual Developer Lab 就是一種不錯的託管服務,主要針對移動測試;它可以訪問上百種不同移動設備,並且能夠通過多種方法進行操作。這些服務提供的界面與真實設備並不相同,但是大多數情況下都可以滿足您的要求;並且由於它專門針對移動設備,因此可以作爲內部測試或桌面服務的補充。

結束語

理想情況下,應該對所有 Web 應用程序進行測試,以確保能夠在訪問它的所有瀏覽器中正確工作。但是,鑑於瀏覽器市場的紛亂複雜以及更加變幻莫測的移動平臺市場的日益崛起,使得 Web 應用程序的測試更加困難。儘管如此,您仍然可以通過一些方法來簡化測試。您可以使用大量工具進行跨平臺 Web 測試。無論是對工作站資源使用一些虛擬化的操作系統,或僅僅通過託管服務運行您的應用程序,您都能夠查看應用程序在不同用戶環境中的性能 — 並且您也應該對用戶負責,確保應用程序能夠在儘量多的環境中正常工作。

參考資料

學習 獲得產品和技術
  • Android SDK:可免費下載 Google 的移動開發工具箱,其中的 Eclipse 插件提供了一個移動瀏覽器模擬程序。
  • evolt 瀏覽器檔案文件:歸檔了大量舊版本的瀏覽器,可以下載並進行測試。其中缺少一些新版本,但是包含了 Internet Explorer 6 之前的所有版本。
  • Firefox on filehippo.com:可從這裏下載自 1.0 版本以後的所有 Firefox 版本。
  • Multi-Safari:下載 Apple Web 瀏覽器的各種版本並同時運行。
  • IE Tab:將 Internet Explorer 作爲 Firefox 中的一個選項卡運行。
  • RightLynx Lynx Preview Tool:在圖形化瀏覽器中查看頁面在 Lynx 中的顯示效果。使用 Firefox 和 Internet Explorer。
  • Lynx:使用這個基於文本的瀏覽器。
  • Virtual PCVMWare 提供了通用的 x86 虛擬化選項。
  • Parallels DesktopVMWare Fusion:面向 Intel Mac 的流行的虛擬化產品。
  • WapTiger:查看 WAP 頁面在 PC 中的顯示效果。
  • iPhoney:查看站點在 iPhone 中的顯示效果。
  • Browsershots.org: 免費的跨平臺測試託管服務。
  • Browsercam.com:該付費服務允許您在大量平臺上與 Web 頁面遠程交互。
  • Litmusapp:該付費託管服務可以集成到您的開發流程中。
  • DotMobi Virtual Developer Lab:該付費服務可以爲測試提供上百個不同移動設備的訪問。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章