【前端面試題】—19道有關前端測試的面試題(附答案)

雖然工作中有專門的測試人員（QA工程師）幫我們實作對代碼的測試，但是為保證開發的代碼品質，我們還是要進行單測、自測。

測試部分的面試題主要考察應試者對前端測試的了解，主要涉及單測和自測部分，考察應試者平時都是如何做測試的，都用過哪些測試工具等。

1、什麼是mock測試？

mock測試就是在測試過程中，對于某些不容易構造或者不容易擷取的對象，建立一個虛拟的對象來測試，以便完成測試方法。

2、什麼是冒煙測試（ smoke test）？

冒煙測試源自硬體行業，對一個硬體或者硬體元件改動後，直接給裝置加電，看看裝置會不會冒煙。如果沒冒煙，就表示待測元件通過了測試。

在軟體開發過程中，一直有高内聚、低耦合這樣的說法，各個功能子產品之間的耦合還是存在的。是以，一個功能的改動還是會影響到其他功能子產品。如果在開發人員修複了先前測試中發現的Bug後，想知道這個Bug的修複是否會影響到其他功能子產品，就需要做冒煙測試。

3、平時工作中怎樣進行資料互動？如果背景沒有提供資料，怎樣進行開發？mock資料與背景傳回的格式不同怎麼辦？

由背景編寫接口文檔、提供資料接口，由前台通過Ajax通路實作資料互動在沒有資料的情況下，向後端索要一份靜态資料，或者自己模拟一份mock資料。

當傳回資料的格式不統一時，編寫映射檔案對資料進行映射。

4、在iOS模拟器中，如何進行重新整理？

選擇模拟器中的 Hardware→ Keyboard→ Connect Hardware Keyboard即可

5、如何在 Chrome控制台中打開 paint flashing？

打開開發者工具，按鍵盤上的Esc鍵打開控制台面闆，選擇 rendering标簽欄，即可看到 paint flashing選項。

6、Chrome開發者工具中，常用的面闆有哪幾個？

有以下幾個

• Element：主要用來調試網頁中的HTML标簽代碼和CSS樣式代碼。
• Network：檢視網頁的HTTP通信情況，包括Method、Type、Timeline（網絡請求的時間響應情況）等。
• Source：檢視 JavaScript檔案，調試 JavaScript代碼。
• Timeline：檢視 JavaScript的執行時間、頁面元素渲染時間等。
• Profiles：檢視網頁的性能，比如CPU和記憶體消耗。
• Resources：檢視加載的各種資源檔案，如 JavaScript檔案、CSS檔案、圖檔等。

Audits：分析目前網頁，快速地分析出哪些資源被使用、哪些資源沒有被使用，然後提出建議。

Console：檢視錯誤資訊，列印調試資訊，調試 JavaScript代碼，檢視 JavaScript API。

7、如何調試 JavaScript代碼？

調試方式如下

（1） Javascript斷點調試。

斷點可以讓程式在需要的地方中斷，進而友善程式員分析。也可以在一次調試中設定斷點，下一次隻須讓程式自動運作到設定斷點的位置，便可在上次設定斷點的位置中斷，這極大地友善了調試，同時節省了時間。

JavaScript斷點調試，即是在浏覽器開發者工具中為 JavaScript代碼添加斷點，讓JavaScript執行到某一特定位置停住，友善開發者對該處代碼段進行分析和調試。

（2） debugger斷點調試。

通過在代碼中添加“ debugger”語句，當代碼執行到該語句的時候就會自動插入斷點。

（3）DOM斷點調試DOM斷點就是在DOM元素上添加斷點，進而達到調試的目的

8、如何進行響應式測試？

響應式測試特别簡單，通過改變視窗大小（也就是縮放浏覽器）即可測試。當然，當在CSS中設定 Media Queries判斷條件時要使用max- width才行，如果使用max- device- width則會根據裝置的螢幕尺寸來判斷。

9、如何用 Chrome模拟裝置螢幕尺寸？

如果需要測試某種明确的機型， Chrome新版的 Emulation就可以派上用場了。

如果 Emulation面闆需要模拟地理位置、加速計等功能，打開 DevTools界面後按下Esc鍵即可打開分裂視圖。打開 DevTools界面之後，單擊“手機圖示”即可進入 Chrome手機模拟器。

10、如何進行 Android虛拟機測試？

在計算機上安裝 Android虛拟機，就可以用虛拟機打開進行測試，例如以下虛拟機。

• Genymotion 

Genymotion是一個優秀的 Android虛拟機。因為它基于VirtualBox核心，是以要先安裝VirtualBox，然後新增賬號 Genymotion，可以免費使用，但是功能有限制。

• Parallels 

Parallels是基于Mac平台的虛拟機，使用它建立虛拟機的時候，可以直接下載下傳Android系統并安裝。

