javascript - 断言数组中的值已在下拉列表中检查

Question

我找不到最佳解决方案来检查下拉菜单中是否检查了数组中的元素(值 - 字符串)。这是我的 html 的一部分(下拉)

<div _ngcontent-c5="" class="dropdown-item">
    <div _ngcontent-c4="" class="dropdown-item">
                    <div _ngcontent-c4="" class="custom-control custom-checkbox">
                      <input _ngcontent-c4="" class="custom-control-input ng-untouched ng-pristine ng-valid" type="checkbox" id="dog1">
                      <label _ngcontent-c4="" class="custom-control-label" for="dog1">Dog</label>
                    </div>
                  </div>
    <div _ngcontent-c4="" class="dropdown-item">
                    <div _ngcontent-c4="" class="custom-control custom-checkbox">
                      <input _ngcontent-c4="" class="custom-control-input ng-untouched ng-pristine ng-valid" type="checkbox" id="cat2">
                      <label _ngcontent-c4="" class="custom-control-label" for="cat2">Cat</label>
                    </div>
                  </div>
    <div _ngcontent-c4="" class="dropdown-item">
                    <div _ngcontent-c4="" class="custom-control custom-checkbox">
                      <input _ngcontent-c4="" class="custom-control-input ng-untouched ng-pristine ng-valid" type="checkbox" id="horse3">
                      <label _ngcontent-c4="" class="custom-control-label" for="horse3">Horse</label>
                    </div>
                  </div>

在输入上，我可以检查该元素isSelected。我想从标签中获取值(选中)并检查它是否包含在我的数组中，但我在编写使用所选标​​签创建数组的函数时遇到问题。

我已经尝试过这样的事情(只是为了测试我做得是否正确，我使用控制台日志而不是推送到数组)。但它不起作用。

var categories = $$('.custom-checkbox');

this.assertTest = function () {
        categories.filter(function (element, index) {
            if (element.isSelected()) {
                element.$('label').get(index).getText().then(function (ele) {
                    console.log(ele);
                })
            }
        })
        return this;
    }

Answer 1

使用可以使用Pseudo Class的组合和 Adjacent Sibling CSS 选择器。

let selectedOptsText = element.all(by.css('.dropdown-item input:checked + label'))
                      .getText();

// how to use selectedOptsText
selectedOptsText.then(function(txts){
   console.log(txts) // txts has those checked text
});

使用filter和map的方法:

let selectedOptsText = // it's a promise

// Find all check boxes
element.all(by.css('.dropdown-item input[type="checkbox"]'))

// Filter to keep ones are checked
.filter(function(checkbox){
    return checkbox.isSelected();
})
// After filter, checkboxes passed down to map() are all checked
.map(function(checkbox){
    // first get checkbox's parent, then get the label of same parent
    return checkbox.element(by.xpath('./../label'))
        .getText();
});

// how to use selectedOptsText
selectedOptsText.then(function(txts){
   console.log(txts) // txts has those checked text
});

使用each的方法:

let selectedOptsText = []; // to store checked text
let promiseA = 

// Find all check boxes
element.all(by.css('.dropdown-item input[type="checkbox"]'))

// Iterate each checkbox, store its text into selectedOptsText, if it's checked
.each(function(checkbox){
    checkbox.isSelected().then(function(selected){
        if(selected) {
            checkbox.element(by.xpath('./../label'))
            .getText()
            .then(function(txt){
                selectedOptsText.push(txt);
            });
        }
    })
});

// how to use selectedOptsText, it's different with above approach
promiseA.then(function() {
    console.log(selectedOptsText); // selectedOptsText has those checked text
});