Angularjs端到端測試與角UI選擇二元素

Question

我有一個部分與利用角度UI中選擇2元http://angular-ui.github.io/

我遇到的問題是，該元素是必需的，雖然我已經順利通過設置字段下面的代碼中，所需的屬性不會被刪除，因爲Angular的模型由於外部變化而不能更新，我不知道如何提供$ scope.apply（）或使用Angular的另一個函數來繼續測試。

首先要允許直接jQuery函數運行：（從How to execute jQuery from Angular e2e test scope?拍攝）

angular.scenario.dsl('jQueryFunction', function() { 
return function(selector, functionName /*, args */) { 
    var args = Array.prototype.slice.call(arguments, 2); 
    return this.addFutureAction(functionName, function($window, $document, done) { 
     var $ = $window.$; // jQuery inside the iframe 
     var elem = $(selector); 
     if (!elem.length) { 
      return done('Selector ' + selector + ' did not match any elements.'); 
     } 
     done(null, elem[functionName].apply(elem, args)); 
    }); 
}; 
}); 

然後更改的字段值：

jQueryFunction('#s2id_autogen1', 'select2', 'open'); 
    jQueryFunction('#s2id_autogen1', 'select2', "val", "US"); 
    jQueryFunction('#s2id_autogen1', 'select2', 'data', {id: "US", text: "United States"}); 
    jQueryFunction('.select2-results li:eq(3)', 'click'); 
    jQueryFunction('#s2id_autogen1', 'trigger', 'change'); 
    jQueryFunction('#s2id_autogen1', 'select2', 'close'); 
    input('request._countrySelection').enter('US'); 

請注意，並非所有這些功能都需要反映了用戶界面的變化，僅僅是我用來試圖獲得這個工作的所有...

Answer 1

我無法得到這個在Karma t est runner，但是在量角器測試套件中，這變得非常容易。

要量角器測試套件內做到這一點我用下面的選擇頁面上的第一選擇2框，並選擇框內的第一個選項：

var select2 = element(by.css('div#s2id_autogen1')); 
select2.click(); 
var lis = element.all(by.css('li.select2-results-dept-0')); 
lis.then(function(li) { 
    li[0].click(); 
}); 

頁面上的下一個選擇2都有一個id s2id_autogen3

Answer 2

我使它在Karma下工作，有以下變化。

添加以下DSL到您的端對端測試文件的頂部：

angular.scenario.dsl('jQueryFunction', function() { 
    return function(selector, functionName /*, args */) { 
    var args = Array.prototype.slice.call(arguments, 2); 
    return this.addFutureAction(functionName, function($window, $document, done) { 
     var $ = $window.$; // jQuery inside the iframe 
     var elem = $(selector); 
     if (!elem.length) { 
     return done('Selector ' + selector + ' did not match any elements.'); 
     } 
     done(null, elem[functionName].apply(elem, args)); 
    }); 
    }; 
}); 

然後在你的情況下使用

it('should narrow down organizations by likeness of name entered', function() { 
    jQueryFunction('#s2id_physicianOrganization', 'select2', 'open'); 
    jQueryFunction('#s2id_physicianOrganization', 'select2', 'search', 'usa'); 
    expect(element('div.select2-result-label').count()).toBe(2); 
}); 

Answer 3

改變選擇2值有時選擇2可能需要時間來加載，尤其是當使用ajax加載的數據。因此，在使用時，量角器，擴大對布萊恩的回答，這裏是我發現是可靠的方法：

function select2ClickFirstItem(select2Id) { 
    var select2 = element(by.css('div#s2id_' + select2Id)); 
    select2.click(); 
    var items = element.all(by.css('.select2-results-dept-0')); 
    browser.driver.wait(function() { 
     return items.count().then(function (count) { 
      return 0 < count; 
     }) 
    }); 
    items.get(0).click(); 
} 

這將使用driver.wait can take a promise as a result的事實。

Answer 4

爲了得到這個工作，我諮詢了兩個Brian的回答和sinelaw，但它還是沒有我的情況下，有兩個原因：

1. 上點擊「DIV＃s2id_autogen1」不打開選擇2輸入對我來說，我使用的選擇器是'div＃s2id_autogen1 a'
2. 獲取select2元素我會得到ElementNotVisibleError，可能是因爲我的select2在引導模式中，所以我明確地等待元素在點擊前可見（可以閱讀我使用這個here的原始提示）。

生成的代碼是：

function select2ClickFirstItem(select2Id) { 
     var select2Input; 

     // Wait for select2 element to be visible 
     browser.driver.wait(function() { 
      select2Input = element(by.css('#s2id_' + select2Id + ' a')); 
      return select2Input; 
     }).then(function() { 
      select2Input.click(); 

      var items = element.all(by.css('.select2-results-dept-0')); 
      browser.driver.wait(function() { 
       return items.count().then(function (count) { 
        return 0 < count; 
       }); 
      }); 
      items.get(0).click(); 
     }); 
    } 

希望它能幫助。

Answer 5

我將第二什麼@布賴恩說，如果你用量角器和新的業力這爲我工作：

function uiSelect(model, hasText) { 
    var selector = element(by.model('query.cohort')), 
     toggle = selector.element(by.css('.ui-select-toggle')); 

    toggle.click(); 

    browser.driver.wait(function(){ 
     return selector.all(by.css('.ui-select-choices-row')).count().then(function(count){ 
      return count > 0; 
     }); 
    }, 2000); 

    var choice = selector.element(by.cssContainingText('.ui-select-choices-row',hasText)); 
    choice.click(); 
}; 

這樣使用它：

，如果你想項目的價值選擇是「Q3 2013」​​，您可以爲它提供選擇器的型號以及要選擇的項目的確切或部分文本匹配。

uiSelect('query.cohort','Q3 2013'); 

或

uiSelect('query.cohort','Q3'); 

都將工作