Capybara/RSpec 'have_css' matcher not working but has_css does

Question

In a Rails 3.2.14 app with Ruby 2, using rspec-rails 2.14.0 and capybara 2.1.0 the following feature spec is causing a failure:

require 'spec_helper'

feature 'View the homepage' do
  scenario 'user sees relevant page title' do
    visit root_path
    expect(page).to have_css('title', text: "Todo")
  end
end

The failure message is:

 1) View the homepage user sees relevant page title
 Failure/Error: expect(page).to have_css('title', text: "Todo")
 Capybara::ExpectationNotMet:
   expected to find css "title" with text "Todo" but there were no matches. Also
   found "", which matched the selector but not all filters.

The title element and correct text are on the rendered page

But when I change this line in the feature spec:

expect(page).to have_css('title', text: "Todo")

to this:

page.has_css?('title', text: "Todo")

then the test passes. [Edit - but see response below from @JustinKo that this test is not a good test as it will always pass]

How do I get the have_css(...) form to work? Is it a configuration issue?

Here's the relevant part of my Gemfile:

group :development, :test do
  gem 'rspec-rails' 
  gem 'capybara'
end

And my spec/spec_helper.rb is set up like this:

ENV["RAILS_ENV"] ||= 'test'
require File.expand_path("../../config/environment", __FILE__)
require 'rspec/rails'
require 'rspec/autorun'
require 'capybara/rails'
require 'capybara/rspec'

Dir[Rails.root.join("spec/support/**/*.rb")].each { |f| require f }

RSpec.configure do |config|

  # out of the box rspec config code ommitted

  config.include Capybara::DSL
end

Anyone know what I might be doing wrong?

Answer 1

By default, Capybara only looks for "visible" elements. The head element (and its title element) are not really considered visible. This results in the title element being ignored in have_css.

You can force Capybara to also consider non-visible elements by the :visible => false option.

expect(page).to have_css('title', :text => 'Todo', :visible => false)

However, it would be easier to use the have_title method:

expect(page).to have_title('Todo')