《HTML5移動開發》——1.3　測試工具

本節書摘來非同步社群《HTML5移動開發》一書中的第1章，第1.3節，作者：【美】Estelle Weyl（埃斯特爾 韋爾），更多章節內容可以訪問雲棲社群“非同步社群”公眾號檢視。

1.3　測試工具

能在真實裝置上執行網站是最好的，但是不可能在所有的裝置上進行測試，因為有成千上萬種裝置，而且每天都會有新的裝置出現。因此建議你在一組有代表性的裝置上進行測試，這組裝置能夠覆蓋各種配置，例如作業系統、瀏覽器、裝置大小以及各種螢幕解析度（resolution）、記憶體約束和頻寬訪問等裝置能力。

在真實裝置上測試將會非常昂貴而且耗時。除了在上一節中介紹過的除錯工具，還有一些工具可以幫助我們實現最大化的測試能力。

1.3.1　模擬器和模擬器

模擬器是一種軟體，在電腦上覆制或是模仿了一個（或多個）移動裝置的功能，使得模擬的表現非常類似於真實裝置的運轉情況。這種注重運轉情況的真實再現正是模擬和模擬之間的區別。模擬主要是模擬一個移動作業系統的抽象模型。

模擬器允許你在桌面電腦上使用移動軟體，使你無須所有的裝置即可執行和除錯程式碼。即使你使用模擬器和模擬器進行測試，仍然無法在所有裝置的模擬器上進行測試。模擬器和模擬器僅僅讓你得以起步並加快開發和除錯的程式。你還是應該在一組不同的移動裝置上進行測試。

當在模擬器中執行網站時，你是在桌面電腦的一個模擬器程式中執行的。有些模擬器是針對單獨的裝置的，其他的則讓你選擇你想模擬什麼裝置。舉例來說，iOS模擬器允許你選擇iPhone還是iPad。通過選單，你可以在橫向和縱向之間改變裝置朝向。還有相當於裝置按鈕的虛擬按鈕。而且在非觸控裝置上，你還可以使用滑鼠來模仿　觸控事件。

模擬器沒有精確地複製裝置硬體，因此不保證你的應用程式在真實裝置上能夠同樣地執行。某些類庫對於模擬器而言可以正常地編譯及連結（因為它確實是在電腦上執行的），但是當你在裝置上的時候可能就無法編譯。

模擬器和模擬器通常都包含一個完整的SDK，用於在一個“山寨”的本機環境中測試原生應用。為了測試程式碼，我們需要的是包含瀏覽器的模擬器和模擬器，每個模擬器和瀏覽器確實都有。你可能會希望下載下列模擬器和模擬器，並在其瀏覽器中測試網站。

Android模擬器

適用於Windows、Mac及Linux的免費Android模擬器可以隨SDK一起從獲取。正如http://developer.android.com在“Android除錯工具”小節中描述的那樣，先下載基本SDK，然後分別下載各個Android作業系統。在Mac或Linux的下載包裡提供了一個Android命令列工具，在Windows上則提供了一個SDK setup.exe程式。

Android模擬器可以讓你限制虛擬裝置的記憶體大小以更好地模擬手機。在 Android虛擬裝置管理器中，選中一個裝置然後點選“修改”（Edit）（如圖1-5所示）。在“硬體”（hardware）中點選“新建”（New），然後從“屬性”（Property）下拉選單中選擇“裝置記憶體”（Device RAM）大小。

iOS模擬器

iOS模擬器提供了一個免費的包含移動Safari瀏覽器的模擬環境，僅可用於Mac OS X。要注意的是，iPhone SDK的大小差不多是2GB，下載可能會花很長時間。

這是一個模擬器，而不是模擬器。它沒有硬體模擬和效能指示器。它只能讓你看到程式碼是如何執行和網站是如何渲染的，但它總體來說無法測量網站的效能。

如果你只是想看一下你的設計看起來是個什麼樣子，不需要模擬或是模擬的話，有很多像iPhoney或是iPadPeek這樣的工具，它們就是簡單地在一個看起來像是舊的裝置模型的瀏覽器中開啟你的網站。

BlackBerry模擬器

Windows版的BlackBerry模擬器包括代理伺服器、面向Web開發人員的Eclipse和Visual Studio的外掛以及模擬器。

Windows Phone模擬器

Windows Phone模擬器只能在Windows上使用。Windows Phone模擬器是一個模擬Windows Phone裝置的桌面應用程式。可以從http://dev.windowsphone.com/ en-us/downloadsdk下載Windows Phone SDK。最新發布版以及有關安裝的資訊可以參閱網址http://bit.ly/16t5utu。

目前，在Visual Studio中預設的模擬器映像是Emulator WVGA 512 MB，它模擬的是一個記憶體有限的Windows Phone 8手機。

