水豚无法通过 id 找到元素

Question

我的页面上有以下代码：

<div class="row column filter-tab">
  <div id="filter-button" class="button"><%= fa_icon 'filter' %></div>
</div>

我有一个 rspec 测试试图做

page.find('#filter-button').click

我收到了可怕的

 Capybara::ElementNotFound:
   Unable to find css "#filter-button"

如果我在测试中放置断点，我可以检查 HTML 并查看该元素是否存在，并且我可以与其进行交互。

(byebug) page.has_css?('#filter-button', visible: false)
    false

以及

$('#filter-button')
Object { length: 1, context: HTMLDocument → moves, selector: "#filter-button", 1 more… }

我开始运行没主意了。我唯一能想到的是，这个按钮位于一个容器内，该容器在页面加载后通过 javascript 定位（只需增加顶部 CSS 值）——但即便如此，我还是认为仍然可以在页面上找到然后可见：false/visible :all.

Answer 1

如果您必须将 'visible: false' 传递给任何 Capybara 方法才能找到该元素，那么该元素在页面上实际上是不可见的。如果它在页面上实际上不可见，那么用户将无法单击该元素，因此单击将失败。事实上，您的 page.has_css?('#filter-button', visible: false) returns false 示例虽然暗示该按钮根本不在当前页面上（可见或不可见），因此请检查 id 的拼写，and/or 通过 page.html 检查页面的实际 html。

Answer 2

检查您的 click 是否在另一个 within 块内，例如：

within "#some_other_element" do
  #lots of other checks...
  page.find('#filter-button').click
end

我以前多次掉入这个陷阱，尤其是在附加到文档正文的模式中（在原始选择器之外）。

水豚无法通过 id 找到元素

Capybara can't find element by id

rspec

capybara