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

Question

HTML代碼段在這里

使用量角器，在編寫以下代碼時，只能從第一個匹配類中選擇第三個元素

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