Comment tester si un div a un certain style css dans rspec/capybara?

Comment tester si une balise div a un certain style css? Je suis en train de tester, si il a display:none; ou display:block.

J'ai essayé ce qui suit, mais sa me donne une erreur:

it {should have_selector('signup_server_generic_errors', /display:\s*none/)}
  • quelle est l'erreur?
InformationsquelleAutor Goalie | 2012-06-25
  1. 39

    Je recommande qu'au lieu d'essayer de localiser le style css, vous au lieu d'écrire vos tests pour trouver la nom de classe css.

    De cette façon, vous pouvez modifier le css sous-jacent de style tout en gardant la classe la même et vos tests passent encore.

    À la recherche pour le style est fragile. Les Styles changent fréquemment. Basez votre rspecs sur la localisation des éléments de style qui rend vos tests de plus en plus fragiles -- ils seront plus susceptibles d'échouer lorsque tous vous avez à faire est de changer un div à l'aspect et la convivialité.

    Baser vos tests sur la recherche de classes css rend les tests plus robuste. Il leur permet de s'assurer que votre code fonctionne correctement, tout en ne nécessitant pas de vous changer quand vous changez de page style.

    Dans ce cas précis, une option pourrait être de définir une classe css nommé .hidden qui définit display:none; sur un élément pour le cacher.

    Comme ceci:

    css:

    .hidden {
  display:none;
}

    html:

    <div class="hidden">HIDE ME!</div>

    capybara:

    it {should have_css('div.hidden') }

    Ce capybara semble juste un div qui a le hidden classe -- vous pouvez faire ce matcher plus sophistiquée si vous avez besoin d'.

    Mais le point principal c'est de fixer les styles pour les noms de classe css, alors, attachez vos tests en cours, pas les styles.

    • En général, il est de bon conseil, avec au moins une exception: si vous essayez de tester si un élément est visible pour l'utilisateur. Si c'est le cas, le test de la présence d'une classe CSS est la mauvaise chose à faire parce que ce serait de tester la mise en place de l', les résultats et le point de l'essai est de vous permettre de changer la mise en œuvre et de s'assurer que vous obtenez les mêmes résultats. Si vous êtes, en fait, de tester si un élément est visible pour l'utilisateur, voir luacassus de réponse.
    • à l'aide de bonnes classes css peut vous aider avec ceci, par exemple, il est typique de voir advanced front-end devs utiliser une classe comme .is-hidden { display: none; } ou similaire qui est ensuite ajoutée à l'aide de javascript ou rendus au chargement de la page. Test de l'existence de cette classe serait assez robuste; je dirais que le problème est en partie liée avec l'extrémité avant d'une mauvaise pratique ($(elem).css('display', 'none'); par exemple)
    • J'ai essayé d'obtenir à la différence entre les tests de la mise en œuvre (de l'élément a de la classe à laquelle il sera caché) et le test de la chose réelle qui vous intéressent (c'est l'élément caché). IMO, c'est un aspect critique de l'écriture utile tests. Tester la chose réelle que vous vous souciez signifie que vous pouvez restructurer tout et chaque chose à propos de la façon dont vous obtenez le résultat et votre test vous permettra de savoir si vous avez refait correctement. Si, d'autre part, de tester la mise en œuvre, le test devient inutile dès que vous modifiez la mise en œuvre.
    InformationsquelleAutor Kevin Bedell
  2. 12

    Vous pouvez utiliser has_css? matcher. Il peut accepter :visible options. Pour plus de détails, vous pouvez vérifier docs: http://rdoc.info/github/jnicklas/capybara/Capybara/Node/Matchers#has_css%3F-instance_method

    Par exemple, vous pouvez essayer:

    it { should have_css('div.with-some-class', :visible => true) }
    InformationsquelleAutor luacassus
  3. 8

    Ma façon à s'assurer que l'élément ont une certaine classe:

    let(:action_items) { page.find('div.action_items') }

it "action items displayed as buttons" do
  action_items.all(:css, 'a').each do |ai|
    expect(ai[:class]).to match(/btn/)
  end
end

    ou smthing comme ce

    expect(ai[:style]).to match(/color: red/)

    Je l'ai trouvé ici: http://rubydoc.info/github/jnicklas/capybara/Capybara/Node/Element#%5B%5D-instance_method

    InformationsquelleAutor 18augst