Обработка раскрывающегося списка с помощью транспортира

У меня возникают проблемы с обработкой тривиального сценария во время автоматизации. Мне нужно выбрать конкретный вариант с помощью транспортира. Я передаю индекс параметра, который хочу выбрать, а затем нажимаю на него, чтобы выбрать его. Однако моя ошибка метода click() указывает на то, что метод click() не определен для этого индекса.

Вот что я пытаюсь сделать - в моем файле selectElements.js метод раскрывающегося списка определяется как

const selectElement={}

selectElement.selectElementDropdown =function(element,index,milliseconds){
   console.log("Selecting element by drop down","OK");

   element.all(by.tagName('option')).then(function(options){

   options[2].click(); 
  //here index 2 is hardcoded, which can be changed to options[index]
  });

 if(typeof milliseconds!=='undefined'){
     browser.sleep(milliseconds);
  }

 }

 module.exports =selectElement;

Я использую структуру POM, поэтому метод раскрывающегося списка находится в отдельном файле .js . Я вызываю это в своем файле подкачки

 const methodDropDown = require('../BasePage/selectElements.js');


 var signUpBankDetails = function(){

    this.bankName = element.all(by.css('.form-group')).get(7).element(by.xpath("//label[text()='Select Bank Name']"));
   //the selector is clicked to open the drop down

  console.log("Start of this block =========>");

  this.selectDropDownMethod = function(){
     console.log("Drop Down method start ==========>");
     this.bankName.click();
     browser.sleep(1000);
     methodDropDown.selectElementDropdown(this.bankName,0,1000);

   };

Я получаю сообщение об ошибке:

   Failed: Cannot read property 'click' of undefined

Блок this.bankName.click() работает нормально, потому что я вижу, что элемент щелкнут, и появится раскрывающийся список, однако выбор, похоже, ошибочен. Я также прикрепил фрагмент кода HTML ниже -

введите здесь описание изображения

PS- Веб-страница использует Angular2.


person demouser123    schedule 11.04.2017    source источник
comment
Изменится ли ошибка, если вы воспользуетесь element.all(by.tagName('option')).get(2).click();, чтобы щелкнуть параметр?   -  person alecxe    schedule 11.04.2017
comment
Я уже пробовал это, но я получаю исключение индекса за пределами границ. Мой код, который получает элементы через тэг, похоже, не работает, так как в ошибке указано, что этому локатору соответствует 0 элементов.   -  person demouser123    schedule 11.04.2017


Ответы (2)


Когда я смотрю на HTML, я вижу, что label не содержит select. Выбор находится в <div class="ui-helper-hidden-accessible">..</div>, который находится на том же уровне, что и метка.

Когда я смотрю на ваш заказ на покупку, я вижу, что вы передаете label (this.bankName) как ElementFinder с этим methodDropDown.selectElementDropdown(this.bankName,0,1000);. methodDropDown.selectElementDropdown() начинает поиск из ElementFinder, который вы передаете, и это label, а не <div class="ui-helper-hidden-accessible">..</div>, который содержит выбор.

Может быть, вы можете изменить это на что-то это:

// Define ElementFinder for the bankname component
const bankNameComponent = $('p-dropdown[formcontrolename="bankname"]');
// Open the dropdown
bankNameComponent.$('label').click();
// Click on an element by index
bankNameComponent.$$('select option').get(2).click();
// Or search by text in the dropdown
bankNameComponent.element(by.cssContainingText('option', 'BNI')).click();

Надеюсь, поможет

person wswebcreation    schedule 12.04.2017
comment
Спасибо за предложение. Я пытался сделать что-то вроде этого, но мой код не удался в последних двух строках. Мне не удалось выбрать параметры с помощью метода выбора индекса или элемента — это дало мне исключение «Элемент не виден». Я добился этого, имитируя событие нажатия клавиши (Keys.DOWN) на последнем шаге. - person demouser123; 17.04.2017
comment
@Deadpool, спасибо за ответ, а также за решение, которое сработало для вас - person wswebcreation; 18.04.2017

person    schedule
comment
было бы полезнее для читателей, если бы вы объяснили разницу между вашими решениями, а не просто предоставили два похожих блока кода без комментариев. - person ADyson; 13.10.2017
comment
Решение 01: 4-я строка возвращает elem.getAttribute(value).then(function(value) { ||||| Решение 02: 4-я строка возвращает elem.getText().then(function(text) { - person Shiwantha Lakmal; 13.10.2017
comment
Я вижу разницу, но думаю, людям будет также интересна причина. - person ADyson; 13.10.2017