(BBD) UI Testing trên iOS 9 và XCode 7

UI Testing (User Interface Testing) còn được gọi là BDD (behavior-driven development) hay Test Automation. Nói tóm lại khi nào bạn sử dụng UI Testing vào dự án bạn đang làm? Theo Apple thì những tiêu chí dưới đây sẽ cần để ứng dụng UI Testing:
- Bổ sung thêm Unit Test cho kịch bản (scenario) hay hành động (actions) mà bạn thường xuyên phải làm hay luồng quan trọng của dự án (important application flow).
- Bổ sung thêm tính chính xác cho hệ thống.
- Có thể bao khối hết những khía cạnh của test chức năng (functionality unit test).
Vì thế tuỳ theo từng dự án bạn làm cần chất lượng cao hơn thì bạn nên ứng dụng UI Testing và để luôn luôn đảm bảo hệ thống bạn chạy một cách chính xác và đúng đắn.

Trước khi Apple giới thiệu UI Testing trong WWDC 2015 thì cũng có những framework có thể làm được như vậy như:
- UIAutomation: của Apple phát triển, viết bằng ngôn ngữ javascript. Viết code trên này rất bất tiện.
- Cedar: làm việc trên Ruby on Rails. Theo tác giả của trang blog này đánh giá framework này rất tốt. Mình chưa thử sử dụng nhưng theo kinh nghiệm mình làm trước giờ mấy framework mà không do Apple phát triển có thể mỗi lần update iOS mới có thể sẽ không dùng được. Vì thể mình hay ưu tiên dùng những gì do Apple phát triển, nếu Apple chưa hỗ trợ mình mới dùng framework ở ngoài.
- Frank: từ lâu rồi không còn hỗ trợ nữa.
- KIF: bị phá vỡ mỗi phiên bản mới iOS.
- Subliminal: Không chạy ổn định bằng dòng lệnh (command line).

Sau đây mình sẽ giới thiệu cách sử dụng UI Testing trên XCode 7.
Bạn muốn sử dụng UI Testing thì phải dùng XCode 7 và ứng dụng phải viết trên iOS 9 hoặc OS X 10.11.

3 đối tượng chính được thêm vào XCTest mà bạn cần quan tâm là:
- XCUIApplication
- XCUIElement
- XCUIElementQuery

Bước 1: Khởi tạo dự án tên "UITestingDemo", mình chọn viết bằng ngôn ngữ Objective-C (Swift tương tự như vậy) và check vào "Include UI Tests" như sau:

XCode sẽ sinh ra thêm 1 target dành cho UI Testing.

Bước 2: Tạo giao diện màn hình như sau:

Nhấn vào dấu ('+') sẽ chuyển sang màn hình thêm device:

Bạn có thể tải source code ban đầu tại đây:

XCode mới hỗ trợ công cụ tự sinh ra code test UI Apple gọi đó là UI Recording như hình sau:

Bước 3: Bạn viết tên hàm test để xoá hết những cell trên table bằng cách nhấn con trỏ chuột vào phương thức test, sau đó nhấn vào button "Recording". Ứng dụng sẽ tự động chạy lên, bạn thao tác xoá cell trên màn hình như hình bên dưới:

Sau đó XCode sẽ tự động sinh code như hình ở bên trên.
Bạn có để ý thấy dòng số 45 có 1 dấu checkbox nhỏ. Tức là chỗ đó XCode có thể cho phép bạn chọn cách viết khác ngoài cách mà XCode gợi ý cho bạn:

Bạn nhấn vào checkbox đó sẽ hiển thị màn hình như sau:

Sau đó bạn có thể chạy Test, XCode sẽ tự động test như sau:

Bạn có thể tuỳ chỉnh lại code đó như sau để kiểm tra xem những cells đó có được xoá hết hay không bằng cách sau:

- (void)testUIDeleteAllCellsOnTable {
    XCUIApplication* app = [[XCUIApplication alloc] init];
    [app launch];
    XCUIElement* devicesNavigationBar = app.navigationBars[@"Devices"];
    [devicesNavigationBar.buttons[@"Edit"] tap];
    
    XCUIElementQuery* tablesQuery = app.tables;
    while (tablesQuery.cells.count > 0) {
        int count = (int)tablesQuery.cells.count;
        XCUIElement* cell = [tablesQuery.cells elementBoundByIndex:0];
        XCUIElement* deletedCell = [cell.buttons matchingPredicate:[NSPredicate predicateWithFormat:@"label BEGINSWITH 'Delete'"]].element;
        [deletedCell tap];
        XCUIElement* deleteButton = [[[cell childrenMatchingType:XCUIElementTypeButton] matchingIdentifier:@"Delete"] elementBoundByIndex:0];
        [deleteButton tap];
        XCTAssertEqual(tablesQuery.cells.count, (count - 1));
    }
    XCTAssertEqual(tablesQuery.cells.count, 0);//Empty
    [devicesNavigationBar.buttons[@"Done"] tap];
}

