Using data- attributes in SitePrism/Capybara

base.rb

Capybara.add_selector(:test_element) do
  xpath { |name| XPath.css("[data-test-element='#{name}']") }
end

module TestElement
  def test_element(name)
    element(name, :test_element, name.to_s)
  end

  def test_sections(section_name, section_class, matcher_name)
    sections(section_name, section_class, :test_element, matcher_name.to_s)
  end

  def test_section(section_name, section_class, matcher_name)
    section(section_name, section_class, :test_element, matcher_name.to_s)
  end
end

class BaseSection < SitePrism::Section
  extend TestElement
end

class BasePage < SitePrism::Page
  extend TestElement
end

goldfinger_spec.rb

describe "Goldfinger" do
  it { sample_page.user_name.text.should == "James Bond" }
end

sample.html

<div class="css-only-class" id="css-only-id" data-test-element="user_name">James Bond</div>

sample_page.rb

class SamplePage < BasePage
  test_element :user_name
end