Firefox OS模擬器

面向Firefox瀏覽器的Firefox OS模擬器附加元件（Firefox OS Simulator add-on）是一個Firefox OS模擬器，它提供了一個像Firefox OS一樣的環境，而且看起來和感覺都像是一個行動電話。安裝完成之後，Firefox桌面瀏覽器的Web Developer選單下面就多了一個Firefox OS的選單。

Opera Mobile模擬器

面向Windows、Mac和Linux的Opera Mobile模擬器可以從www.opera.com/ developer/tools下載。

Opera Mini模擬器

最新版的Opera Mini有一個Java applet版本，這是一個完整的Opera Mini應用程式，可以從www.opera.com/mini/demo獲取。

以上是最常見的移動作業系統。大多數的移動作業系統，像Symbian和WebOS，具有可以通過桌面系統載入的SDK，這樣你就可以模擬它們的環境。根據你目標市場的不同，你應該測試你的所有目標受眾可能會使用的作業系統。有關模擬器的更多資訊可參考http://www.mobilexweb.com/emulators。

1.3.2　線上工具

要快速評估裝置會影響基本媒體查詢的重要統計資料，可以在裝置瀏覽器中開啟http://www.quirksmode.org/m/tests/widthtest.html。

W3C mobileOK檢查器（W3C mobileOK Checker）可以檢查網站是否遵循最佳實踐，並提供相關的資訊和連結來幫助你，使你的網站對移動裝置更加友好。mobiReady是一個利用了W3C mobileOK檢查器的線上工具，它以一種更能說服你採取行動的方式來顯示結果，從而使你的網站更加移動友好。

Firefox的Modify Headers附加元件對於移動Web開發、HTTP測試及隱私非常有用，它可以讓你修改（新增、替換或者過濾）傳送到Web伺服器的HTTP請求頭。所有上述資源的連結（以及本書列出的所有其他資源）都放在線上各章資源列表。

1.3.3　手機

在真實裝置上進行測試是開發過程中的一個必要步驟，但購買一堆移動裝置可是一筆不小的投資。調整瀏覽器大小和使用模擬器無法複製真實的網站效能、裝置能力、畫素密度和行動網路的影響。

如果你正在建立原生應用，顯而易見你手裡要有安裝了相應作業系統的裝置。在本書中，我們使用HTML5、CSS3和JavaScript進行開發，而不是原生應用，因此我們的程式碼將執行在所有裝置的瀏覽器中。雖然我們的開發面向的是瀏覽器，但我們也還是需要在很多裝置上進行測試，包括在手機運營商的網路上。永遠要在真實的裝置上，使用現實世界的網路連線來測試你的程式碼，包括WiFi熱點、3G、4G甚至EDGE。乘坐一輛巴士或者火車出行，當它在城市以及大城市之間的郊區和農村地區移動時，試著從各種不同的地點來訪問你的應用。

瀏覽器實驗室（browser labs）

在真實移動裝置上測試是開發過程中無法忽略的一個部分。有很多的瀏覽器實驗室，所以要儘量在你的附近找到一個。如果你周圍沒有這樣的裝置實驗室，那就和別人一起組建一個出來。

如果你傾向於擁有自己的裝置實驗室，那麼你需要具有不同大小、作業系統、裝置能力和瀏覽器的裝置。你可以用相當便宜的價格建立一個你自己的裝置實驗室，從所有裝置中按照你自己感興趣的方面選擇系列裝置即可。購買全部的裝置　是不可能的，但是你應該儘量拿到一組有代表性的不同大小、瀏覽器和作業系統的裝置。

還有像DeviceAnywhere和Nokia Remote Access這樣的虛擬裝置實驗室。這些都是你可以遠端訪問的真實裝置。正因為它們都是真實的裝置，所以如果某人正在使用你想用到的那一臺的話，你就只能排隊等候。

iOS

在北美地區，iOS裝置總共只佔了整個網際網路流量的5%，但卻佔了整個移動流量的50%[11]。如果在你的開銷中還沒有一臺iOS裝置，就投資一臺吧。

購買一臺能夠安裝最新iOS作業系統的裝置，以及一臺稍舊版本作業系統的裝置。你可以在Craigslist或者eBay上以很少的費用買到一臺舊裝置。目前，只有1.8% 的iOS使用者，或者說是0.13% 的網際網路使用者，還在使用iOS 4.3及更老的版本，還有12.5% 的iOS使用者，或者說是0.93% 的網際網路使用者在使用iOS 5。

購買裝置的時候，你需要的是能夠工作的瀏覽器。僅此而已。所以如果預算有問題的話，螢幕裂了的裝置也可以買，總比沒有強。其中一個裝置應該是一部手機，另一個可以是手機、iPad或者iPod Touch。

