使用Protractor操作Kendo DropDownList选PMDAT遇元素不可交互问题

遇到element not interactable错误是因为原生<select>被设置为display: none，Protractor无法直接交互。针对Kendo下拉框，有两种可靠的解决方式：

方法1：操作Kendo生成的可视化下拉组件 #

Kendo会把隐藏的原生select转换成带样式的交互UI，通常包含触发按钮和下拉列表。直接模拟用户操作可视化组件：

const { element, by, browser } = require("protractor");

describe('Protractor Test', function() {
    // 定位Kendo下拉的触发按钮（跟随在原生select后的k-dropdown容器内）
    const kendoDropdownTrigger = element(by.css('#CompanyId + .k-dropdown .k-select'));
    // 定位下拉列表中的PMDAT选项
    const pmdatOption = element(by.css('.k-list-container .k-list-item:contains("PMDAT")'));

    it('select Kendo dropdown option', async function() {
        // 点击触发按钮展开下拉列表
        await kendoDropdownTrigger.click();
        // 等待选项加载可见
        await browser.wait(protractor.ExpectedConditions.visibilityOf(pmdatOption), 3000);
        // 选择目标选项
        await pmdatOption.click();
    });
});

方法2：通过JavaScript直接操作隐藏的原生select #

如果不想依赖Kendo的UI结构，可以直接用JS脚本修改隐藏元素的值，并触发同步事件：

const { element, by, browser } = require("protractor");

describe('Protractor Test', function() {
    const companyDropdown = element(by.id('CompanyId'));

    it('select hidden dropdown via JS', async function() {
        // 执行JS脚本修改select值并触发change事件
        await browser.executeScript((selectElement) => {
            // 注意原option的value末尾有空格，必须完全匹配
            selectElement.value = "PMDAT ";
            // 触发change事件让Kendo同步UI状态
            const changeEvent = new Event('change', { bubbles: true });
            selectElement.dispatchEvent(changeEvent);
        }, companyDropdown.getWebElement());
    });
});

注意事项 #

• 方法1更贴近真实用户操作，推荐优先使用，但需根据Kendo版本调整选择器（不同版本的DOM结构可能略有差异）
• 方法2需严格匹配option的value值（原HTML中PMDAT的value末尾带有空格）
• 避免使用browser.sleep()，改用Protractor的ExpectedConditions等待元素，提升测试稳定性

内容的提问来源于stack exchange，提问作者DanCode