Angularjs E2Eテスト

Question

私はに実行している問題は、要素が必要なことであると私は成功してフィールドを設定しているものの、http://angular-ui.github.io/

角度UIを利用しSELECT2要素を持つ部分を持っています次のコードでは、Angularのモデルは外部変更のために更新されてはならないので、必要な属性は削除されません。$ scope.apply（）を提供する方法やAngularの別の関数を使用してテストを続ける方法はわかりません。

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'); 

注すべてではないそれらの機能のがに必要とされていること：フィールドの値を変更する（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)); 
    }); 
}; 
}); 

：実行するために、直接jQueryの機能を可能にするために

ファースト私がこの仕事をしようとするために利用してきたすべてのものだけを反映しています...

Answer 1

私はカルマで働くことができませんでしたしかし、これは分度器テストスイート内ではかなり簡単になりました。

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(); 
}); 

ページの次のSELECT2はIDを持っている：私は、ページの最初のSELECT2ボックスを選択し、そのボックス内の最初のオプションを選択するには、以下を使用分度器テストスイートの中に、これを達成するために

s2id_autogen3の

Answer 2

次の変更を加えてカルマの下で動作させました。

あなたのE2Eテストファイルの先頭に次の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)); 
    }); 
    }; 
}); 

その後時々SELECT2が特にとき、ロードに時間がかかることがあり、あなたのシナリオの使用に

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

をSELECT2値を変更します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(); 
} 

これはcan take a promise as a resultをdriver.wait事実を使用しています：分度器を使って、そしてブライアンの答えに拡大するときに、ここで私は信頼性の高いことが判明してきた方法です。この作業を取得するには

Answer 4

私はブライアンの答えとsinelawの両方を相談し、それはまだ二つの理由私の場合には失敗しました：「のdiv＃のs2id_autogen1」に関する

1. クリックすると、私のためSELECT2入力を開きません、私が使用したセレクタは 'div＃s2id_autogen1 a'
2. select2要素を取得しています。これはおそらくselect2がブートストラップモーダルの内側にあるため、ElementNotVisibleErrorを取得するため、要素をクリックする前に明示的に表示するまで待機します。この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

あなたは分度器や新しいカルマを使用する場合、私は二@Brianが言ったこと、これが私のために働いています：項目の値は、あなたがしたい場合は

：

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'); 

要素は、id属性を持っている場合、作業