Vì sao lại viết "label BEGINSWITH 'Delete'" như vậy? Mình trỏ debug và print log của đối tượng cell sẽ sinh ra cấu trúc như sau:

Cấu trúc chính của ứng dụng như sau: Application -> Window -> Other -> Other -> Other -> Table -> Cell:

Path to element:
 →Application 0x7fa94be34ea0: {{0.0, 0.0}, {375.0, 667.0}}, label: 'UITestingDemo'
  ↳Window 0x7fa94be35360: Main Window, {{0.0, 0.0}, {375.0, 667.0}}
   ↳Other 0x7fa94be359f0: traits: 8589934592, {{0.0, 0.0}, {375.0, 667.0}}
    ↳Other 0x7fa94be3a7f0: traits: 8589934592, {{0.0, 0.0}, {375.0, 667.0}}
     ↳Other 0x7fa94be3af50: traits: 8589934592, {{0.0, 0.0}, {375.0, 667.0}}
      ↳Table 0x7fa94be3b6d0: traits: 35192962023424, {{0.0, 0.0}, {375.0, 667.0}}
       ↳Cell 0x7fa94be3beb0: traits: 8589934592, {{0.0, 64.0}, {375.0, 44.0}}

Từ cell có những thành phần như Delete Button, Static Text, Reorder Button:

in debug ra như sau:

Element subtree:
 →Cell 0x7fa94be3beb0: traits: 8589934592, {{0.0, 64.0}, {375.0, 44.0}}
    Button 0x7fa94be3c630: traits: 8589934593, {{0.0, 64.0}, {47.0, 44.0}}, label: 'Delete iPhone 5'
    StaticText 0x7fa94be3cdb0: traits: 8589934656, {{54.0, 64.0}, {266.0, 43.5}}, label: 'iPhone 5'
    Button 0x7fa94be3d500: traits: 283467841537, {{323.0, 64.0}, {52.0, 44.0}}, label: 'Reorder iPhone 5'

Khi nhấn và button "Delete iPhone 5" thì sẽ xuất hiện màn hình sau:

vì thế ta phải viết code sau để nhấn vào button "Delete":

XCUIElement* deleteButton = [[[cell childrenMatchingType:XCUIElementTypeButton] matchingIdentifier:@"Delete"] elementBoundByIndex:0];
[deleteButton tap];

Dựa trên cách viết như trên mình viết thêm đoạn code di chuyển những cell của table như sau:

- (void)testUIReorderCells {
    XCUIApplication* application = [[XCUIApplication alloc] init];
    [application launch];
    XCUIElement* devicesNavigationBar = application.navigationBars[@"Devices"];
    [devicesNavigationBar.buttons[@"Edit"] tap];
    
    XCUIElementQuery* tables = application.tables;
    int itemCount = (int)tables.cells.count;
    int counter = 0;
    while (counter < (itemCount - 1)) {
        XCUIElement* cell = [tables.cells elementBoundByIndex:counter];
        XCUIElement* reorderButton = [cell.buttons matchingPredicate:[NSPredicate predicateWithFormat:@"label BEGINSWITH 'Reorder'"]].element;
        int nextCounter = (counter + 1);
        XCUIElement* cell1 = [tables.cells elementBoundByIndex:nextCounter];
        XCUIElement* reorderButton1 = [cell1.buttons matchingPredicate:[NSPredicate predicateWithFormat:@"label BEGINSWITH 'Reorder'"]].element;
        [reorderButton pressForDuration:2 thenDragToElement:reorderButton1];
        counter++;
    }
    [devicesNavigationBar.buttons[@"Done"] tap];
}

Sau khi chạy sẽ như sau:

Những lưu ý khi viết code để có thể chạy UI testing 1 cách dễ dàng:

1. Bạn nên thiết lập identifier cho từng control. Vì nếu bạn không thiết lập nó, XCode sẽ tự động lấy theo nội dung text của control đó.
   
2. Trường hợp nếu bạn không thiết lập identifier thì nếu bạn viết bằng ngôn khác tiếng Anh như tiếng Nhật thì XCode sẽ tự động sinh ra text Unicode như sau:

 [app.tables.staticTexts[@"\u79cb\u7530\u770c\u3000\u6e6f\u6ca2\u5e02\u3000\u5b57\u611b\u67d3\u5c71\u3000"] tap];

XCode 7 bị bug dùng ký tự \U để hiển thị, vì thế nếu để tự động tạo thì XCode 7 sẽ báo lỗi như "incomplete universal character name". Bạn nên thay thế hết những ký tự \U thành \u thì sẽ hết báo lỗi và chạy bình thường như tiếng Anh.

Source Code: https://github.com/congpc/UITesting/tree/master

Công cụ dùng để viết: XCode 7, iOS 9

Tài liệu tham khảo:

- https://developer.apple.com/videos/wwdc/2015/?id=406
- http://masilotti.com/ui-testing-xcode-7/