如何找到並單擊中繼器中的ng-click按鈕

我需要使用Selenium WebDriver和量角器測試AngularJS網頁。如何找到並單擊中繼器中的ng-click按鈕

HTML片段進行測試：

<tr ng-repeat="item in items" class="ng-scope"> 
    <td class="ng-binding"> 
     Item1 
    </td> 
    <td class="ng-binding"> 
     description 
    </td> 
    <td class="ng-binding"> 
     1234 
    </td> 
    <td> 
     <div ng-click="AddItem(item.id)" class="btn">Add Item</div> 
    </td> 
</tr> 

<tr ng-repeat="item in items" class="ng-scope"> 
    <td class="ng-binding"> 
     Item2 
    </td> 
    <td class="ng-binding"> 
     description 
    </td> 
    <td class="ng-binding"> 
     1235 
    </td> 
    <td> 
     <div ng-click="AddItem(item.id)" class="btn">Add Item</div> 
    </td> 
</tr>

它看起來像這樣：

screenshot of the html angular page

我已經通過文件去，教程在YouTube和Google搜索，但我還是不要不明白如何找到並點擊具有特定項目ID的特定項目的「添加項目」。

你能向我解釋它是如何完成的嗎？

來源

2016-11-06 Sauerkraut

我猜硒能與他們的ID訪問HTMLS元素。如果您爲您的div提供了具有ng-click的唯一ID，那麼您可以在Selenium中訪問這些元素。要提供唯一的ID，您可以將ID =「ItemAdd {{$ index}}」添加到您的DIV標記 – user3249448

@ user3249448您的意思是網站開發人員需要添加ID，還是應該通過我的代碼以某種方式執行此操作？ – Sauerkraut

您正在尋找的具體ID不會在DOM中，這意味着您無法使用該方法找到元素。

下面是我個人使用的代碼：

element.all(by.repeater('item in items')).filter(function(row){ 
return row.all(by.tagName('td')).first().getText().then(function(val){ 
    return val === "Item1" //this can be your per your wish 
    }) 
}).first().$('[ng-click="AddItem(item.id)"]').click();

來源

2016-11-07 04:22:49

謝謝！這正是我需要的！ – Sauerkraut

除了@丹尼的答案，就可以找到使用evaluate() method.Try下面的代碼從DOM item.id。

element.all(by.repeater('item in items')).filter(function(row){ 
    return row.evaluate('item.id').then(function(id){ 
     return val === "1234"; 
    }) 
}).first().$('.btn').click();

來源：http://www.protractortest.org/#/api?view=ElementArrayFinder.prototype.evaluate

來源

2016-11-07 04:40:45

謝謝。我和丹尼的回答一起去了，因爲第一個項目字段（「Item1」，「item2」等）是唯一一個不是可選的，並且是完全獨特的。我知道，只要記錄本身就會一直髮現和識別它存在。 – Sauerkraut

如何找到並單擊中繼器中的ng-click按鈕

回答

相關問題