javascript - capybara 与 :js => true causes tests to fail

Question

我几天前开始使用 Capybara，之前从未使用过 Selenium。 我想看看我的测试在 beowser 中的执行情况并使用 gem selenium-webdriver。 我在 capybara 中有下一个测试:

RSpec.feature 'Authentication', :type => :feature do

    def register_with_form
      visit '/'
      click_on 'Account'
      click_on 'Register'
      fill_in 'Email', :with => 'test@example.com'
      fill_in 'Name', :with => 'John'
      fill_in 'Last name', :with => 'Smith'
      fill_in 'Password', :with => '1234567890'
      fill_in 'Password confirmation', :with => '1234567890'
      find('.testing-sign-up-class')
      click_button 'Sign up'
      expect(page).to have_css '.hd-title', 'Get Started'
    end

    scenario 'User registers' do
      register_with_form
      expect(page).to have_css '.hd-title', 'Get Started'
      expect(page).to have_css '.alert-success', 'Welcome! You have signed up successfully.'
      expect(page).to have_css '.panel-title', 'What would you like to use GridHub for?'
    end

    scenario 'User sign out', :js => true do
      register_with_form
      click_on 'Account'
      click_on 'Logout'
      expect(page).to have_css '.alert-success', 'Signed out successfully.'
    end
end

将 :js => true 添加到任何 scenario 会破坏测试。 控制台显示:

  1) Authentication When not registered User sign out
     Failure/Error: click_button 'Sign up'

     Selenium::WebDriver::Error::UnknownError:


Element is not clickable at point (606, 23.73333740234375). Other element would receive the click: <input autocomplete="off" name="term" id="term" class="form-control nav-search-field main-ac autocomplete ui-autocomplete-input" placeholder="search items" data-url="/search" type="text">

我添加了 gem database_cleaner，我的 spec_helper.rb 有下一个代码:

  config.before(:each, type: :feature) do
    driver_shares_db_connection_with_specs = Capybara.current_driver == :rack_test

    if !driver_shares_db_connection_with_specs
      DatabaseCleaner.strategy = :truncation
    end
  end

  config.before(:each) do
    DatabaseCleaner.start
  end

  config.append_after(:each) do
    DatabaseCleaner.clean
  end

我的 bin/rspec 文件有下一行:

config.use_transactional_fixtures = false

谢谢。

更新

我认为其他浏览器可能存在问题。原因在某些情况下，当测试打开浏览器(我使用了 firefox 和 chrome)时，某些元素可能位于浏览器窗口的“下方”，在这种情况下测试失败，导致找不到必要的按钮。 如果我有时间向下滚动浏览器窗口，某些测试可能会成功。

Answer 1

当使用任何支持 JS 的驱动程序时，click_button 只需单击按钮，然后继续。它不会等待页面上的任何内容发生变化，因为它无法知道预期会发生什么变化。我的猜测是，当您的测试调用 register_with_form 并返回时，它会立即单击与表单位于同一页面上的“帐户”链接。这最终会取消注册提交并转到没有注销链接的页面。要修复此问题，您需要将 register_with_form 的最后一行设置为类似于 expect(page).to have_content('Welcome!') 的内容，这样在注册完成之前它不会返回。

此外，使用https://github.com/DatabaseCleaner/database_cleaner#rspec-with-capybara-example中推荐的database_cleaner设置(append_after非常重要)而不是你所拥有的，否则你最终会遇到难以诊断的问题，即数据库在请求完成之前开始清理，等等。