一、前言

相信Xamarin免費之後會有更多的人加入進來，這也是我一直以來最希望看到的事，更多的人加入到這個社群中，為這個社群貢獻自己的一份力量，國內當前還沒有一個比較正規或者說是名氣比較大的Xamarin社群，當然這並不是憑靠一個人就能夠完成的，這需要大家一起共享一份力量。因為公司今年採購了Test Cloud，而我將會編寫這一份入門文件來介紹這一技術。

二、正文

1.準備示例程式

這裡為了能夠快速的進入到UI Test的教程中，所以這裡直接提供了對應的Demo程式，只是其中的UI Test部分需要我們自己完善。

點選我下載

因為官方提供的版本比較老了，我們需要修改其中的UITest專案，增加以下引用或升級（通過nuget）：

NUnit（2.6.4）

NUnitTestAdapter（2.0.0）

Xamarin.UITest（1.3.6）

2.執行REPL

開啟之前我們下載的程式，然後開啟“CreditCardValidator.Droid.UITests”專案中的“Tests.cs”檔案，刪除其中其他的測試（除了BeforeEachTest），然後再其中輸入以下內容以執行REPL:

[Test]
public void CreditCardNumber_TooShort_DisplayErrorMessage()
{
        app.Repl();
}

輸入完成後，我們點選下圖所指內容，如果你當前沒有預設的模擬器請選擇或者手動開啟一個：

隨後我們就可以看到REPL打開了，內容如下圖：

當然很多會疑惑這個命令列介面有什麼用，我們可以在寫具體的測試之前，在這個命令中輸入測試下，當然具體的反應我們可以通過模擬器檢視，比如我們需要了解當前介面的元素和結構，可以通過Tree命令查詢，如下所示：

這樣我們就可以檢視到當前介面顯示的元素和結構。

3.等待介面載入

接著上一個步驟，我們再開始測試之前還有一件事要確定。就是如何判斷當前是該測試該執行的時機，這個時候我們就需要依據介面上的某些元素的特徵來判斷，所以我們需要以下API:

  IApp.WaitForElemen:將當前的測試暫停，等待傳入其中的查詢有結果，如果在一定的時間內沒有匹配的查詢則丟擲異常。

  AppQuery.Marked：在Android中該方法將會將id、contentDescription或text屬性中能夠匹配所提供字串的元素找出。

  AppQuery.Text:該方法可以將查詢得出的元素進行過濾，只留下內容匹配的元素

我們通過之前的tree中可以看到其中ID為action_bar_title的TextView控制元件可以作為一個參考的依據，為了驗證其正確性，我們可以通過IApp.Flash來匹配，該方法將會將匹配的元素閃爍，這裡我們通過在REPL中輸入以下命令即可（注意觀察模擬機）：

可以看到ActionBar中的Text閃爍了，這樣我們就已經拿到了可以用來作為依據的前提條件，開啟Tests.cs修改我們之前新增的測試：

[Test]
public void CreditCardNumber_TooShort_DisplayErrorMessage()
{
            app.WaitForElement(c => c.Marked("action_bar_title").Text("Enter Credit Card Number"));
}

這樣我們就能當ActionBar中的Title等於我們規定的內容後才開始測試。

4.輸入卡號

知道了在哪一個點執行測試後，我們就可以開始模擬一些操作。因為我們這個示例演示的是驗證卡號，所以我們第一步需要做的事就是輸入卡號，這裡我們可以通過“EnterText”方法來完成，我們繼續修改Tests.cs檔案的內容如下所示：

[Test]
public void CreditCardNumber_TooShort_DisplayErrorMessage()
{
        app.WaitForElement(c => c.Marked("action_bar_title").Text("Enter Credit Card Number"));
        app.EnterText(c => c.Marked("creditCardNumberText"), new string('9', 15));
}

5.點選按鈕

模擬完輸入之後我們還要點選驗證按鈕才可以出發實際的程式碼執行，然後我們才能夠哦根據對應的結果再進行判斷以保證我們的程式正確運行了，相信對測試有一定基礎的人根據上面的API可以猜測出我們這個API就是“Tap”方法：

    [Test]
public void CreditCardNumber_TooShort_DisplayErrorMessage()
{
        app.WaitForElement(c => c.Marked("action_bar_title").Text("Enter Credit Card Number"));
        app.EnterText(c => c.Marked("creditCardNumberText"), new string('9', 15));

        app.Tap(c => c.Marked("validateButton"));
}

完成點選之後我們繼續往下，還要驗證錯誤提示有沒有顯示。

6.驗證錯誤資訊

其實這個方法跟我們之前驗證是否該執行該測試時一樣的，只是其中的Text內容不一樣而已，對應的修改如下所示：

[Test]
public void CreditCardNumber_TooShort_DisplayErrorMessage()
{
        app.WaitForElement(c => c.Marked("action_bar_title").Text("Enter Credit Card Number"));
        app.EnterText(c => c.Marked("creditCardNumberText"), new string('9', 15));

        app.Tap(c => c.Marked("validateButton"));

        app.WaitForElement(c => c.Marked("errorMessagesText").Text("Credit card number is too short."));
}

 7.執行測試

然後我們執行該測試，可以看到模擬器在模擬我們之前寫的測試了。

我們讀者有Test Cloud的訂閱，則可以將專案改成Release配置，然後右擊UI Test專案點選Run in Test Cloud即可（如下圖）：