如何在量角器選擇第二個對象與相同的類名第二個元素

Question

HTML Coded snippet is here

用量角器，當我寫了下面的代碼，我只能從第一個匹配的類選擇3件

var items = element(by.css('.swatches.swatches_size.swatches_find-box')).all(by.tagName('label')); 
items.get(2).click(); 

從第二個匹配類中選擇第二個元素的方法是什麼？

的代碼片段是添附圖像

Answer 1

在其element.all(by.css('.swatches.swatches_size.swatches_find-box')).each(function (element, index) {

Answer 2

你可以鏈element()和all()：

$$('.swatches.swatches_size.swatches_find-box').get(1).all(by.tagName("label")).get(1); 

其中$$是一個捷徑element.all(by.css("..."))。

---

或者，另一種方法是用nth-of-type和nth-child僞類的幫助下使用一個CSS選擇器：

$(".swatches.swatches_size.swatches_find-box:nth-of-type(1) label:nth-child(1)") 

Answer 3

感謝您的答覆。這是我做選擇第二匹配DIV的第三個要素：

element.all(by.css('.swatches.swatches_size.swatches_find-box label')). 
     each(function(element, index) { 
     element.getText().then(function(text) { 
      if (text === waist) { 
      element.click(); 
      } 
      if (text === length) { 
      element.click(); 
      } 
     }); 
     }); 

Answer 4

相反的.get(1)，.get(2)，.get(3)，等等。現在你可以使用更可讀的功能，如.second()，.third()，.fourth()等等 - 我開發了一個小包裝 - https://github.com/Marketionist/protractor-numerator - 可以與量角器一起使用來選擇第二，第三，第四等元素。

因此，適用於你的情況（選擇從第二匹配類的第二個元素），這將是更具可讀性和看起來像這樣：

var itemSecond = element.all(by.css('.swatches.swatches_size.swatches_find-box')).second().all(by.tagName('label')).second(); 
itemSecond.click();