带有硒的水豚：无法点击隐藏的元素

Question

我的观点是，只有将包含 div 的可点击图标悬停在上方（使用 Knockout JS、SCSS）时，该图标才可见。像这样：

HTML

<div id="button_div">
   <i id="icon" data-bind="click: dosomething"></i>
</div>

SCSS

i {
  display: none;
}

#button_div:hover {
   i {
      display: block;
   }
}

页面上一切正常，但我似乎不知道如何单击 Capybara 中的元素。我尝试将 :visible 符号添加到方法中，但没有成功：

find('#icon', visible: false).click

这给了我一个“Selenium::WebDriver::Error::ElementNotVisibleError”错误。

使用：

Capybara.ignore_hidden_elements = false

给我完全相同的错误

我也尝试过使用 Selenium Action，例如：

button_div_element = find('#button_div').native
button_element = find('#button', visible: false).native
page.driver.browser.action.move_to(button_div_element).click(button_element).perform

虽然这不会引发错误，但它也不会单击按钮。

有谁知道我可能做错了什么吗？

Answer 1

尝试使用 .execute_script() 如下：-

button_div_element = find('#button_div').native
button_element = find('#button', visible: false).native
page.driver.browser.action.move_to(button_div_element).perform
page.driver.browser.execute_script("arguments[0].click()", button_element)

希望它能奏效...:)

Answer 2

Capybara 旨在模拟用户，因此您无法点击不可见的元素，因为用户无法点击。但是，您应该能够复制用户操作以使元素可见，然后单击它

find('#button_div').hover
find('#icon').click

如果这不会引发错误，但也不会出现单击按钮，请尝试在两个操作之间短暂休眠，因为您可能有动画外观，这可能会导致点击错过项目

Answer 3

经过一番艰苦的试验和错误，我设法找到了一个有效的解决方案

button_div = find("#button_div_id").native
icon = find("#icon_id").native
page.driver.browser.action.move_to(button_div, :right_by => -50).click.perform
icon.click

不知道为什么我必须手动告诉 Capybara 向左移动 50px，但这似乎已经成功了。

此外，我在设置代码中添加了以下行：

page.driver.browser.manage.window.maximize

这确保 window 在运行测试之前最大化。我不是 100% 确定，但这可能也与修复有关。

带有硒的水豚：无法点击隐藏的元素

Capybara with Selenium: Can't click on hidden element

ruby

selenium

capybara

knockout.js

HTML

SCSS