如何測試div是否在rspec/capybara中具有某種css風格？

Question

如何測試div標籤是否具有某種css風格？我試圖測試它是否有display:none;或display:block。

我嘗試以下，但它給我的錯誤：

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

Answer 1

我建議，而不是試圖找到css樣式，而不是你寫你的測試，以找到CSS類名。

通過這種方式，您可以更改基礎CSS樣式，同時保持類相同，並且您的測試仍將通過。

尋找潛在的風格是脆弱的。風格經常變化。根據您的rspecs查找特定的樣式元素會使您的測試更脆弱 - 當您所做的只是更改div的外觀和感覺時，它們更有可能失敗。

將您的測試發現到CSS類使測試更健壯。它允許他們確保代碼正常工作，而不需要在更改頁面樣式時更改代碼。

在這種情況下，具體來說，一個選項可能是定義一個名爲.hidden的css類，它在元素上設置display:none;以隱藏它。

像這樣：

CSS：

.hidden { 
    display:none; 
} 

HTML：

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

水豚：

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

這水豚只是尋找具有hidden一個div類 - 如果你需要，你可以使這個匹配器更復雜。

但重點是 - 將樣式附加到css類名，然後將測試綁定到類，而不是樣式。

Answer 2

您可以使用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) }

Answer 3

我的方式，以確保該元素具有一定的類：

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 

或smthing這樣

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

我在這裏找到它了： http://rubydoc.info/github/jnicklas/capybara/Capybara/Node/Element#%5B%5D-instance_method