11、如何進行 Android真機調試？

測試機安裝 Chrome for Android後才可以使用 Chrome遠端調試這項功能。

首先，用資料線将 Android測試機連接配接到計算機上，打開測試機上面“開發者選項”中的“USB調試”功能。在 Android4.2+系統上“開發者選項”預設是隐藏的，是以需要先開啟“開發者選項”。

然後，在桌面版 Chrome中打開 chrome://inspect即可查找你的裝置，在裝置上的Chrome中打開網頁即可。接下來，就可以用桌面版 Chrome Devtools調試移動裝置上的頁面了。

此外，在本地用 Node. js或者其他語言開啟一個本地伺服器，通過端口轉接讓移動裝置直接通路本機IP位址上的頁面，再配合 LiveReload、 Browser Sync之類的工具，自動重新整理。

12、你使用過 Weinre調試工具嗎？

Weinre是一個簡單、好用的調試工具。它會在本地建立一個監聽伺服器，并提供一個 JavaScript程式，你隻用在需要測試的頁面中加載這段 JavaScript程式，就可以被Weinre監聽到，在 Inspect面闆中調試這個頁面。

13、你使用過 OS Simulator調試工具嗎？

ios Simulator是 Xcode開發工具内置的ioS模拟器，該功能僅能在Mac系統下使用。

14、如何對OS裝置進行真機調試？

首先需要在 iPhone等裝置上設定一下 Safari浏覽器，開啟調試功能。然後，使用資料線連接配接計算機，在裝置上用 Safari浏覽器打開需要調試的頁面。接下來，在桌面版的 Safari開發選項中即可看到此頁面，并進行調試但是要調試本地網站，你可能要将手機與計算機連在一個區域網路内，然後輸入區域網路IP位址進行調試。

15、如何使用MIHToo進行遠端調試？

MIHTool是一個App，可以直接安裝到你的iOS裝置裡，然後内置一個簡單的浏覽器就可以打開測試頁面。當它開啟時，它會自動向頁面中插入 Weinre的 JavaScript程式，并告知 Weinre控制台URL等資訊，讓你可以通路并進行調試該頁面。它還提供了一個公共的 Weinre調試服務，生成對應的連結，打開即可調試。

16、如何對IE浏覽器進行網頁調試？

可以通過以下工具進行調試。

SuperPreview，主要用于HTML代碼、CSS代碼的調試和各個浏覽器（目前隻能針對IE6~IE8）的頁面呈現測試。

Internet Explorer Collection，主要用于 Internet Explorer浏覽器（IEl~IE8）各個版本的頁面呈現測試。

Developer Toolbar，主要用于HTML代碼、CSS代碼和 JavaScript代碼的調試。

IE WebDeveloper，主要用于HTML代碼、CSS代碼和 JavaScript代碼的調試。

IE Web Developer可以讓你檢查和編輯 HTML DOM，顯示錯誤資訊、日志資訊，顯網站源代碼，監視DHTML事件和HTTP流量。它的功能可以和火狐中的Firebug相媲美，甚至有些功能還強于 Firebug。

 IETester，主要用于 Internet Explorer浏覽器各個版本的頁面呈現測試。

VS2008，主要用于 JavaScript代碼的調試。

DebugBar，主要用于HTML代碼、CSS代碼和 JavaScript代碼的調試。

17、你知道哪些開發工具？

開發工具一般分為兩種類型：文本編輯器和內建開發環境（IDE）

常用的文本編輯器有 Sublime text、 Notepad++、 EditPlus等。

常用的IDE有 WebStorm、 Intellij IDEA、 Eclipse等。

18、請介紹一下YSlow。

首先， YSlow是一個工具，也可以認為它是一個插件，它是基于 Mozilla Firefox上 Firebug插件的一個插件。

它出現的主要目的就是檢測頁面的性能。它讓使用者可以就近取得所需的内容，解決網絡擁擠的狀況，提髙使用者通路網站的響應速度。其次，雅虎在 Etags的配置上也有獨特之處，它聲明網頁對象過期。

也就是說，當使用者從伺服器取資料的時候，如果檔案變化了，就給他回報新的檔案。如果檔案沒有變化，隻須告訴用戶端沒有變化即可，不必再把檔案取回來，這樣就節省了大量的網絡帶寬和資源。

另外隻要将那些在加載過程中要執行的腳本放到底部，就可以實作最大數量的并行下載下傳。

19、如何讓 WebStrom忽略 node_modules的索引？

WebStrom在打開一個項目的時候會有一個索引過程。如果計算機配置不高，打開一個帶有 node_modules檔案夾的項目，那簡直就是一場“災難”。為了提高打開速度，避免每次“災難”的重制，可以在菜單欄中選擇File→ Setting→ Editor→ File types→ Ignore files and folders。