ag-grid 25环境下Protractor无法定位DOM中已存在元素的问题求解

问题根因 #

报错本质是定位和等待逻辑不符合ag-grid v25的菜单渲染规则，具体有三个问题：

• 提前定义的ColumnHamburgerMenu全局变量引用了入参columnName，但全局变量初始化时columnName还未被赋值，匹配不到对应列的菜单元素
• ColumnFilterIcon的xpath是全局匹配，没有绑定点击的目标列，页面存在多个带过滤功能的列时会匹配到多个元素，导致点击逻辑异常
• 仅等待了网格头部的存在状态，点击汉堡菜单后没有等待菜单展开动画完成，过滤图标此时虽然已经存在于DOM中，但还处于不可交互状态，直接点击就会抛出脚本错误

修复代码 #

filterSingleEventRow: async function (stringToFilter, columnName) {
    try {
        // 等待网格头部加载完成
        const GridColumnHeader = element(by.xpath('.//div[contains(@class, "ag-header")]'));
        await browser.wait(EC.presenceOf(GridColumnHeader), 12000);
        
        // 动态生成当前列的汉堡菜单元素，确保col-id参数正确
        const ColumnHamburgerMenu = element(by.xpath(`.//div[@col-id="${columnName}"]//span[@ref="eMenu"]`));
        await browser.wait(EC.elementToBeClickable(ColumnHamburgerMenu), 5000);
        await ColumnHamburgerMenu.click();
        
        // 过滤图标绑定当前列上下文，避免匹配到其他列的元素
        const ColumnFilterIcon = element(by.xpath(`.//div[@col-id="${columnName}"]/ancestor::div[contains(@class,"ag-header-cell")]//span[@class="ag-icon ag-icon-filter"]`));
        // 等待元素可点击，兼容菜单展开动画
        await browser.wait(EC.elementToBeClickable(ColumnFilterIcon), 5000);
        await ColumnFilterIcon.click();
        
        // 后续过滤逻辑...
    } catch (err) {
        console.error('过滤操作失败：', err);
        throw err;
    }
}

额外优化建议 #

如果最终需求是获取过滤后的行数据，不需要完全依赖DOM定位获取，直接调用ag-grid的官方API更稳定，不受虚拟滚动、DOM动态渲染的影响：

// 直接通过ag-grid实例API获取所有过滤后的行数据
const filteredRows = await browser.executeScript(() => {
    return document.querySelector('.ag-root-wrapper').agGrid.api.getFilteredRowNodes().map(node => node.data);
});

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