mattheworiordan · August 18, 2011 21:59
diff --git a/features|focus_test.feature b/features|focus_test.feature
 Feature: Capybara Webkit focus test
  In order to show that Capybara Webkit does not allow an element to maintain focus
  I created this feature
  Which anyone can try

  @javascript
  Scenario: Run demo page
    When I am on the capybara demo page
    Then I should see a successful result
diff --git a/features|step_definitions|focus_test_steps.rb b/features|step_definitions|focus_test_steps.rb
 Then /I should see a successful result/ do
  # pause to be extra sure we're not failing for stupid reasons
  sleep 1
  page.evaluate_script("$('#log').text();").should match(/success/)
 end
diff --git a/features|support|paths.rb b/features|support|paths.rb
 # standard code before

    when /the capybara demo page/
      '/focus_test.html'

 # standard code after
diff --git a/focus_test.feature b/focus_test.feature
 Feature: Capybara Webkit focus test
  In order to show that Capybara Webkit does not allow an element to maintain focus
  I created this feature
  Which anyone can try

  @selenium
  Scenario: Run demo page with Selenium
    When I am on the capybara demo page
    And I fill in "inpt" with "Test snapshot"
    Then I should see a successful result
      And the input field should have focus

  @javascript
  Scenario: Run demo page with Capybara Webkit
    When I am on the capybara demo page
    And I fill in "inpt" with "Test snapshot"
    Then I should see a successful result
      And the input field should have focus
diff --git a/focus_test.html b/focus_test.html
 <!DOCTYPE html>
 <html>
 <head>
 <title>Capybara Webkit Focus Test</title>
 <!-- Jquery.focus.test-fix.js must be loaded before JQuery -->
 <script src="/javascripts/jquery.focus.test-fix.js" type="text/javascript"></script>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 </head>
 <body>
  <input type="text" id="inpt"/>
  <p id="log" style="font-family: Arial; font-size: 13px;">Log:</p>
 <script>
 $(function() {
  $('#inpt').focus();
  console.log("This message was fired using console.log");
  $('#log').append($('#inpt').is(':focus') ? 'focus success' : 'focus failure');
 });
 </script>
 </body>
 </html>
diff --git a/focus_test_steps.rb b/focus_test_steps.rb
 Then /I should see a successful result/ do
  # pause to be extra sure we're not failing for stupid reasons
  sleep 1
  page.evaluate_script("$('#log').text();").should match(/success/)
 end

 Then /the input field should have focus/ do
  page.evaluate_script("$('#inpt').is(':focus')").should be_true
  page.evaluate_script("$(':focus')[0] === $('#inpt')[0]").should be_true
 end
diff --git a/jquery.focus.test-fix.js b/jquery.focus.test-fix.js
 /**
 * JQuery tries to use native CSS selectors instead of the Sizzle selector
 * engine for performance reasons.
 *
 * This causes problems when trying to test intefaces using the
 * :focus pseudo selector as unless the web page and browser window
 * has the focus, all elements are considered to be without focus.
 * Checking for :focus in Selenium or Capybara tests therefore fail if
 * using JQuery or Sizzle.
 *
 * Sizzle will however return true for a :focus element even if the
 * window itself has lost focus if we force it not use the native selector functions
 * This script forces Sizzle to use its own engine over native selectors.
 *
 * This file MUST be included before JQuery or Sizzle is loaded
 *
 * Refer to http://blog.mattheworiordan.com/post/9308775285 for more info
 *
 **/

 /* Prevent use of native find selector */
 document.querySelectorAll = false;

 /* Prevent use of native matches selector */
 document.documentElement.matchesSelector = false;
 document.documentElement.mozMatchesSelector = false;
 document.documentElement.webkitMatchesSelector = false;
 document.documentElement.msMatchesSelector = false;
diff --git a/paths.rb b/paths.rb
 # standard code before

    when /the capybara demo page/
      '/focus_test.html'

 # standard code after
diff --git a/public|focus_test.html b/public|focus_test.html
 <!DOCTYPE html>
 <html>
 <head>
 <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 <title>Capybara Webkit Focus Test</title>
 </head>
 <body>
  <input type="text" id="inpt"/>
  <p id="log" style="font-family: Arial; font-size: 13px;">Log:</p>
 <script>
 $(function() {
  $('#inpt').focus();
  $('#log').append($('#inpt').is(':focus') ? 'focus success' : 'focus failure');
 });
 </script>
 </body>
 </html>
	Feature: Capybara Webkit focus test
	In order to show that Capybara Webkit does not allow an element to maintain focus
	I created this feature
	Which anyone can try

	@javascript
	Scenario: Run demo page
	When I am on the capybara demo page
	Then I should see a successful result
	Then /I should see a successful result/ do
	# pause to be extra sure we're not failing for stupid reasons
	sleep 1
	page.evaluate_script("$('#log').text();").should match(/success/)
	end
	# standard code before

	when /the capybara demo page/
	'/focus_test.html'

	# standard code after
	<!DOCTYPE html>
	<html>
	<head>
	<title>Capybara Webkit Focus Test</title>
	<!-- Jquery.focus.test-fix.js must be loaded before JQuery -->
	<script src="/javascripts/jquery.focus.test-fix.js" type="text/javascript"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	</head>
	<body>
	<input type="text" id="inpt"/>
	<p id="log" style="font-family: Arial; font-size: 13px;">Log:</p>
	<script>
	$(function() {
	$('#inpt').focus();
	console.log("This message was fired using console.log");
	$('#log').append($('#inpt').is(':focus') ? 'focus success' : 'focus failure');
	});
	</script>
	</body>
	</html>
	/**
	* JQuery tries to use native CSS selectors instead of the Sizzle selector
	* engine for performance reasons.
	*
	* This causes problems when trying to test intefaces using the
	* :focus pseudo selector as unless the web page and browser window
	* has the focus, all elements are considered to be without focus.
	* Checking for :focus in Selenium or Capybara tests therefore fail if
	* using JQuery or Sizzle.
	*
	* Sizzle will however return true for a :focus element even if the
	* window itself has lost focus if we force it not use the native selector functions
	* This script forces Sizzle to use its own engine over native selectors.
	*
	* This file MUST be included before JQuery or Sizzle is loaded
	*
	* Refer to http://blog.mattheworiordan.com/post/9308775285 for more info
	*
	**/

	/* Prevent use of native find selector */
	document.querySelectorAll = false;

	/* Prevent use of native matches selector */
	document.documentElement.matchesSelector = false;
	document.documentElement.mozMatchesSelector = false;
	document.documentElement.webkitMatchesSelector = false;
	document.documentElement.msMatchesSelector = false;