如何使用 Capybara Rails 与 Bootstrap Popover 交互？

Question

我正在尝试测试按下按钮是否会将新记录插入数据库（Rails 5b3）

该按钮位于引导弹出窗口中，它运行的功能运行良好。但是，当我尝试对其进行测试时，我似乎无法定位该元素。

默认情况下，弹出框的内容不在 DOM 上，它是在单击按钮时插入和删除的。这是 Bootstrap v4 中的默认行为

这是我的测试宝石集：

  gem "rails-controller-testing", :git => "https://github.com/rails/rails-controller-testing"
  gem 'launchy'
  gem 'poltergeist'
  gem 'rspec', '~> 3.5.0.beta1'
  gem 'rspec-core', '~> 3.5.0.beta1'
  gem 'rspec-rails', '~> 3.5.0.beta1'
  gem 'guard-rspec', '~> 4.6', require: false
  gem 'capybara'
  gem 'factory_girl_rails'

这是我试图定位的弹出框插入的相关 HTML：

<button data-js-method="createblock" class='btn btn-secondary btn-block'>Heading</button>

这是我的测试：

scenario 'Popover#Heading' do
  before_count = HeadingBlock.count
  # This clicks the button to activate the popover
  find('.btn-add-block').click

  # The line below is what I'm trying to target
  # click_button('Heading') yields 'Unable to find button "Heading"'
  find('button [data-js-method="createblock"]').click
  after_count = HeadingBlock.count

  expect(after_count - before_count).to eq(1)
end

最后报错：

Capybara::ElementNotFound:
       Unable to find css "button [data-js-method=\"createblock\"]"

Answer 1

在 CSS 选择器中，空格表示查找后代，但您正在寻找匹配按钮元素的属性。所以应该是

find('button[data-js-method="createblock"]').click #no space between button and [data-....

我不确定为什么 click_button('Heading') 对您不起作用，因为您没有说明尝试时遇到的错误。

接下来是单击按钮可能需要一些时间来处理的问题，因此立即获得计数可能会很不稳定。您应该使用expect(page).to have_selector('whatever selector', count: before_count+1)，以便水豚等待/重试行为可以为您工作——我不知道该选择器应该是什么，因为我不知道HeadingBlock 的定义是什么。