config.rb

ENV['browser']          ||= 'firefox'

case ENV['browser']
when 'internet_explorer'
  ENV['browser_version']  ||= '8'
  ENV['operating_system'] = 'Windows XP'
when 'firefox'
  ENV['browser_version']  ||= '26'
  ENV['operating_system'] = 'Windows XP'
when 'safari'
  ENV['browser_version']  ||= '5'
  ENV['operating_system'] = 'OSX 10.6'
when 'chrome'
  ENV['browser_version']  ||= '31'
  ENV['operating_system'] = 'Windows XP'
when 'opera'
  ENV['browser_version']  ||= '12'
  ENV['operating_system'] = 'Windows XP'
end

id_and_class_spec.rb

require_relative 'spec_helper'

describe 'Selectors' do

  def wait_for(seconds = 5)
    wait = Selenium::WebDriver::Wait.new(:timeout => seconds)
    wait.until { yield }
  end

  context 'by ID and Class,' do

    it "with CSS on #{ENV['browser']} #{ENV['browser_version']}" do
      @driver.get 'http://the-internet.herokuapp.com/tables'
      @driver.find_element(css: '#table2 thead .dues').click
      dues = @driver.find_elements(css: '#table2 tbody .dues')
      due_values = []
      dues.each { |due| due_values << due.text.gsub(/\$/,'').to_f }
      (due_values == due_values.sort).should == true
    end

    it "with XPath on #{ENV['browser']} #{ENV['browser_version']}" do
      @driver.get 'http://the-internet.herokuapp.com/tables'
      @driver.find_element(xpath: "//*[contains(@class, 'dues')]").click
      dues = @driver.find_elements(xpath: "//table[@id='table2']//tr/div[contains(@class,'dues')]")
      due_values = []
      dues.each { |due| due_values << due.text.gsub(/\$/,'').to_f }
      (due_values == due_values.sort).should == true
    end

  end

end

Rakefile

# Elemental Selenium Tip 32 "XPath or CSS?"

# Directory Structure
# |-- config.rb
# |-- Rakefile
# `-- spec
#     |-- id_and_class_spec.rb
#     |-- spec_helper.rb
#     `-- traversing_spec.rb

desc 'run tests against all browsers'
task :run do
  `browser='internet_explorer' parallel_rspec --test-options '-r ./config.rb' spec`
  `browser='chrome' parallel_rspec --test-options '-r ./config.rb' spec`
  `browser='firefox' parallel_rspec --test-options '-r ./config.rb' spec`
  `browser='opera' parallel_rspec --test-options '-r ./config.rb' spec`
  `browser='safari' parallel_rspec --test-options '-r ./config.rb' spec`
end

spec_helper.rb

require 'selenium-webdriver'
require 'sauce_whisk'

RSpec.configure do |config|

  config.before(:each) do
    if ENV['host'] == 'localhost'
      @driver = Selenium::WebDriver.for :firefox
    else
      caps = Selenium::WebDriver::Remote::Capabilities.send(ENV['browser'])
      caps.version = ENV['browser_version']
      caps.platform = ENV['operating_system']
      caps[:name] = self.example.metadata[:full_description]

      @driver = Selenium::WebDriver.for(
        :remote,
        :url => "http://#{ENV['SAUCE_USERNAME']}:#{ENV['SAUCE_ACCESS_KEY']}@ondemand.saucelabs.com:80/wd/hub",
        :desired_capabilities => caps)
    end
  end

  config.after(:each) do
    if ENV['host'] != 'localhost'
      if example.exception.nil?
        SauceWhisk::Jobs.pass_job @driver.session_id
      else
        SauceWhisk::Jobs.fail_job @driver.session_id
      end
    end
    @driver.quit
  end

end

traversing_spec.rb

require_relative 'spec_helper'

describe 'Selectors' do

  def wait_for(seconds = 5)
    wait = Selenium::WebDriver::Wait.new(:timeout => seconds)
    wait.until { yield }
  end

  context 'by Traversing,' do

    it "with CSS on #{ENV['browser']} #{ENV['browser_version']}" do
      @driver.get 'http://the-internet.herokuapp.com/tables'

      # sort DUES ascending
      @driver.find_element(css: '#table1 thead tr th:nth-of-type(4)').click

      # get DUES
      dues = @driver.find_elements(css: '#table1 tbody tr td:nth-of-type(4)')
      due_values = []
      dues.each { |due| due_values << due.text.gsub(/\$/,'').to_f }

      # assert DUES are ascending
      (due_values == due_values.sort).should == true

      # sort DUES descending
      @driver.find_element(css: '#table1 thead tr th:nth-of-type(4)').click

      # get DUES
      dues = @driver.find_elements(css: '#table1 tbody tr td:nth-of-type(4)')
      due_values = []
      dues.each { |due| due_values << due.text.gsub(/\$/,'').to_i }

      # assert DUES are desending
      (due_values == due_values.sort).should == false

      # sort EMAIL ascending
      @driver.find_element(css: '#table1 thead tr th:nth-of-type(3)').click

      # get EMAIL values
      emails = @driver.find_elements(css: '#table1 tbody tr td:nth-of-type(3)')
      email_values = []
      emails.each { |email| email_values << email.text }

      # assert EMAIL is ascending
      (email_values == email_values.sort).should == true
    end

    it "with XPath on #{ENV['browser']} #{ENV['browser_version']}" do
      @driver.get 'http://the-internet.herokuapp.com/tables'

      # sort DUES ascending
      @driver.find_element(xpath: "//table[@id='table1']//tr/th[4]").click

      # get DUES
      dues = @driver.find_elements(xpath: "//table[@id='table1']//tr/td[4]")
      due_values = []
      dues.each { |due| due_values << due.text.gsub(/\$/,'').to_f }

      # assert DUES are ascending
      (due_values == due_values.sort).should == true

      # sort DUES descending
      @driver.find_element(xpath: "//table[@id='table1']//tr/th[4]").click

      # get DUES
      dues = @driver.find_elements(xpath: "//table[@id='table1']//tr/td[4]")
      due_values = []
      dues.each { |due| due_values << due.text.gsub(/\$/,'').to_i }

      # assert DUES are desending
      (due_values == due_values.sort).should == false

      # sort EMAIL ascending
      @driver.find_element(xpath: "//table[@id='table1']//tr/th[3]").click

      # get EMAIL values
      emails = @driver.find_elements(xpath: "//table[@id='table1']//tr/td[3]")
      email_values = []
      emails.each { |email| email_values << email.text }

      # assert EMAIL is ascending
      (email_values == email_values.sort).should == true
    end

  end

end