Using protractor to set dropdown box on kendo dropdownlist

Question

I have the following HTML:

It is a kendo dropdown box with three options.

<select class="login" id="CompanyId" name="CompanyDisplayList" data-role="dropdownlist" style="display: none;">
      <option value="BOMDAT" selected="selected">BOMDAT</option>
      <option value="PJCDAT">PJCDAT</option>
      <option value="PMDAT ">PMDAT</option>
</select>

My goal is to use the protractor testing framework to write javascript code to select PMDAT

So far, I have:

const { element } = require("protractor");

describe('Protractor Test', function() {
    beforeEach(function() {
        browser.sleep(1000);
    });
      
    let companyDropdown = element(by.id('CompanyId'));
    
    it('select dropdown', function() {
        companyDropdown.sendKeys('PMDAT');

    });
});

I receive the error: Failed: element not interactable. The issue is, the select class is marked as hidden due to the way how kendo dropdown lists work.

How I can select PMDAT using javascript?

Answer 1

Select has property style="display: none;" , So you can choose any option. You should: click DropSelector, Wait DropDownList appear (should use style="display: block;" in CSS or Xpath), then click Option.