在水豚中找到隐藏的元素

Question

学习'capybara'遇到了通过水豚寻找隐藏元素的问题

在HTML中，我们有一个默认为'display: none'的文件字段。 HTML 元素是：

<input class="some_class" id="some_id" name="some_name" type="file">

现在，当我使用 cucumber 在 capybara 中编写测试用例时，我无法在我的 capybara 脚本中找到这个元素。我的水豚脚本正在寻找这样的元素：

find(:xpath, "//input[@name='some_name']")

了解隐藏元素并了解设置

Capybara.ignore_hidden_elements = false

应该可以解决我的问题。但我在其他地方读到上述设置是默认设置。因此，尝试了明确传递它的其他选项。喜欢：

find(:xpath, "//input[@name='some_name']", :visible => false)

那也没用。还有什么我应该尝试的吗？如果有人感兴趣，我们很乐意分享更多细节。

Answer 1

可见选项有一些潜在价值

true 或 :visible => 仅查找可见元素
false 或 :all => 查找可见和不可见元素
:hidden => 只查找不可见的元素

因此，如果您尝试 find(:xpath, "//input[@name='some_name']", :visible => false) 没有返回元素，则页面中没有与该 XPath 匹配的元素，您需要检查页面内容是否与您认为的一样（ page.html、page.save_screenshot、等等）

除此之外，您的示例还有一些问题。首先，您正在陷入 XPath // trap。如果（如果）您将大量使用 XPath 查询来查找您的元素，请习惯于使用 .// 开始您的查询，而不仅仅是 // - 如果您不这样做的话正在击败页面上 Capybara 的所有范围（within、链式 find 等）。使用 CSS 选择器没有这个问题，因此对于大多数不使用 Capybara 内置选择器类型的查询来说更有意义。

find("input[name='some_name']", visible: false)

知道我们正在寻找文件输入，我们可以使用 Capybara 的内置 file_field 选择器并执行

find(:file_field, 'some_name', visible: false)

哪个更容易阅读并准确解释了您要查找的内容。接下来，由于您要查找一个文件字段，我假设您实际上想要向其中添加一个文件。这可能会有问题，因为通常无法与不可见元素进行交互。然而，由于文件字段经常被隐藏，为了允许样式，有一个选项可以帮助解决这个问题。

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

make_visible: true 选项将临时更改元素 CSS 以使其可见（您可以将其设置为要设置的 CSS 值的散列而不是 true如果默认 CSS 在您的页面上不起作用），将文件附加到它，然后恢复 CSS 更改。

最后一点，如果您正在测试应用程序（如果只是进行自动化，那很好），设置 Capybara.ignore_hidden_elements = false 是一个糟糕的主意，因为它导致的测试实际上并没有测试用户可以做什么see/do.

在水豚中找到隐藏的元素

Find hidden element in capybara

cucumber

capybara