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

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'});
  }

我贴出来记录一下。

score 75 · Accepted Answer

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

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

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

不要click_button('#photo')直接使用

score 19 · Accepted Answer

Capybara 的作者建议Capybara.ignore_hidden_elements在需要看到不可见元素之前立即设置，然后再重新设置：

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

score 8 · Accepted Answer

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

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

score 0 · Accepted Answer

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");

score 0 · Accepted Answer

我最终以不同的方式解决了它。

execute_script()给我带来了困难（它会冻结 FireFox 上的测试执行），所以这就是我所做的：

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

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

我还必须附加.erb到我的 javascript 文件以进行正确的 Rails 资产处理。

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

这样我就可以简化 UI 进行测试，同时保持生产的外观和感觉。

score 0 · Accepted Answer

display:none;我已经使用具有 CSS 样式集的元素这样做了：

page.execute_script("$('.all-hidden-elements').show();");
all('.all-hidden-elements').first.click

score 0 · Accepted Answer

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

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

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

7 回答 7

Related

Reference