Protractor自动化测试：点击鼠标悬停显示的Div按钮的替代方法

嘿，这个场景我太熟悉了！那些需要悬停才显示的按钮确实有点麻烦，不过不用模拟鼠标移动也能搞定，这里有两个实用的方法：

方法1：用JavaScript Executor直接触发点击 #

Protractor允许我们执行原生JavaScript来绕过WebDriver的可见性检查，直接调用元素的click()事件。这种方法简单高效，完全不需要模拟悬停：

// 定位到你的隐藏按钮
const hiddenButton = element(by.css('div.your-target-div button.hidden-btn'));

// 等待元素存在于DOM中（避免元素还没加载就操作）
const EC = protractor.ExpectedConditions;
browser.wait(EC.presenceOf(hiddenButton), 5000, "按钮元素未找到");

// 执行JS点击
browser.executeScript("arguments[0].click();", hiddenButton.getWebElement());

原理很简单：WebDriver的默认click()方法会检查元素是否可见且可交互，但原生JS的click()事件不管元素的显示状态，直接触发点击逻辑，完美适配这种悬停显示的元素。

方法2：修改元素样式强制显示后点击 #

如果你更倾向于贴近真实用户的操作逻辑（先让元素显示再点击），可以先通过JS修改元素的CSS样式，让它强制显示出来，再用常规的click()方法：

const hiddenButton = element(by.css('div.your-target-div button.hidden-btn'));
browser.wait(EC.presenceOf(hiddenButton), 5000);

// 修改样式让按钮可见（根据实际隐藏方式调整属性）
browser.executeScript("arguments[0].style.display = 'block'; arguments[0].style.visibility = 'visible';", hiddenButton.getWebElement());

// 现在可以正常点击了
hiddenButton.click();

这个方法的优势是，有些按钮的点击事件可能依赖于元素的可见状态（比如绑定了mouseenter之外的关联事件），强制显示后再点击会更稳定。

注意事项 #

• 不管用哪种方法，都要确保元素已经存在于DOM中（用presenceOf等待），而不是仅仅等待可见（visibilityOf），因为元素一开始是隐藏的，visibilityOf会超时。
• 如果按钮是通过opacity: 0或者height: 0隐藏的，调整对应的CSS属性即可（比如把opacity设为1）。

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