javascript - 使用 Protractor 处理下拉菜单

Question

我在自动化过程中遇到了处理琐碎场景的问题。我需要使用 Protractor 选择一个特定的选项。我正在传递我想要选择的选项的索引，然后单击它来选择它。但是，我的 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() block 工作正常，因为我可以看到元素被单击并且出现下拉列表，但是选择似乎出错了。我还附上了下面的 HTML 代码片段 -

PS- 该网页使用的是 Angular2。

Answer 1

当我查看 HTML 时，我发现标签 不包含选择。选择在 <div class="ui-helper-hidden-accessible">..</div> 中与标签处于同一级别。

当我查看您的 PO 时，我看到您正在将 标签 ( 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();

希望对你有帮助