Bootstrap Klasse bricht Capybara Spezifikationen auf Kreis

Question

Ich habe Reagieren in einer stateless Komponente, die diese zurückgibt:

return (
    <div> 
    <button 
     className="btn btn-default" 
     onClick={handleClick} 
     type="submit" 
    > 
     {selectedAll ? "Deselect All" : "Select All"} 
    </button> 
    </div> 
); 

Aus unbekannten Gründen das Hinzufügen btn btn-default Pausen ein paar Capybara Angaben auf Kreis CI. Capybara wirft nur einige gewöhnliche nicht zufällige Fehler wie Selektor nicht gefunden, nichts unklar. Vor Ort ist alles grün. Ich verwende selenium-webdriver und SitePrism, wenn das wichtig ist.

überprüfte ich diese Fälle:

className="btn btn-default" - fail
className="mysterious-error" - Pass (leere Klasse)
className="mysterious-error btn btn-default" - fail
className="btn"-
Added id zum Einwickeln <div> scheitern - fail
<a className="btn" ... > Gebraucht - fail

ich denke Der nächste Schritt wäre, die Bootstrap btn Klasse zu brechen, aber das scheint mühsam, da es eng mit dem Rest von BS verbunden ist, also hast du vielleicht bessere Ideen?

FOLLOW-UP:

Hinunter der Untersuchung stellte ich fest, dass das, was Kreis verursacht zum Scheitern verurteilt ist eine Spanne zwischen zwei div s, die den fehlerhaften Angaben völlig unabhängig sind. Außerdem spielt es keine Rolle, welche CSS-Eigenschaft ich verwende, um den Rand zu erhöhen: display und margin erhöhen beides und verursachen Fehler.

@twalpole, immer die gleichen sechs Spezifikationen fehlschlagen, wie bereits erwähnt, sie sitzen in einem ganz anderen Bereich der Website, und die Fehler sind eher Standard. Lassen Sie mich Ihnen ein:

describe "Remove Filter button" do 
    context "when it is clicked" do 
    before do 
     filters.select_category(1, "Organisation") 
     filters.select_matcher(1, "contains") 
     filters.select_value(1, "Looney Toons") 
    end 

    it "removes correct filter line" do 
     filters.add_filter 
     expect(filters).to have_selector("div.filter-line-1") 
98 expect(filters).to have_selector("div.filter-line-2") 
     filters.remove_filter_line(2) 
     expect(filters).to have_selector("div.filter-line-1") 
     expect(filters).to_not have_selector("div.filter-line-2") 
    end 
    end 
end 

schlägt mit:

2) Use filters Remove Filter button when it is clicked removes correct filter line 
    Failure/Error: expect(filters).to have_selector("div.filter-line-2") 
     expected to find css "div.filter-line-2" but there were no matches 
    # ./spec/features/filters_spec.rb:98:in `block (4 levels) in <top (required)>' 

Answer 1

Der zusätzliche Rand verlagerte Elemente nach oben, so dass feste Navbar teilweise Action-Taste abgedeckt. Wenn Sie auf diese Schaltfläche klicken, werden die richtigen Selektoren auf der Seite festgelegt. Scham Capybara scheiterte beim Klicken auf den Knopf, es gab sogar "ok".Das den Fehler behoben:

page.execute_script "window.scrollTo(0,0)"

Answer 2

standardmäßig nur Capybara findet Elemente, die in der Seite zu sehen sind. Aus Ihrer Beschreibung klingt es, als ob der Stil, der auf die Schaltflächen angewendet wird, dazu führt, dass das div.filter-line-2-Element außerhalb der Grenzen seines enthaltenen Elements liegt und daher nicht sichtbar ist oder von einem anderen Element überlappt wird. Sie können, dass have_selector indem ich bestätigen Sichtbarkeit

erwarten (Filter) zu ignorieren .to have_selector ("div.filter-line-2", sichtbar: alle)

Wenn der Test funktioniert, dann (Bestätigung der Ausgabe ist, dass das Element gerade nicht sichtbar ist). Je nachdem, warum das Element unsichtbar wird, können Sie beispielsweise versuchen, die Bildschirmauflösung für Circle CI und/oder die Fenstergröße zu erhöhen.