Seleniumはjavascriptを実行しません

Question

私はそのドライバとしてSeleniumとcapybaraを使用しています。私は要素をクリックしようとしています。要素をクリックするとdivが表示されますが、クリックするとjavascriptが呼び出されることはありません。以下は

私が持っているコード

scenario 'currently used transport mode cannot be re-selected' do 

expect(page).to have_css("h2.summary") 
expect(find('h2.summary').text).to eq("Single event") 
expect(page).to have_content("Change journey") 
page.click_link("Change journey") 
expect(find('#travel-times-preview').visible?).to be_truthy # FAILS here because of previous step not working 

end 

エラーメッセージ

カピバラ:: ElementNotFoundです：CSSを見つけることができません "＃旅行-回-プレビュー"

HTML

<a class="change-journey gray-text" href="#">Change journey</a> 

私は、リンクがクリックされて見ることができますが

JavaScriptコードが

$(".change-journey").on("click", function(e){ 
     var target = $(this).data("preview-target"); 
     $('[data-preview-toggle="'+ target +'"]').toggleClass("hidden"); 
     if($(this).text().indexOf('Change journey') > -1){ 
     $(this).text("Close Preview"); 
     }else{ 
     $(this).text("Change journey"); 
     } 
    e.preventDefault(); 
    }); 

データベースクリーナーセットアップ

config.before(:suite) do 
    if config.use_transactional_fixtures? 

     raise(<<-MSG) 
     Delete line `config.use_transactional_fixtures = true` from rails_helper.rb 
     (or set it to false) to prevent uncommitted transactions being used in 
     JavaScript-dependent specs. 
     During testing, the Ruby app server that the JavaScript browser driver 
     connects to uses a different database connection to the database connection 
     used by the spec. 

     This Ruby app server database connection would not be able to see data that 
     has been setup by the spec's database connection inside an uncommitted 
     transaction. 
     Disabling the use_transactional_fixtures setting helps avoid uncommitted 
     transactions in JavaScript-dependent specs, meaning that the Ruby app server 
     database connection can see any data set up by the specs. 
     MSG 

    end 
    end 

    config.before(:suite) do 
    DatabaseCleaner.clean_with(:truncation) 
    end 

    config.before(:each) do 
    DatabaseCleaner.strategy = :transaction 
    end 

    config.before(:each, type: :feature) do 
    # :rack_test driver's Rack app under test shares database connection 
    # with the specs, so we can use transaction strategy for speed. 
    driver_shares_db_connection_with_specs = Capybara.current_driver == :rack_test 

    if driver_shares_db_connection_with_specs 
     DatabaseCleaner.strategy = :transaction 
    else 
     # Non-:rack_test driver is probably a driver for a JavaScript browser 
     # with a Rack app under test that does *not* share a database 
     # connection with the specs, so we must use truncation strategy. 
     DatabaseCleaner.strategy = :truncation 
    end 
    end 

    config.before(:each) do 
    DatabaseCleaner.start 
    end 

    config.after(:each) do 
    DatabaseCleaner.clean 
    end 

に実行するために、基礎となるjavascriptのは実行されません。

Answer 1

開かれたFirefoxのウィンドウでデベロッパーコンソールを調べたところ、JSエラーがないと仮定すると、表示されている動作にはいくつかの理由が考えられますが、いずれもe.preventDefault()とは関係ありませんあなたが聞くとひづめ、馬、ないシマウマ）を考える

1. あなたが読んで、そう何がトグルなかっますdata-preview-toggle=に追加するクリックハンドラのための何もないので、data-preview-target属性を持たない示したリンク。あなたのアプリで他のJSによってデータが追加された可能性があります。プロパティとして設定され、HTMLの属性ではありません（または、あなたが示した要素からその詳細を残して選択しました）。＃2に移動します。

2. .on要素が存在する前にJSコードが実行されているため、接続していません。これは、devモードで複数の要求が行われたときよりもJSが高速にロードされるため、すべてのJSを1つのファイルに連結するときにテストモードで表示されます。これは、クリックハンドラがまったく実行されていないため、リンクテキストが変更されないために表示されます。その場合は、DOMがロードされるまでリスナーを接続するのが遅れます。

3. これは、あなたが書いている最初のJSサポートテストです。非表示/表示される要素はデータベースレコードから生成され、トランザクションテストを無効にしたり、database_cleanerを正しく設定したりしていません。これにより、テストで作成したオブジェクトが実際にアプリケーションで表示されないため、ページ上にあると予想される要素は実際には存在しません。テストを一時停止し、HTMLを調べてページ上にあるかどうかを確認することができます。

4. これはエラーの原因ではなく、答えの完全性を追加するだけです。click_linkはリンクをクリックしてすぐに戻ります。つまり、クリックによってトリガーされたアクションが継続している間は、テストは継続して実行されます。これは、あなたのコードが要素を見つけて、変更前にその可視性をチェックするところで、コード内の競合状態につながります（Capybara.ignore_hidden_elements = falseが設定されている - 悪い考え方）。なぜなら、それは待機/さておき、テストコードが改善され、機能を使用して高速化することができるように

   expect(page).to have_css('#travel-times-preview', visible: true) 
   

可視となるように要素の再試行するため、最終的なステップは以下のように記述されるべきであることのカピバラ提供

scenario 'currently used transport mode cannot be re-selected' do 

    expect(page).to have_css("h2.summary", text: "Single event") # do it in one query 
    page.click_link("Change journey") # click_link will find the content anyway so no need to check for it before 
    expect(page).to have_css('#travel-times-preview') # By default Capybara only finds visible elements so checking visibility is pointeless, if you've changed that default see #4 

end