Capybara - 按类名单击元素答案

【问题标题】：Capybara - Click element by class nameCapybara - 按类名单击元素
【发布时间】：2017-09-09 20:20:55
【问题描述】：

对于一个看似简单的问题，我已经研究了很长时间，似乎在 Google 上找不到任何东西。我有这个按钮，我需要单击它没有 id 但包含一个类

<button class="filter-case-studies" onclick="initBootpag(filterForContentType('CASE STUDIES', searchHits))" type="button">
<b>CASE STUDIES</b>
(2)
</button>

我已经尝试过使用click_on，我现在知道它只用于链接和按钮，所以当然不起作用。这是我目前所拥有的：

When(/^I filter the results to only see case studies$/) do
  click_on('filter-case-studies')
end

我也试过page.find('filter-case-studies').click，这也行不通。

page.find(:class, 'filter-case-studies').click 默认为 :css 所以这对我来说也失败了。

Capybara中有没有办法通过类名点击元素？

提前感谢您的帮助。

【问题讨论】：

标签： ruby automation capybara

【解决方案1】：

在 Capybara 中执行此操作的标准方法是

find('button.filter-case-studies').click

在相对较新的 Capybara 版本中，您应该也可以这样做

click_on(class: 'filter-case-studies')

【讨论】：

【解决方案2】：

find('.filter-case-studies').click 这里推荐https://robots.thoughtbot.com/write-reliable-asynchronous-integration-tests-with-capybara#find-the-first-matching-element

【讨论】：

【解决方案3】：

我有一个使用上述方法找不到的按钮 (Unable to find visible link or button nil with classes [close-modal])。

这对我有用：page.execute_script('$.find(".close-modal")[0].click()')

【讨论】：

【解决方案4】：

click_on('.filter-case-studies')

您需要 . 选择器用于类，# 用于 id。

【讨论】：

啊，我明白 :css 选择器是什么意思了。这似乎几乎奏效了，但现在我收到一条错误消息 Element is not clickable at point (914.2666625976562, 16.133331298828125). Other element would receive the click: <div class="top-navbar ng-scope" ng-controller="menuCtrl"></div> (Selenium::WebDriver::Error::UnknownError) 因为导航栏是绝对的，所以它一定会妨碍
click_on 不采用 CSS 选择器，它采用 id、包含文本、alt、标题等 - 所以这个例子不应该工作
是的，我必须使用page.find(:class, '.filter-case-studies').click 才能让它工作。我会发布一个适当的解决方案

【解决方案5】：

感谢 Schutte 先生提出使用 . 选择器的想法。

最后我不得不使用page.find(:class, '.filter-case-studies').click。绝对导航栏挡住了按钮，所以我必须包含 page.execute_script "window.scrollBy(0,500)" 才能完成测试。

【讨论】：

:class 不是 Capybara 提供的选择器类型，因此除非您注册了自定义选择器类型，否则您展示的示例将不起作用。
实际上取决于您使用的 Capybara 版本，它可能只是忽略 :class 参数并默认为 :css，或者它会输出有关“未知选择器类型”的警告，然后默认到 :css 。同样取决于页面，增加页面大小可能会消除滚动页面的需要。