title: Rspec & Capybara: Setting focus to an element using jQuery doesn't apply `:focus` CSS
body: <p>I have jump links for blind and keyboard users in my webpage which are moved out of the viewport to hide them visually; when they gain focus, they are moved into the viewport.</p>
  
  <p>I want to test this behaviour using RSpec and Capybara, but it somehow doesn't work.</p>
  
  <pre><code>  it 'moves the focus to the navigation when activating the corresponding link', js: true do
      expect(page).not_to have_css '#main:focus'
      page.evaluate_script "$('#jump_to_content &gt; a').focus()"
      click_link 'Jump to content'
      expect(page).to have_css '#main:focus'
    end
  </code></pre>
  
  <p>The JavaScript in <code>evaluate_script</code> doesn't seem to be executed properly. I tried the same JS (<code>$('#jump_to_content &gt; a').focus()</code>) in the Chrome console, and I'm a bit unsure about the result, because while in the console, the link doesn't appear, but when clicking into the browser view, it appears for a part of a second and disappears again (it disappears because it doesn't have the focus anymore then). In my opinion it should be displayed directly after executing the JS.</p>
  
  <p>This makes me a bit insecure about all this. Any help is highly appreciated.</p>
  
  <p><strong>Update</strong></p>
  
  <p>I meanwhile have come to the conclusion that the behaviour of Chrome is normal: focus is kept in the console, so the element in fact doesn't really receive focus and doesn't show.</p>
  
  <p>I have also come to the conclusion that Capybara doesn't seem to be able to handle focusing an element (and applying <code>:focus</code> styles) properly.</p>
  
  <p>I have created the following CSS rules:</p>
  
  <p>a#jump_to_navigation
      color: black</p>
  
  <pre><code>&amp;:focus
    color: red
  </code></pre>
  
  <p>For testing this, I have set up this very specific test:</p>
  
  <pre><code>visit root_path
  
  selector = 'a#jump_to_navigation'
  
  # Initial style
  expect(page.evaluate_script('document.activeElement.id')).to eq ''                  # Make sure the link isn't focused yet
  expect(page.evaluate_script("$('#{selector}').css('color')")).to  eq 'rgb(0, 0, 0)' # Color initially is black
  
  # Set focus
  page.evaluate_script("$('#{selector}').focus()")
  
  # Focused style
  expect(page.evaluate_script('document.activeElement.id')).to eq 'jump_to_navigation'  # Make sure the link is focused now
  expect(page.evaluate_script("$('#{selector}').css('color')")).to  eq 'rgb(255, 0, 0)' # Color is now red
  </code></pre>
  
  <p>The test breaks like this:</p>
  
  <pre><code>1) Navigation jump links visually displays them only on focus
     Failure/Error: expect(page.evaluate_script("$('#{selector}').css('color')")).to  eq 'rgb(255, 0, 0)' # Color is now red
  
       expected: "rgb(255, 0, 0)"
            got: "rgb(0, 0, 0)"
  
       (compared using ==)
  </code></pre>
  
  <p>So the focus is set properly, but the <code>:focus</code> styles aren't applied. I guess this is a problem with PhantomJS?</p>
  
  <p>I'd be very happy to find a solution around this problem.</p>