Утверждают, что значения из массива проверяются в выпадающем списке - PullRequest
0 голосов
/ 11 мая 2018

Я не могу найти лучшее решение, чтобы проверить, что элементы (значения - строка) из массива отмечены в выпадающем меню. Вот часть моего 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. Я хочу взять значения (флажок) из меток и проверить, что он содержится в моем массиве, но у меня есть проблема, чтобы написать функцию, которая будет создавать массив с метками, которые выбраны.

Я попробовал что-то вроде этого (только для проверки, что я все делаю правильно, я использовал консольный журнал вместо od push to array). Но это не работает.

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

1 Ответ

0 голосов
/ 12 мая 2018

Использование может использовать комбинацию Псевдокласс и Смежного брата из CSS Selector.

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