Decoupling CSS IDs from RSpec/Capybara feature specs with centralized YAML list. We use this for Code School feature specs.

css.rb

# Defines a method returning the selector for a CSS selector
# used within the test suite to scope a feature spec.
#
# Developers: always use these instead of hard-coding CSS selectors
# when scoping or selecting crucial elements on a page.
# Designers: always check this module before/after modifying existing
# classes or IDs that may cause test failures
#
# Example usage:
# - page.should have_selector(CSS.some_method)
# - within CSS.sign_in_form do
#     ...
#   end
#
module CSS
  Selectors = YAML.load_file("#{Rails.root}/spec/support/css_selectors.yml")

  Selectors.each do |method, selector|
    define_singleton_method(method) { selector }
  end
end

RSpec.configure do |config|
  config.include(CSS)
end

css_selectors.yml

# general
header_sign_in_form: "#header-sign-in-form"
sign_in_form: "#sign-in-form"
sign_up_form: "#sign-up-form"
new_password_form: "#new-password-form"
site_navigation: "#site-navigation"
account_dropdown: "#account-dropdown"
account_navigation: "#account-navigation"

usage_example_spec.rb

require 'spec_helper'

describe 'a successful subscription purchase' do
  before(:each) do
    visit start_enroll_path
  end

  subject { page }

  context "user isn't logged in" do
    it "displays a sign up form" do
      within(CSS.sign_up_form) do
        should have_content 'Email'
        should have_content 'Username'
        should have_content 'Password'
        should have_content 'Sign Up With GitHub'
        should have_content 'Sign Up With Facebook'
      end
    end
  end
end