web-dev-qa-db-ja.com

カピバラで隠された要素と対話することは可能ですか？

opacity: 0があり、偽のボタンと重なっているファイルフィールドがあります。異なるブラウザ間で一貫して表示される一種の「アップロードボタン」を偽造する一般的なcssテクニック。

Capybaraでは、その入力でattach_fileを呼び出すことはできません。エラーはSelenium::WebDriver::Error::ElementNotVisibleError: Element is not currently visible and so may not be interacted withです。

カピバラに目に見えない要素と相互作用させる方法を知っている人はいますか？

答えはまだ回答されていませんが、回避策が見つかりました。インテリジェントなものはなく、単純なスクリプトで要素を表示するだけです

  page.execute_script %Q{
    $('#photos').css({opacity: 1, transform: 'none'});
  }

記録のために投稿します。

capybaraattachment
42
miguel.camba

Capybaraの_visible: false_プロパティを使用して、非表示の要素を操作できます。

隠された要素をクリックする場合：

_find("#photos", visible: false).click
_

click_button('#photo')を直接使用しないでください

72
Vijay Chouhan

カピバラの著者は、Capybara.ignore_hidden_elements 目に見えない要素を見る必要がある直前に、後でそれをリセットします：

Capybara.ignore_hidden_elements = false
click_button 'my invisible button'
Capybara.ignore_hidden_elements = true
19
user664833

一般に、Capybaraを使用する場合、非表示要素とのやり取りはできません（visible: false/hiddenオプションはほとんどのファインダーで使用できますが、実際には何もしません）。ただし、要素を非表示にするのが一般的であるため、ファイル入力は特殊なケースであり、セキュリティ上の制限により、ページの可視要素と対話することによってファイルを実際に追加する他の方法はありません。このため attach_file があります make_visibleオプションは、Capybaraに要素を表示させ、ファイルを添付し、CSSを元の設定にリセットするために使用できます。

attach_file('photos', file_path, make_visible: true)
5
Thomas Walpole

私はそれを別のルートで解決することになりました。

execute_script()は私に苦労していました（FireFoxでのテスト実行をフリーズするでしょう）ので、これは私がやったことです：

すでに適切なjavascriptファイルがありました。以下を追加しました

<% if ENV["Rails_ENV"] == "test" %>
  $('#photos').show()
<% end %>

適切なRailsアセット処理のために、.erbをjavascriptファイルに追加する必要もありました。

そして、私のテストファイルでは、すでにENV["Rails_ENV"] = "test"を設定していました

このようにして、テストのためにUIをダムするだけで、プロダクションのルックアンドフィールを維持することができました。

0
Jay

Miquel、workaraundに感謝します。

Selenium Webdriver 2.35およびFirefox 24のC＃バインディングで隠しファイル入力とやり取りする場合、同様の問題があります。ファイル選択を機能させるには、同様のトリックを行いました。

((IJavaScriptExecutor)webdriver).ExecuteScript("$('#fileUploadInput').css({opacity: 1, transform: 'none'});");

IWebElement e = webdriver.FindElement(By.CssSelector("input#fileUploadInput")));

e.SendKeys("c:\\temp\\inputfile.txt");
0
Alexander Kobets

非表示要素が表示可能な親要素にネストされている場合（表示ラベル内の非表示入力など）、代わりに親をクリックできます。それでもIDで入力を検索する場合は、次のように親に移動できます。

find('#hidden_input').find(:xpath, '..').click
0
Kevin Qi

CSSスタイルdisplay:none;が設定されている要素を使用して、この方法でこれを実行しました。

page.execute_script("$('.all-hidden-elements').show();");
all('.all-hidden-elements').first.click
0
karlingen