Question

我有一个opacity: 0的文件字段，并且覆盖了一个假按钮。它是一种常见的css技术，用于伪造一种在不同浏览器上一致显示的“上传按钮”。

Capybara不允许我在该输入上拨打attach_file。错误是Selenium::WebDriver::Error::ElementNotVisibleError: Element is not currently visible and so may not be interacted with。

任何人都知道有任何方法可以强迫水豚与隐形元素互动吗？

答案仍然没有答案，但我找到了解决方法。没有什么是智能的，只需用简单的脚本使元素可见

  page.execute_script %Q{
    $('#photos').css({opacity: 1, transform: 'none'});
  }

我将其张贴在记录中。

Answer 1

您可以使用Capybara中的visible: false属性与隐藏元素进行交互。

如果要点击隐藏元素，请使用：

find("#photos", visible: false).click

请勿直接使用click_button('#photo')

Answer 2

The author of Capybara recommends setting Capybara.ignore_hidden_elements在需要查看隐形元素之前，然后重置它：

Capybara.ignore_hidden_elements = false
click_button 'my invisible button'
Capybara.ignore_hidden_elements = true

Answer 3

一般情况下，使用Capybara时，不可能与非可见元素进行交互（您可以在大多数查找程序中使用visible: false/hidden选项找到它们，但实际上并没有对它们执行任何操作）。但是，文件输入是一种特殊情况，因为隐藏元素有多常见，并且由于安全限制，没有其他方法通过与页面可见元素交互来实际添加文件。由于此attach_file有一个make_visible选项，可用于让Capybara使元素可见，附加文件，然后将CSS重置为原始设置。

attach_file('photos', file_path, make_visible: true)

Answer 4

Miquel，谢谢你的工作。

我在Selenium Webdriver 2.35和Firefox 24的C＃绑定上与隐藏文件输入进行交互时遇到了类似的问题。要使文件选择工作也有类似的伎俩：

((IJavaScriptExecutor)webdriver).ExecuteScript("$('#fileUploadInput').css({opacity: 1, transform: 'none'});");

IWebElement e = webdriver.FindElement(By.CssSelector("input#fileUploadInput")));

e.SendKeys("c:\\temp\\inputfile.txt");

Answer 5

我最终解决了不同的路线。

execute_script()让我很难（它会冻结FireFox上的测试执行），所以这就是我所做的：

我已经有了一个合适的javascript文件。我附上了以下内容

<% if ENV["RAILS_ENV"] == "test" %>
  $('#photos').show()
<% end %>

我还必须将.erb附加到我的javascript文件中，以便正确处理Rails资产。

在我的测试文件中，我已经设置了ENV["RAILS_ENV"] = "test"

通过这种方式，我可以简单地对UI进行测试，同时保持生产的外观和感觉。

Answer 6

我已经使用设置了CSS样式exists的元素这样做了：

display:none;

Answer 7

如果隐藏元素嵌套在可见的父元素中（例如，可见标签内的隐藏输入），则可以单击父元素。如果你仍想按ID找到输入，你可以像这样遍历父母：

find('#hidden_input').find(:xpath, '..').click

是否可以与水豚的隐藏元素进行交互？

7 个答案: