Element not found error when using Capybara webkit but the test runs fine in non-headless mode

Question

I am trying to run a simple google search test in the headless mode using Capybara-webkit.

I have set the drivers as in env.rb file:

Capybara.default_driver = :webkit
Capybara.current_driver = :webkit
Capybara.javascript_driver = :webkit

And the feature file has a simple scenario outline which searches for a input and verifies whether the result contains the expected output:

    Given User opens the google page
    When she searches for "<input>"
    Then verify that the result has "<output>"

    Examples:
    |input                    | output           |
    |Agile Samurai author name|Jonathan Rasmusson|
    |Eloquent Ruby author name|Russ Olsen        |

In the step definition, the google page is visited and the input is entered into the text box and the search button is clicked.

Given /^User opens the google page$/ do
  visit "http://google.com"
end

When /^she searches for "(.*?)"$/ do |search_query|
        fill_in "gbqfq", :with => search_query
        click_button "gbqfba"
end

Then /^verify that the result has "(.*?)"$/ do |output|
        should have_content output
end

When I run these tests, I get the error:

Unable to find field "gbqfq" (Capybara::ElementNotFound)

But, if I change the driver to selenium:

Capybara.default_driver = :selenium
Capybara.current_driver = :selenium
Capybara.javascript_driver = :selenium

then, the tests run and all the steps pass.

In the headless mode, are the elements found in some other way? Is my approach wrong? I am unable to understand why the element is not found in the headless mode when it works fine in the browser mode (that opens firefox instance).

I am a novice in this field, so any help will be deeply appreciated. Thank you in advance.

Lavanya Mohan Lavanya Mohan · Accepted Answer · 2013-01-03T09:23:46

I printed out the source code using puts page.html. I found that the source code was different for the headless mode.

This is part of the text box source code in browser mode:

<input id="gbqfq" class="gbqfif" type="text" value="" autocomplete="off" name="q">

This is part of the text box source code in the headless mode:

<input class="lst" spellcheck="false" dir="ltr" title="Google Search" value="">

As the id does not exist in the headless mode source code, the test fails. If there is some name that is common in both the modes, use that for the tests.

I am not sure why this happens. But google may be loading different pages based on the head or headless modes.

I tried few other websites like flipkart.com which work in both the modes. i.e. The id's, etc are the same in both the modes.

So, there is nothing wrong with the code in the question. Just need to use an id that exists in both the modes.

Element not found error when using Capybara webkit but the test runs fine in non-headless mode

2 Answers