顯示具有 UI 標籤的文章。 顯示所有文章
顯示具有 UI 標籤的文章。 顯示所有文章

2011年12月10日 星期六

My iOS UI Automation Testing(自動化測試)

PastedGraphic-1
自動化測試是程式開發中,不可或缺的一環,而 xcode Instruments 裡面的 Automation tool ,便是 iOS UI 的自動化測試工具。
Automation tool 的測試腳本中,可以看得出來編譯完成的 APP,是符合 DOM(Document Object Model) 的。所以測試腳本,也很理所當然找了它最老的夥伴 - Javascript 來調用。

往下閱讀之前,建議一定要先看過...

DOM 雖然強大,但寫測試時卻又嫌囉嗦,要準確取得元件是一件很麻煩的事,看完上述連結,可以知道有兩種取得元件的方式:
  1. 用位置來取得,例如「window.buttons()[0]」,指的是第一個建立出來的 button。
  2. 用「name」來取得,例如「window.buttons()[“login”]」。
第一種方式,元件數量少還好,元件一多,會很容易指錯,而且測試程式碼可讀性幾乎是0,根本不知道到底取得的是哪一個元件。
第二種方式是比較理想的,但必須在 xib 上,或是 Objective-C 程式碼中,另外指定 accessibilityLabel 來命名 DOM 這邊所謂的「name」,也是挺麻煩的。
上述連結有這兩種方式的圖文說明。

突然想到之前寫 RSpec(Ruby 的自動測試框架) 測試 RoR 的時候,所有的操作,都只需要直接使用「肉眼所看到的字」,便可正確取得元件的文字或是進行操作(如點擊),於是便動手進行實作,簡化測試的程式。

https://github.com/alexvollmer/tuneup_js
借用了上述的測試框架,將自己寫的整合了進去,主要寫了三個 function
function haveContent(text) {

    var elements = window.elements();

    

    for (i = 0; i < elements.length; i++) {

        var element = elements[i];

        if (element.name() == text && element.isValid()) {

            return true;

        }

    }

    return false;

}

 

function click_button(name) {

    var buttons = window.buttons();

    

    for (i = 0; i < buttons.length; i++) {

        var button = buttons[i];

        if (button.name() == name) {

            button.tap();

        }

    }

}

 

function fill_in(name, text) {

    var textFields = window.textFields();

    

    for (i = 0; i < textFields.length; i++) {

        var textField = textFields[i];

        if (textField.name() == name) {

            textField.setValue(text);

        }

    }

}

haveContentclick_button 這兩個 function,只需指定肉眼看得到的文字就好,例如
test("Clear Hello", function(app, target) {

     click_button("Clear All");

     assertFalse(haveContent("Hello World"));

});

fill_in 則還是得在 xib 上,或是  Objective-C 程式碼中,另外指定 accessibilityLabel ,讓測試程式可以準確的指定到輸入框中,例如
test("Say Hello", function(app, target) {

     fill_in("name", "World");

     click_button("Say Hello");

     assertTrue(haveContent("Hello World"));

});

其實這三個 function 就可以搞定 95% 的測試了,其餘等需要時再補上,提供完整的範例下載

其它參考資源:

2011年8月27日 星期六

Balsamiq Mockups - 超好用的 UI 設計工具

SNAGHTML2cc098a

 

前些日子在 PTT 上看到 adahsu 版友提供的 Balsamiq Mockups 資源連結,點擊進去下載試用了一會,實在是驚為天人!

 

底下皆以 Web UI 為例(Balsamiq Mockups 也可以用在 Web 以外的設計)

 

首先要特別強調的,就是幾乎零學習門檻這件事情。

我把這個工具丟給職業是會計的朋友玩,她只摸了10分鐘不到就可以順利的拉出想要表達的網頁畫面了。再來把 Link 的影片丟給她看,看完之後,我又解釋個 10 分鐘左右(其實重複講了 n 遍)就知道如何使用 Link 了。也就是說,只要是常用網頁的人,在30分鐘內一定可以上手!

 

使用無負擔,生產速度一流!

用 Dreamweaver、Frontpage…等工具來拉出「簡單的 demo 畫面」其實並不簡單,功能太過強大,使用起來一定較為繁瑣。但 Balsamiq Mockups 幾乎完全沒有任何多餘的操作,一切都是為 Mockup 而生,自然生產力會非常驚人!

 

手繪風格帶來的好處 

  1. 用 Dreamweaver、Frontpage 拉出來的頁面,若不多花點心思配色、貼圖,會非常的單調死板;而手繪風格並不需要為此多下功夫,本身就具有設計感。
  2. 擬真雖然比較接近實際的樣子,但其實 demo 階段的產物與最後成品通常會有落差,容易造成與客戶/老闆的期待不符;而手繪風格很清楚的告訴客戶/老闆這只是 demo。(這點其實要視專案性質)

 

其它

google 下去,其實已經有非常多的人介紹了,但我還是忍不住再雞婆的介紹一次,希望可以讓多點人知道這個好用的工具!(至少我是最近才知道的 Orz…)

PTT 的另一位 kurtisgod 版友說 Axure RP 也很不錯,可以找時間玩玩看。