Selen führt Javascript nicht aus

Question

Ich benutze Capybara mit Selen als sein Fahrer. Ich versuche, auf ein Element zu klicken, das, wenn es angeklickt wird, ein div aufdeckt, aber das Klicken ruft nie Javascript auf, um genau das zu tun.

Unten finden Sie den Code Ich habe

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 

Fehlermeldung

Capybara :: ElementNotFound: Kann nicht css "# travel-mal-Vorschau"

html finden

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

Javascript-Code

$(".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(); 
    }); 

Datenbank Reiniger Setup

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 

auszuführen, während ich auf den Link geklickt wird, sehen kann, wird die zugrunde liegende Javascript nicht ausgeführt.

Answer 1

Vorausgesetzt, Sie haben sich in der Dev-Konsole im Firefox-Fenster angeschaut und es gibt keine JS-Fehler, es gibt einige mögliche Gründe für das Verhalten, das Sie sehen, von denen nichts mit e.preventDefault() (wenn Sie hören, Hufe denken Pferde, nicht Zebras)

1. der Link, den Sie zeigen keinen data-preview-target Attribut also nichts für den Click-Handler gibt es zu data-preview-toggle= zu lesen und hängen so umgeschaltet nichts bekommt. Es ist möglich, dass Daten von anderen JS in Ihrer App hinzugefügt werden, so dass sie als Eigenschaft festgelegt werden und kein Attribut im HTML waren (oder Sie haben nur dieses Detail aus dem Element entfernt, das Sie angezeigt haben), das auf # 2

verschoben wird

2. Ihr .on JS-Code wird ausgeführt, bevor das Element existiert und daher nicht angehängt wird. Dies kann im Testmodus auftreten, wenn alle JS in einer Datei verkettet werden, da JS schneller geladen wird, als wenn mehrere Anforderungen im Entwicklungsmodus gestellt werden. Dies würde angezeigt werden, wenn sich der Linktext nicht ändert, da der Click-Handler überhaupt nicht ausgeführt wird. Wenn dies der Fall ist, verzögern Sie das Anhängen des Listeners, bis das DOM geladen ist.

3. Dies ist der erste JS-Unterstützungstest, den Sie schreiben, die Elemente, die ausgeblendet/angezeigt werden, werden aus Datenbankeinträgen generiert und Transaktionstests wurden nicht deaktiviert und/oder database_cleaner nicht korrekt konfiguriert. Dies führt dazu, dass Objekte, die Sie in Ihren Tests erstellen, in Ihrer App nicht wirklich sichtbar sind. Daher ist das Element, das Sie auf der Seite erwarten, nicht vorhanden. Sie können dies überprüfen, indem Sie den Test pausieren und im HTML nachsehen, ob er sich auf der Seite befindet oder nicht.

4. Basierend auf dem Fehler, den Sie zur Verfügung gestellt haben, ist dies nicht die Ursache Ihres Problems, sondern fügt nur die Vollständigkeit der Antwort hinzu: click_link klickt auf den Link und kehrt sofort zurück. Das bedeutet, dass der Test weiterhin ausgeführt wird, während die durch den Klick ausgelöste Aktion fortgesetzt wird. Dies kann zu einer Wettlaufsituation in Ihrem Code führen (wenn Sie Capybara.ignore_hidden_elements = false eingestellt haben - schlechte Idee), wo Ihr Code das Element findet und seine Sichtbarkeit überprüft, bevor es geändert wird.Aus diesem Grunde Ihr letzter Schritt sollte wie unten beschrieben werden, da sie warten/Retry für das Element

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

Als sichtbar zu werden beiseite, kann Ihr Testcode verbessert und beschleunigt durch die Merkmale mit Capybara bietet

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