Тестирование JQuery автозаполнения пользовательского интерфейса с огурцом

Question

Я получил этот огурец sceanario:

When I fill in "End User" with "john"
Then wait
Then wait
When I click "John Doe"
Then show me the page

Определения шагов:

Then /^wait$/ do
  sleep 2
end

When /^(?:|I )click "([^"]*)"$/ do |selector|
  find(":contains('#{selector}')").click
end

Проходит, но не выбирает пользователя. «Конечный пользователь» равен «Джону» в «Покажи мне страницу».

Я даже не могу заставить его работать в консоли javascript. Следующий код ничего не выбирает.

$(":contains('John Doe')").last().trigger('click')
# => [<a class=​"ui-corner-all" tabindex=​"-1"...

Как мне написать сценарий выбора автозаполнения? Будь то в чистом JavaScript или в огурце.

Answer 1

Дайте ему шанс

When /^I type in "([^\"]*)" into autocomplete list "([^\"]*)" and I choose "([^\"]*)"$/ do |typed, input_name,should_select|
   page.driver.browser.execute_script %Q{ $('input[data-autocomplete]').trigger("focus") }
   fill_in("#{input_name}",:with => typed)
   page.driver.browser.execute_script %Q{ $('input[data-autocomplete]').trigger("keydown") }
   sleep 1
   page.driver.browser.execute_script %Q{ $('.ui-menu-item a:contains("#{should_select}")').trigger("mouseenter").trigger("click"); }
end

Используйте вот так

And I type in "Foo" into autocomplete list "input_id" and I choose "Foobar"

Answer 2

Я тоже столкнулся с тем же болевым пятном. Потратив на это несколько часов, у меня есть один хороший помощник, который работает как с селеном, так и с polstergeist, и не использует sleep(). Следующий код был протестирован с Capybara 2.1.0:

  def fill_autocomplete(field, options = {})
    fill_in field, with: options[:with]

    page.execute_script %Q{ $('##{field}').trigger('focus') }
    page.execute_script %Q{ $('##{field}').trigger('keydown') }
    selector = %Q{ul.ui-autocomplete li.ui-menu-item a:contains("#{options[:select]}")}

    page.should have_selector('ul.ui-autocomplete li.ui-menu-item a')
    page.execute_script %Q{ $('#{selector}').trigger('mouseenter').click() }
  end

Обычно я говорю Capybara заполнить поле ввода, а затем использую JS, чтобы вызвать событие keydown, чтобы активировать автозаполнение. Однако вместо sleep() я использую преимущество page.should have_selector('ul.ui-autocomplete li.ui-menu-item a'), которое ожидает появления раскрывающегося списка. Затем я использую JS, чтобы вызвать событие mouseenter, затем нажимаю. Я бы хотел, чтобы был лучший способ, чем работать с JS eval, но это самое надежное решение, которое я мог бы найти.

Answer 3

Вам нужно сначала навести курсор мыши, затем щелкнуть мышью.

Answer 4

Хотя это не решение, это может привести вас к пути решения:

событие click привязано к UL, а не a или li:

$ ('ul.ui-autocomplete'). click ();

Однако у меня это не сработало.Я предполагаю, что событие click основано на каком-то состоянии с (a) s и (li) s.Он добавляет несколько классов и идентификатор к текущему элементу, который я смоделировал ...

$ ('a.ui-corner-all'). Attr ('id', 'ui-active-menuitem') $ (' a.ui-corner-all '). addClass (' ui-active-menuitem ')

Все еще нет кубиков.Никаких ошибок, но и никаких действий.

Это должно привести к правильному пути ... Я просто хотел бы понять это!