@javascript cucumber tests pass using selenium driver but fail when using poltergiest

Question

I'm trying to test an jquery UI autocomplete, I've got the tests passing using the selenium driver. I want to switch to poltergiest for some headless testing, but now my tests are now failing.

It doesn't seem to select the autocomplete option for some reason that I have yet been able to figure out

Step

When /^select contract$/ do
  VCR.use_cassette("contract") do
    selector =
      '.ui-menu-item a:contains("John Smith (123456)")'
    within("div#review") do
      fill_in("contract", with: "john")
    end
    sleep 2
    page.execute_script "$('#{selector}').trigger(\"mouseenter\").click();"

    within("div#myPerformaceReview") do
      find_field("contract").value.should ==
        "John Smith (123456)"
    end
  end
end

The test passes using the Selenium driver without any changes to the step.

Any advice on how I could debug this?

Version

• selenium-webdriver (2.27.2)
• poltergeist (1.0.2)
• cucumber (1.2.1)
• cucumber-rails (1.0.6)
• capybara (1.1.4)
• phantomjs 1.8.1

Flexuous

At which row does this test fail? – Trehala

when I assert that the field should hold the text from the autocomplete: find_field("contract").value.should == "John Smith (123456)". The page.execute_script does not seem to fire correctly. – Flexuous

Answer 1

I've managed to figure it out, it seems capybara-poltergeist driver doesn't trigger any of the events that jquery-ui uses to display the dropdown list.

I found the answer here: https://github.com/thoughtbot/capybara-webkit/issues/50

I created a form helper in features/support

module FormHelper
  def fill_in_autocomplete(selector, value)
    page.execute_script %Q{$('#{selector}').val('#{value}').keydown()}
  end

  def choose_autocomplete(text)
    find('ul.ui-autocomplete').should have_content(text)
    page.execute_script("$('.ui-menu-item:contains(\"#{text}\")').find('a').trigger('mouseenter').click()")
  end
end
World(FormHelper)

I then used those method to fill in the form and select the desired option.

Flexuous

Answer 2

Martin's answer almost worked for me, but I found that the input needs to be focused as well to make it work:

module FormHelper
  def fill_in_autocomplete(selector, value)
    page.execute_script %Q{$('#{selector}').focus().val('#{value}').keydown()}
  end

  def choose_autocomplete(text)
    find('ul.ui-autocomplete').should have_content(text)
    page.execute_script("$('.ui-menu-item:contains(\"#{text}\")').find('a').trigger('mouseenter').click()")
  end
end

Found this on the same page: https://github.com/thoughtbot/capybara-webkit/issues/50#issuecomment-4978108

Pelagi