如何在Protractor中点击仅在悬停时显示的按钮？

这个场景太常见了！你遇到的问题核心很明确：那个删除按钮只有在鼠标悬停到特定区域时才会渲染出来（或者从隐藏变为可见），所以你直接用elementToBeClickable去等它，自然会超时——因为它一开始要么不在DOM里，要么是完全不可见的状态，Protractor根本找不到它。

给你一个直接可行的解决方案，核心就是先执行悬停操作触发按钮显示，再去等待和点击它：

修改后的完整代码 #

// Delete Created Topic Clean Up
myData.click(); // 跳转到话题首页
browser.wait(protractor.ExpectedConditions.urlContains('home'), 5000); // 等待URL切换到首页

// 关键步骤：先找到需要悬停的父元素（比如包含删除按钮的话题条目）
// 这里需要你替换成实际的定位器，比如你的话题项的CSS选择器/XPath
const triggerHoverElement = element(by.css('.topic-container')); 
// 执行鼠标悬停动作
browser.actions().mouseMove(triggerHoverElement).perform();

// 现在等待删除按钮变为可见，再等待可点击
browser.wait(protractor.ExpectedConditions.visibilityOf(deleteLastTopic), 5000);
browser.wait(protractor.ExpectedConditions.elementToBeClickable(deleteLastTopic), 5000);
deleteLastTopic.click(); // 点击删除按钮

// 后续的确认弹窗逻辑保持不变
browser.wait(protractor.ExpectedConditions.elementToBeClickable(deleteConfirm), 5000);
deleteConfirm.click(); // 点击确认删除

几个重要的注意事项 #

• 定位正确的悬停触发元素：一定要确保triggerHoverElement是你平时手动操作时，鼠标放上去会弹出删除按钮的那个容器/元素（比如整个话题卡片、标题栏之类的），别定位错成删除按钮本身——毕竟它一开始还没显示呢。
• 先等可见再等可点击：比起直接等elementToBeClickable，先通过visibilityOf确认按钮已经出现在页面上，再等它可点击，会避免很多因为DOM渲染延迟导致的超时问题。
• 动作执行要加perform()：Protractor的browser.actions()创建的动作链，必须调用.perform()才会实际执行，别漏掉这一步！

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