web-dev-qa-db-fra.com

Comment testez-vous si un div a un certain style CSS dans rspec / capybara?

Comment testez-vous si une balise div a un certain style css? J'essaie de tester s'il a display:none; ou display:block.

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

it {should have_selector('signup_server_generic_errors', /display:\s*none/)}
rubyrspeccapybara
25
Goalie

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

De cette façon, vous pouvez modifier le style CSS sous-jacent tout en conservant la même classe et vos tests réussiront toujours.

La recherche du style sous-jacent est fragile. Les styles changent fréquemment. Baser vos rspecs sur la recherche d'éléments de style spécifiques rend vos tests plus fragiles - ils seront plus susceptibles d'échouer lorsque tout ce que vous ferez sera de changer l'apparence d'une div.

Baser vos tests sur la recherche de classes css rend les tests plus robustes. Il leur permet de s'assurer que votre code fonctionne correctement sans vous obliger à les modifier lorsque vous modifiez le style de la page.

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

Comme ça:

css:

.hidden {
  display:none;
}

html:

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

capybara:

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

Ce capybara cherche juste un div qui a la classe hidden - vous pouvez rendre ce matcher plus sophistiqué si vous en avez besoin.

Mais le point principal est le suivant: attachez des styles aux noms de classes css, puis liez vos tests aux classes, pas aux styles.

40
Kevin Bedell

Vous pouvez utiliser has_css? matcher. Il peut accepter :visible options. Pour plus de détails, vous pouvez consulter les documents: 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) }
12
luacassus

Ma façon de m'assurer que cet élément a 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 quelque chose comme ça

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

8
18augst