web-dev-qa-db-ja.com

divにrspec / capybaraの特定のcssスタイルがあるかどうかをどのようにテストしますか？

Divタグに特定のCSSスタイルがあるかどうかをどのようにテストしますか？ display:none;またはdisplay:blockがあるかどうかをテストしています。

私は次のことを試しましたが、エラーが発生しました：

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

CSSスタイルを見つけるのではなく、テストを記述してcssクラス名を見つけることをお勧めします。

このようにして、クラスを同じに保ちながら基になるcssスタイルを変更でき、テストは引き続き成功します。

基になるスタイルの検索は不安定です。スタイルは頻繁に変更されます。特定のスタイル要素の検索に基づいてrspecを作成すると、テストがより脆弱になります。divのルックアンドフィールを変更するだけでテストが失敗する可能性が高くなります。

Cssクラスの検索に基づいてテストを行うと、テストがより堅牢になります。これにより、ページのスタイルを変更するときにコードを変更する必要がなく、コードが正しく機能していることを確認できます。

特にこの場合、1つのオプションは、要素に.hiddenを設定してそれを非表示にするdisplay:none;という名前のcssクラスを定義することです。

このような：

css：

.hidden {
  display:none;
}

html：

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

カピバラ：

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

このカピバラは、hiddenクラスを持つdivを探すだけです。必要に応じて、このマッチャーをさらに洗練させることができます。

しかし、要点はこれです-スタイルをcssクラス名に関連付け、テストをスタイルではなくクラスに結び付けます。

40
Kevin Bedell

has_css?マッチャー。 :visibleオプション。詳細については、ドキュメントを確認してください： http://rdoc.info/github/jnicklas/capybara/Capybara/Node/Matchers#has_css%3F-instance_method

たとえば、次のことを試すことができます。

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

要素に特定のクラスがあることを確認する私の方法：

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

またはこのようなもの

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

私はそれをここで見つけました： http://rubydoc.info/github/jnicklas/capybara/Capybara/Node/Element#%5B%5D-instance_method

8
18augst