Search code examples
javascriptprotractorangularjs-e2e

Handling Drop Down using Protractor

I am facing issues with handling a trivial scenario during automation. I need to select a specific option using Protractor. I am passing the index of the option that I want to select, and then clicking on that to select it. However, my click() method errors out stating the click() method is undefined on that index.

Here is what I am trying to do - in my selectElements.js file, the dropdown method is defined as

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;

I am using a POM structure, so the dropdown method is in a separate .js file. I am calling this in my page file

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

   };

I am getting the error which says -

   Failed: Cannot read property 'click' of undefined

The this.bankName.click() block is working fine because, I can see that the element is clicked and the drop down appears, however the selection seems to be erroring out. I have also attached the HTML snippet of code below -

enter image description here

PS- The webpage is using Angular2.

Solution

  • When I look at the HTML I see that the label is not containing the select. The select is in the <div class="ui-helper-hidden-accessible">..</div> that is on the same level as the label.

    When I look at you PO I see you are passing the label (this.bankName) as an ElementFinder with this methodDropDown.selectElementDropdown(this.bankName,0,1000);. The methodDropDown.selectElementDropdown() starts searching from the ElementFinder you pass and that is the label, not the <div class="ui-helper-hidden-accessible">..</div> that holds the select.

    Maybe you can change it into something this:

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

    Hope it helps