您可以建立使用者介面 (UI) 的自動化測試，這就是所謂的「自動程式碼 UI 測試」(Coded UI Test)。 這些測試會提供 UI 的功能測試和 UI 控制項的驗證。 自動程式碼 UI 測試可讓您測試使用者介面的功能。您可以使用 Microsoft Visual Studio 2010 功能套件 2，記錄網站或 Web 架構應用程式的 UI 動作，以及建立自動程式碼 UI 測試。 您可以使用 Windows Internet Explorer 記錄動作，然後在 Mozilla Firefox 瀏覽器中播放測試。
如需詳細資訊以進一步了解自動程式碼 UI 測試，請參閱使用自動化 UI 測試進行使用者介面測試。
警告
在您完成 Microsoft Visual Studio 2010 功能套件 2 的安裝之後，如果要使用 Mozilla Firefox 的測試封裝，則必須安裝及設定 Test Helper Extension for Mozilla Firefox。 如需詳細資訊，請參閱 HOW TO：安裝適用於 Mozilla Firefox 的測試 Helper 擴充功能.
警告
Firefox 瀏覽器只能用來播放自動程式碼 UI 測試。 不支援在 Firefox 瀏覽器中記錄網站和 Web 應用程式的自動程式碼 UI 測試。
必要條件
在本逐步解說中，您將會需要：
Visual Studio 2010 Ultimate、Visual Studio 2010 Premium 或 Test Professional 2010。
Mozilla Firefox 網頁瀏覽器 3.5 或 3.6 版。
確認已安裝 Microsoft Visual Studio 2010 功能套件 2 和 Test Helper Extension for Mozilla Firefox。 簡介中包含安裝的相關資訊。
建立 Web 應用程式
建立 Web 應用程式
在 Visual Studio 2010 中，按一下 [檔案] 功能表中的 [新增]，然後按一下 [專案]。
[新增專案] 對話方塊隨即出現。
在 [已安裝的範本] 下方，展開您偏好的程式語言，然後按一下 [Web]。
在 Web 專案類型的清單中，選取 [ASP.NET 空白 Web 應用程式]。
.gif "注意事項")
注意事項在此逐步解說中，您將會撰寫最小的程式檔。
在 [名稱] 方塊中，輸入 ColorWebApp。
在 [位置] 方塊中，指定您想要儲存 Web 應用程式的資料夾。
選取 [為方案建立目錄]。
按一下 [確定]。
在 [方案總管] 中，確認選取新的 ColorWebApp 專案。
在 [專案] 功能表上，選擇 [加入新項目]。
[加入新項目] 對話方塊隨即出現。
在項目清單中，選擇 [Web Form]。
在 [名稱] 文字方塊中，輸入 Default.aspx，然後按一下 [加入]。
將控制項加入至 Web 應用程式
將控制項加入至 Web 應用程式
在 [方案總管] 中，以滑鼠右鍵按一下 [Default.aspx]，然後選擇 [設計工具檢視]。
空白網頁隨即出現。
如果沒看到 [工具箱]，請按一下 [檢視] 然後按一下 [工具箱]。
從 [標準] 群組中，請將 RadioButtonList 拖曳到網頁上。
RadioButtonList 控制項便會加入至設計介面中。
在 [RadioButtonList 工作] 動作標記窗格上，按一下 [編輯項目] 連結。
[ListItem 集合編輯器] 隨即出現。
注意事項也可以藉由在 [屬性] 視窗上編輯 [項目] 集合，以顯示 [ListItem 集合編輯器]。
按一下 [加入] 以加入新項目。
在 [ListItem 屬性] 下：
將 [Text] 屬性變更為 [Red]。
將 [Selected] 屬性設定為 [True]。
.png "ListItem 集合編輯器")
按一下 [加入] 以加入其他項目。
在 [ListItem 屬性] 下，將 [Text] 屬性變更為 [Blue]。
按一下 [確定]，關閉 [ListItem 集合編輯器]。
將 Button 拖曳至網頁。 在 [屬性] 視窗中，將 Text 屬性變更為 Submit。
.png "ColorWebApp 設計")
在 [檔案] 功能表上按一下 [全部儲存]。
將網頁加入至 Web 應用程式
將網頁加入至 Web 應用程式
按一下 [專案] 功能表上的 [加入新項目]。
在 [加入新項目] 對話方塊的範本清單中，選取 [Web Form]。 在 [名稱] 中輸入 Red.aspx，然後按一下 [加入]。
在文件視窗的下方，按一下 [設計] 索引標籤切換至 [設計] 檢視。
將 Label 拖曳至網頁。 在 [屬性] 視窗中，將 Text 屬性設定為 Red。 將 ForeColor 屬性設定為 Red。
按一下 [專案] 功能表上的 [加入新項目]。
在 [加入新項目] 對話方塊中，按一下 [Web Form] 範本，並將它命名為 Blue.aspx。 按一下 [加入]。
在文件視窗的下方，按一下 [設計] 索引標籤切換至 [設計] 檢視。
將 Label 拖曳至網頁。 在 [屬性] 視窗中，將 Text 屬性設定為 Blue。 將 ForeColor 屬性設定為 Blue。
按一下 [檔案] 功能表上的 [全部儲存]。
將功能加入至 Web 應用程式
將功能加入至 Web 應用程式
在 [方案總管] 中，以滑鼠右鍵按一下 [Default.aspx]，然後按一下 [設計工具檢視]。
按兩下 [Submit] Button。 Visual Studio 會切換至頁面程式碼，並為 Button 控制項的 Click 事件，建立基本架構事件處理常式。
將下列程式碼加入至事件處理常式：
if (this.RadioButtonList1.SelectedValue == "Blue") { Response.Redirect("Blue.aspx"); } else { Response.Redirect("Red.aspx"); }If RadioButtonList1.SelectedValue = "Blue" Then Response.Redirect("Blue.aspx") Else Response.Redirect("Red.aspx") End If按一下 [檔案] 功能表上的 [全部儲存]。
確認 Web 應用程式正確執行。
警告
這個程序假設 Microsoft Internet Explorer 設為預設網頁瀏覽器。
若要執行 Web 應用程式
在 [方案總管] 中，以滑鼠右鍵按一下 [Default.aspx]，然後按一下 [設定為起始頁]。
按下 CTRL+F5，即可在瀏覽器中執行 Web 應用程式。 您將會看見第一頁。
按一下 [Red]，然後按一下 [Submit]。 如果應用程式運作正確，您會前往另一網頁，其中 Label 寫著 Red。
返回第一頁。
按一下 [Blue]，然後按一下 [Submit]。 如果應用程式運作正確，您會前往另一網頁，其中 Label 寫著 Blue。
請將您的 Web 應用程式位址複製至 [剪貼簿] 或 [記事本] 檔案。 例如，其位址可能像這樣：https://localhost:<PortNumber>/Default.aspx
關閉瀏覽器。
為 Web 應用程式建立和執行自動程式碼 UI 測試
若要建立及執行自動程式碼 UI 測試
在 [方案總管] 中，以滑鼠右鍵按一下方案、按一下 [加入]，然後選取 [新增專案]。
[加入新的專案] 對話方塊隨即出現。
在 [已安裝的範本] 窗格中，展開 [Visual C#] 或 [Visual Basic]，然後選取 [測試]。
在中間窗格中選取 [測試專案] 範本。
按一下 [確定]。
在 [方案總管] 中，名為 [TestProject1] 的新測試專案會加入方案中，而 UnitTest1.cs 或 UnitTest1.vb 檔案會出現在 [程式碼編輯器] 中。 您可以關閉 UnitTest1 檔案，因為本逐步解說不使用這個檔案。
在 [方案總管] 中，以滑鼠右鍵按一下 [TestProject1]，然後按一下 [加入]，再選取 [自動程式碼 UI 測試]。
[產生自動程式碼 UI 測試的程式碼] 對話方塊隨即出現。
選取 [錄製動作、編輯 UI 對應或加入判斷提示] 選項，然後按一下 [確定]。
[UIMap - 自動程式碼 UI 測試產生器] 隨即出現。
如需對話方塊之選項的詳細資訊，請參閱 HOW TO：建立自動程式碼 UI 測試。
按一下 [UIMap - 自動程式碼 UI 測試產生器] 上的 [開始錄製]。 [自動程式碼 UI 測試產生器] 幾分鐘後會準備就緒。
.png "開始錄製 UI")
啟動 Internet Explorer。
在 Internet Explorer 的網址列中，輸入您在先前程序中複製的 Web 應用程式位址。 例如：
https://localhost:<PortNumber>/Default.aspx
(選擇性) 按 [Red]、[Blue] 和瀏覽器的上一頁按鈕，巡覽 Web 應用程式。
關閉 Internet Explorer。
按一下 [UIMap - 自動程式碼 UI 測試產生器] 上的 [產生程式碼]。
在 [方法名稱] 中輸入 SimpleWebAppTest，然後按一下 [加入和產生]。 自動程式碼 UI 測試幾分鐘後會出現並加入至方案。
.png "產生程式碼")
關閉 [UIMap - 自動程式碼 UI 測試產生器]。
CodedUITest1.cs 檔案隨即出現在 [程式碼編輯器] 中。
確認自動程式碼 UI 測試在 Internet Explorer 中正確播放
在 CodedUITest1.cs 檔案中找出 [CodedUITestMethod1] 方法，然後按一下滑鼠右鍵再選取 [執行測試]。
當自動程式碼 UI 測試執行時，會顯示 ColorWebApp。 它會處理您在先前程序執行的步驟。
加入屬性以指定 Firefox 播放並重新執行自動程式碼 UI 測試
在 CodedUITest1.cs 檔案中，找出使用 TestInitializeAttribute 的 MyTestInitialize() 方法，取消註解程式碼並加入屬性值設為 “FireFox” 的 CurrentBrowser，如下列程式碼所示：
秘訣您可以選擇建立名為 CodedUITestCurrentBrowser、具有值 “Firefox” 的環境變數，然後重新啟動 Visual Studio，而不加入 BrowserWindow 屬性。
////Use TestInitialize to run code before running each test [TestInitialize()] public void MyTestInitialize() { // // To generate code for this test, select "Generate Code for Coded UI Test" from the shortcut menu and select one of the menu items. // // For more information on generated code, see https://go.microsoft.com/fwlink/?LinkId=179463 BrowserWindow.CurrentBrowser = "Firefox"; }' Use TestInitialize to run code before running each test <TestInitialize()> Public Sub MyTestInitialize() ' ' To generate code for this test, select "Generate Code for Coded UI Test" from the shortcut menu and select one of the menu items. ' For more information on generated code, see https://go.microsoft.com/fwlink/?LinkId=179463 ' BrowserWindow.CurrentBrowser = "Firefox" End Sub如需詳細資訊以進一步了解如何使用 TestInitialze() 屬性，請參閱 HOW TO：透過記錄待測應用程式產生自動程式碼 UI 測試。
選取 [測試] 功能表上的 [視窗]，然後按一下 [測試檢視]。在 [測試檢視] 中，選取 [測試名稱] 資料行底下的 [CodedUITestMethod1]，然後按一下工具列中的 [執行選取範圍]。
自動程式碼 UI 測試應該就會使用 Mozilla Firefox 來執行。