7

Rails 3.2.8を使用しています

  • 宝石「jquery-rails」、「2.1.2」
  • gem 'rails3-jquery-autocomplete', '1.0.9'
  • gem 'rspec-rails', '2.11.4'
  • 宝石「カピバラ」、「1.1.3」
  • gem 'capybara-webkit', '0.12.1'

最近、選択ドロップダウンをオートコンプリートに変換し (rails3-jquery-autocomplete を使用)、リクエスト仕様を更新してオートコンプリートに入力しようとしています。

私のアプローチは、この要点に示すようにヘルパーを作成することでした:

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

  selector = "ul.ui-autocomplete a:contains('#{options[:select]}')"

  page.should have_selector selector
  page.execute_script "$(\"#{selector}\").mouseenter().click()"
end

Webkit でそれをテストすると、テストは次のメッセージで失敗します。

expected css "ul.ui-autocomplete a:contains('Firstname Lastname')" to return something.

Selenium でテストする場合、Firefox でテストの進行を見ていると、ドロップダウンの選択リストが表示されません。ドロップダウンを待つためにa を追加sleep 3しても役に立ちません。

ここで、capybara-webkit に関連するがやや古い問題があることがわかります。フィールドに入力するとすぐにぼやけてしまい、もちろんオートコンプリートの選択リストが表示されなくなります。しかし、これを機能させた他の人たちとはうまくいかないようです。

rails3-jquery-autocomplete フィールドを含むフォームを RSpec と Capybara でテストすることは現在可能ですか? どのように？idそうでない場合、フォームが正しいデータを作成することをテストできるように、対応する隠しフィールドに手動で入力する方法はありますか?

4

5 に答える 5

10

最後に、少なくとも Selenium ドライバーで動作するオートコンプリート テストを取得しました。

解決策は、フィールドにフォーカスを置き、keydown イベントを発行することです。

これは、ブラウザでの手動テストで最初に確認しました。マウス (Ctrl-V ではなく) を使用して検索用語をオートコンプリート フィールドに貼り付けても、ドロップダウン ピック リストが表示されません。これは明らかに、Capybara が fill_in コマンドを送信したときに起こることと同等です。ただし、用語がフィールドに入力された後、フォーカスがまだフィールドにある間に Shift キーなどの任意のキーに触れると、選択リストが表示されます。そのため、キーが押されたときにのみ選択リストが表示されるようです。

オプション1

1 つの解決策は、次のように元の質問から関数を拡張することです。

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 = "ul.ui-autocomplete a:contains('#{options[:select]}')"

  page.should have_selector selector
  page.execute_script "$(\"#{selector}\").mouseenter().click()"
end

そして、次のように呼び出します。

fill_autocomplete "to_contact_name", with: "Jone", select: "Bob Jones"

オプション 2

メインの rails3-jquery-autocomplete gem のSteak テストから採用された同様のアプローチでは、標準の fill_in を使用し、その後にこの choose_autocomplete_result を使用します。

def choose_autocomplete_result(item_text, input_selector="input[data-autocomplete]")
  page.execute_script %Q{ $('#{input_selector}').trigger("focus") }
  page.execute_script %Q{ $('#{input_selector}').trigger("keydown") }
  # Set up a selector, wait for it to appear on the page, then use it.
  item_selector = "ul.ui-autocomplete li.ui-menu-item a:contains('#{item_text}')"
  page.should have_selector item_selector
  page.execute_script %Q{ $("#{item_selector}").trigger("mouseenter").trigger("click"); }
end

これは次のように呼び出されます。

fill_in "to_contact_name", :with => "Jone"
choose_autocomplete_result "Bob Jones", "#to_contact_name"

テストには 2 番目のアプローチを採用しました。Selenium ではかなり信頼できるように見えますが、Webkit では動作しません。これは残念なことです。Selenium のテストは比較すると非常に遅いからです。webkit で動作するソリューションは大歓迎です!

于 2012-11-03T20:26:25.533 に答える
1

もう 1 つのオプションは、カピバラのsend_keysメソッドです。

find('#my_object_id').send_keys 'bob'

私は、keydown/focus/mouseenter イベントを起動するために javascript を挿入するよりも、このオプションを好みます。

于 2016-04-29T15:27:22.987 に答える