購買iOS裝置之後，可以從iTunes免費下載Opera Mini。

如果你所有的iOS裝置都是高解析度螢幕的話，應確保你其他的裝置不是。同樣，確保你所有的裝置不全是手機——要有一兩個平板裝置。

Android

Android是世界上最流行和最多樣化的移動作業系統。Android執行在涵蓋手機和平板電腦的很多裝置上。購買至少兩部（最好更多）Android裝置：一部是執行最新作業系統的高配智慧機，另一部是執行舊版本的便宜貨。在本書寫作之時，Android 2.3雖然已經過時了，但是一些商店裡售賣的便宜和免費裝置上安裝的還是Android 2.3，而且它還是目前Android最普遍的版本，佔據整個Android市場的34%，也就是整個網際網路使用者的2.3%[12]。

除了多個Android作業系統版本之外，還要有具備不同大小、處理能力、解析度以及廠商的裝置。在Android裝置上，你可以新增其他的瀏覽器，包括Chrome、Opera Mini和Opera Mobile、Firefox Mobile以及Dolphin Mini和HD。

Windows

如果你正準備投資一臺Windows裝置，錢要花在最新的作業系統上。Windows Phone 7從未大規模流行過，但是Windows Phone 8具有這個潛力。兩者都使用Metro UI使用者介面。除了測試應用程式以確保程式碼工作正常之外，要真正地去使用Windows Phone。Windows Phone裝置的使用者互動與Android和iOS大不相同。通過使用Windows裝置，你或許能夠意識到，需要調整UI互動以使其更加符合系統本身的預設操作。

BlackBerry

BlackBerry 10裝置擁有所有移動裝置中最好的偵錯程式，但絕對不是最大的使用者群。

市場上有比BlackBerry 10更多的舊版BlackBerry裝置。BlackBerry的新舊裝置使用者都在上網衝浪。我建議再添置一個BB6或BB7。幸好，舊手機並不貴，而且找一個非觸控手機來測試你的網站也不錯。

BB 6之前的瀏覽器都不是基於WebKit核心的。只有非常少的使用者還在使用那些實在是太老的裝置。如果你的目標市場是BB5甚至更低的話，你可能要再買第三個BlackBerry裝置了。

Nokia

談到Nokia，我的意思是Symbian OS，而不是Lumia Windows Phone。

Symbian、S40系列、三星，其次是索尼移動和摩托羅拉，在某些國家比Android、iOS、BlackBerry和Windows更常見。如果我建議某個特別的裝置的話，在本書出版的時候，可能已經過時了。你只要能意識到在國際上而言，Nokia在移動市場還是很有影響力的一員。我建議添置一部功能型手機，有十字方向鍵輸入和一個小螢幕的那種，這樣你就能知道世界上很大一部分人在看你的網站時，會是什麼感覺。

Kindle

別忘了還有裝有基於WebKit核心Silk瀏覽器的Kindle Fire。

WebOS

WebOS已經不再生產，但還是有人在用[13]。你可以以低於30美元的價格買到一個Palm Pre或者Pixi。

1.3.4　自動化測試

剛才列出來的這些測試工具有助於我們視覺化和手動地進行測試。要真正充分地測試，你必須不停地翻轉（rotate）、縮放（zoom）、點選（pan）手機，操作失誤還會無奈地大叫。對呈現而言，你需要實際地在不同裝置大小、瀏覽器和作業系統上檢視渲染的頁面。對於靜態內容，這可能已經足夠了，而且像Adobe Edge這樣的工具也能幫上忙。

對於Web應用來說，你可能需要自動化測試。你需要持續地測試應用以確保程式碼確實正常執行，需要測試所有的事件及結果。有一些針對JavaScript的測試類庫。

Jasmine是一個行為驅動開發（behavior-driven development，BDD）的框架。PhantomJS是一個沒有標頭檔案的WebKit，不是一個測試類庫，針對各種Web標準包括DOM處理、CSS選擇器和JSON等都提供原生支援。你可以在PhantomJS的網站下載到面向任何作業系統的一個預編譯二進位制檔案。

要利用PhantomJS進行自動的前端測試，可以下載CasperJS。要偽造AJAX請求，可以使用Sinon.JS。每個網站都提供了編寫良好的文件，讓你可以快速入門，在WebKit中使用這些類庫進行測試。但沒有解決在移動方面進行測試的問題。

還有一些線上的測試工具。像SauceLabs，可以讓你使用上百種的移動或桌面瀏覽器和作業系統平臺進行測試。

你可以選擇任何適合你和你的應用程式的裝置和工具，但是永遠要測試。

現在，讓我們開始寫程式碼吧，這樣我們才能有東西來測試。