逐步解說：建立、編輯和維護自動程式碼 UI 測試

發行項
06/08/2015

在這個逐步解說中，您將建立簡單的 Windows Presentation Foundation (WPF) 應用程式，以示範如何建立、編輯和維護自動程式碼 UI 測試。本逐步解說提供解決方案用來修正各種因時間問題和控制項重構而中斷的測試。

必要條件

在本逐步解說中，您將會需要：

Visual Studio Ultimate 或 Visual Studio Premium。

建立簡單 WPF 應用程式

在 [檔案] 功能表上，指向 [新增]，然後選取 [專案]。

[新增專案] 對話方塊隨即出現。
在 [已安裝] 窗格中，展開 [Visual C#]，然後選取 [Windows 桌面]。
在中間窗格上方，檢查目標 Framework 下拉式清單是否設定為 [.NET Framework 4.5]。
在中間窗格中選取 [WPF 應用程式] 範本。
在 [名稱] 文字方塊中輸入 SimpleWPFApp。
指定要儲存專案的資料夾。在 [位置] 文字方塊中輸入資料夾的名稱。
選擇 [確定]。

WPF Designer for Visual Studio 隨即開啟，並顯示專案的 MainWindow。
如果目前未開啟工具箱，請開啟它。選擇 [檢視] 功能表，然後選擇 [工具箱]。
在 [所有 WPF 控制項] 區段底下，將 [Button]、[CheckBox] 和 [ProgressBar] 控制項拖曳至設計介面中的 MainWindow。
選取 [Button] 控制項。在 [屬性] 視窗中，將 [Name] 屬性的值從 <No Name> 變更為 button1。然後將 [Content] 屬性的值從 Button 變更為 Start。
選取 [ProgressBar] 控制項。在 [屬性] 視窗中，將 [Name] 屬性的值從 <No Name> 變更為 progressBar1。然後將 [Maximum] 屬性的值從 100 變更為 10000。
選取 [Checkbox] 控制項。在 [屬性] 視窗中，將 [Name] 屬性的值從 <No Name> 變更為 checkBox1，然後清除 [IsEnabled] 屬性。
按兩下按鈕控制項以加入 Click 事件處理常式。

MainWindow.xmal.cs 會顯示在 [程式碼編輯器] 中，而且游標位於新的 button1_Click 方法。

在 MainWindow 類別的頂端，加入一個委派。這個委派將用於進度列。若要加入委派，請加入下列程式碼：

public partial class MainWindow : Window
{
        private delegate void ProgressBarDelegate(System.Windows.DependencyProperty dp, Object value);        

    public MainWindow()
    {

        InitializeComponent();
    }

在 button1_Click 方法中，加入下列程式碼：

private void button1_Click(object sender, RoutedEventArgs e)
{
    double progress = 0;

    ProgressBarDelegate updatePbDelegate =
        new ProgressBarDelegate(progressBar1.SetValue);

    do
    {
        progress ++;

        Dispatcher.Invoke(updatePbDelegate,
            System.Windows.Threading.DispatcherPriority.Background,
            new object[] { ProgressBar.ValueProperty, progress });
        progressBar1.Value = progress;
    }
    while (progressBar1.Value != progressBar1.Maximum);

    checkBox1.IsEnabled = true;
}

儲存檔案。

確認 WPF 應用程式執行無誤。

在 [偵錯] 功能表上，選取 [開始偵錯] 或按 F5。
請注意，會停用核取方塊控制項。選擇 [開始]。

進度列幾分鐘後應該 100% 完成。
您現在可以選取核取方塊控制項。
關閉 SimpleWPFApp。

為 SimpleWPFApp 建立和執行自動程式碼 UI 測試

找出先前建立的 SimpleWPFApp 應用程式。這個應用程式預設位置是：C:\Users\<username>\Documents\Visual Studio 2013\Projects\SimpleWPFApp\SimpleWPFApp\bin\Debug\SimpleWPFApp.exe
建立 SimpleWPFApp 應用程式的桌面捷徑。以滑鼠右鍵按一下 SimpleWPFApp.exe，然後選取 [複製]。在桌面上按一下滑鼠右鍵，再選取 [貼上捷徑]。

提示

使用應用程式的捷徑可以輕鬆加入或修改應用程式的自動程式碼 UI 測試，因為它能讓您快速啟動應用程式。
在 [方案總管] 中，以滑鼠右鍵按一下方案，選擇 [加入]，然後選取 [新增專案]。

[加入新的專案] 對話方塊隨即出現。
在 [已安裝] 窗格中，展開 [Visual C#]，然後選取 [測試]。
在中間窗格中選取 [自動程式碼 UI 測試專案] 範本。
選擇 [確定]。

在 [方案總管] 中，名為 CodedUITestProject1 的新自動程式碼 UI 測試專案會加入至您的方案。

[產生自動程式碼 UI 測試的程式碼] 對話方塊隨即出現。
選取 [錄製動作、編輯 UI 對應或加入判斷提示] 選項，然後選擇 [確定]。

[UIMap – 自動程式碼 UI 測試產生器] 隨即顯示，並將 Visual Studio 視窗最小化。

如需對話方塊選項的詳細資訊，請參閱建立自動程式碼 UI 測試。
選擇 [UIMap - 自動程式碼 UI 測試產生器] 上的 [開始錄製]。

您可以視需要暫停錄製 (例如，如果您需要處理傳入的電子郵件)。

警告

將會錄製所有在桌面上執行的動作。如果您執行的動作可能會導致在錄製中包括敏感性資料，則請暫停錄製。
使用桌面捷徑啟動 SimpleWPFApp。

和前面一樣，請注意，會停用核取方塊控制項。
選擇 SimpleWPFApp 中的 [開始]。

進度列幾分鐘後應該 100% 完成。
核取現在已啟用的核取方塊控制項。
關閉 SimpleWPFApp 應用程式。
選擇 [UIMap - 自動程式碼 UI 測試產生器] 中的 [產生程式碼]。
在 [方法名稱] 中輸入 SimpleAppTest，然後選擇 [加入和產生]。自動程式碼 UI 測試幾分鐘後會出現並加入至方案。
關閉 [UIMap - 自動程式碼 UI 測試產生器]。

CodedUITest1.cs 檔案隨即出現在 [程式碼編輯器] 中。
儲存您的專案。

提示
使用應用程式的捷徑可以輕鬆加入或修改應用程式的自動程式碼 UI 測試，因為它能讓您快速啟動應用程式。

警告
將會錄製所有在桌面上執行的動作。如果您執行的動作可能會導致在錄製中包括敏感性資料，則請暫停錄製。

執行自動程式碼 UI 測試

從 [測試] 功能表中，選擇 [Windows]，然後選擇 [測試總管]。
從 [建置] 功能表中，選擇 [建置方案]。
在 CodedUITest1.cs 檔案中找出 [CodedUITestMethod] 方法，並按一下滑鼠右鍵，然後選取 [執行測試]，或從 [測試總管] 中執行測試。

當自動程式碼 UI 測試執行時，會顯示 SimpleWPFApp。它會處理您在先前程序執行的步驟。但是，當這個測試嘗試選取核取方塊控制項的核取方塊時，[測試結果] 視窗會顯示該測試失敗。這是因為這個測試嘗試選取核取方塊，但是一直到在進度列 100% 完成之後才發現核取方塊控制項已停用。您可以使用各種可供自動程式碼 UI 測試使用的 UITestControl.WaitForControlXXX() 方法，來修正這個 (或類似) 問題。下一個程序將示範使用 WaitForControlEnabled() 方法來修正導致這個測試失敗的問題。如需詳細資訊，請參閱讓自動程式碼 UI 測試在播放期間等候特定事件。

編輯和重新執行自動程式碼 UI 測試

在 [測試總管] 視窗中，選取失敗的測試，並在 [StackTrace] 區段中選擇 [UIMap.SimpleAppTest()] 的第一個連結。

UIMap.Designer.cs 檔案隨即開啟，而且錯誤點反白顯示在程式碼中：

// Select 'CheckBox' check box
uICheckBoxCheckBox.Checked = this.SimpleAppTestParams.UICheckBoxCheckBoxChecked;

若要修正這個問題，您可以使用 WaitForControlEnabled() 方法，讓自動程式碼 UI 測試先等候 [CheckBox] 控制項完成啟用後再繼續進行至這一行。

警告
請勿修改 UIMap.Designer.cs 檔案。每次您使用 [UIMap - 自動程式碼 UI 測試產生器] 產生程式碼時，對 UIMapDesigner.cs 檔案中的程式碼所做的變更都會被覆寫。如果您需要修改錄製的方法，必須將它複製到 UIMap.cs 檔案並重新命名。UIMap.cs 檔案可用來覆寫 UIMapDesigner.cs 檔案中的方法和屬性。您必須移除 Coded UITest.cs 檔案中原始方法的參考，並將它取代為重新命名的方法名稱。

請勿修改 UIMap.Designer.cs 檔案。每次您使用 [UIMap - 自動程式碼 UI 測試產生器] 產生程式碼時，對 UIMapDesigner.cs 檔案中的程式碼所做的變更都會被覆寫。如果您需要修改錄製的方法，必須將它複製到 UIMap.cs 檔案並重新命名。UIMap.cs 檔案可用來覆寫 UIMapDesigner.cs 檔案中的方法和屬性。您必須移除 Coded UITest.cs 檔案中原始方法的參考，並將它取代為重新命名的方法名稱。

在 [方案總管] 中，找出自動程式碼 UI 測試專案中的 UIMap.uitest。
開啟 [UIMap.uitest] 的捷徑功能表，並選擇 [開啟]。

此自動程式碼 UI 測試隨即在 [自動程式碼 UI 測試編輯器] 中顯示。您現在可以檢視及編輯自動程式碼 UI 測試。
在 [UI 動作] 窗格中，選取要移至 UIMap.cs 或 UIMap.vb 檔案的測試方法 (SimpleAppTest)，以促進自訂程式碼功能，這樣一來，當測試程式碼重新編譯時，就不會覆寫自訂程式碼。
選擇 [自動程式碼 UI 測試編輯器] 工具列上的 [移動程式碼] 按鈕。
Microsoft Visual Studio 對話方塊隨即顯示。它會警告此方法將從 UIMap.uitest 檔案移至 UIMap.cs 檔案，而且您將無法再使用 [自動程式碼 UI 測試編輯器] 編輯此方法。選擇 [是]。

測試方法就會從 UIMap.uitest 檔案移除，不再顯示在 [UI 動作] 窗格中。若要編輯移動的測試檔案，請從 [方案總管] 開啟 UIMap.cs 檔案。
在 Visual Studio 工具列上，選擇 [儲存]。

測試方法的更新就會儲存在 UIMap.Designer 檔案中。

警告

一旦移動方法，便無法使用 [自動程式碼 UI 測試編輯器] 來編輯方法。您必須使用 [程式碼編輯器] 加入及維護自訂程式碼。
將這個方法從 SimpleAppTest() 重新命名為 ModifiedSimpleAppTest()

警告
一旦移動方法，便無法使用 [自動程式碼 UI 測試編輯器] 來編輯方法。您必須使用 [程式碼編輯器] 加入及維護自訂程式碼。

將下列 using 陳述式加入至這個檔案：

using Microsoft.VisualStudio.TestTools.UITesting.WpfControls;

將下列 WaitForControlEnabled() 方法加入至先前識別出有問題的那行程式碼前面：

uICheckBoxCheckBox.WaitForControlEnabled();

// Select 'CheckBox' check box
uICheckBoxCheckBox.Checked = this.SimpleAppTestParams.UICheckBoxCheckBoxChecked;

在 CodedUITest1.cs 檔案中找出 [CodedUITestMethod] 方法，然後將原始 SimpleAppTest() 方法的參考標記為註解或重新命名，再將它取代為新的 ModifiedSimpleAppTest()：

[TestMethod]
        public void CodedUITestMethod1()
        {
            // 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
            //this.UIMap.SimpleAppTest();
            this.UIMap.ModifiedSimpleAppTest();
        }

在 [建置] 功能表上，選擇 [建置方案]。
以滑鼠右鍵按一下 [CodedUITestMethod] 方法，然後選取 [執行測試]。
這次自動程式碼 UI 測試成功完成測試中的所有步驟，而且 [測試總管] 視窗中會顯示 [成功]。

重構 SimpleWPFApp 中的控制項

在 MainWindow.xaml 檔案中，選取設計工具中的按鈕控制項。
在 [屬性] 視窗頂端，將 [Name] 屬性值從 button1 變更為 buttonA。
在 [建置] 功能表上，選擇 [建置方案]。
在 [測試總管] 中，執行 [CodedUITestMethod1]。

測試失敗，因為自動程式碼 UI 測試找不到 UIMap 中原始對應為 button1 的按鈕控制項。重構是以這種方式影響自動程式碼 UI 測試。
在 [測試總管] 視窗的 [StackTrace] 區段中，選擇 [UIMpa.ModifiedSimpleAppTest()] 旁邊的第一個連結。

UIMap.cs 檔案隨即開啟。錯誤點反白顯示在程式碼中：
```
// Click 'Start' button
Mouse.Click(uIStartButton, new Point(27, 10));
```
請注意，之前在這個程序中的這一行程式碼是使用 UiStartButton，這是重構前的 UIMap 名稱。

若要修正此問題，您可以使用 [自動程式碼 UI 測試產生器] 將重構的控制項加入至 UIMap。您可以將測試的程式碼更新為使用這個程式碼，如下一個程序所示。

對應重構的控制項以及編輯和重新執行自動程式碼 UI 測試

在 CodedUITest1.cs 檔案的 [CodedUITestMethod1()] 方法中，按一下滑鼠右鍵再選取 [產生自動程式碼 UI 測試的程式碼]，然後選擇 [使用自動程式碼 UI 測試產生器]。

[UIMap - 自動程式碼 UI 測試產生器] 隨即出現。
使用先前建立的桌面捷徑，執行先前建立的 SimpleWPFApp 應用程式。
在 [UIMap - 自動程式碼 UI 測試產生器] 上，將交叉線工具拖曳至 SimpleWPFApp 上的 [Start] 按鈕。

[Start] 按鈕被封入藍色方塊中，而 [自動程式碼 UI 測試產生器] 需幾秒鐘的時間處理所選控制項的資料並顯示控制項屬性。請注意，[AutomationUId] 已命名為 [buttonA]。
在控制項的屬性中，選擇左上角的箭號展開 [UI 控制項對應]。請注意，[UIStartButton1] 處於選取狀態。
選擇工具列中的 [將控制項加入至 UI 控制項對應]。

視窗底部的狀態會顯示 [選取的控制項已經加入到此 UI 控制項對應] 來確認動作。
選擇 [UIMap – 自動程式碼 UI 測試產生器] 中的 [產生程式碼]。

[自動程式碼 UI 測試產生器 - 產生程式碼] 隨即出現，並帶有注意事項，指出不需要新方法，而且只會針對 UI 控制項對應的變更產生程式碼。
選擇 [產生]。
關閉 SimpleWPFApp.exe。
關閉 [UIMap - 自動程式碼 UI 測試產生器]。

[UIMap - 自動程式碼 UI 測試產生器] 需幾秒鐘的時間處理 UI 控制項對應變更。
在 [方案總管] 中，開啟 UIMap.Designer.cs 檔案。

在 UIMap.Designer.cs 檔案中，找出 UIStartButton1 屬性。請注意，SearchProperties 已設定為 "buttonA"：

public WpfButton UIStartButton1
        {
            get
            {
                if ((this.mUIStartButton1 == null))
                {
                    this.mUIStartButton1 = new WpfButton(this);
                    #region Search Criteria
                    this.mUIStartButton1.SearchProperties[WpfButton.PropertyNames.AutomationId] = "buttonA";
                    this.mUIStartButton1.WindowTitles.Add("MainWindow");
                    #endregion
                }
                return this.mUIStartButton1;
            }
        }

您現在可以修改自動程式碼 UI 測試來使用新對應的控制項。如先前的程序所述，如果要在自動程式碼 UI 測試中覆寫任何方法或屬性，必須在 UIMap.cs 檔案中這麼做。

在 UIMap.cs 檔案中，加入建構函式並指定 UIStartButton 屬性的 SearchProperties 屬性，以使用值為的 AutomationID 屬性：

public UIMap()
        {
            this.UIMainWindowWindow.UIStartButton.SearchProperties[WpfButton.PropertyNames.AutomationId] = "buttonA";
        }