有沒有辦法測試（單元/集成）CSS是否應用於預期的HTML元素？

我現在正在使用Cucumber和Rails測試視圖，並真正享受體驗。我可以輕鬆地說：有沒有辦法測試（單元/集成）CSS是否應用於預期的HTML元素？

Background: 
    Given I am logged in as a customer 
Scenario: View the Welcome Page 
    When I go to the home page 
    Then I should be on the "Welcome" page 
    And I should see the following in the sidebar: 
    | selector     | text    | 
    | h3      | Search    | 
    | .home-page    | Home    | 
    | .about-page    | About    |

現在我想知道，我怎麼能走一步說：

And I should see the following colors on the "Welcome" page: 
    | selector     | background   | 
    | #content     | white    | 
    | #sidebar     | grey    | 
    | #navigation    | blue    |

我覺得我看到了，這是可能的東西，如要做到這一點Node.js或其他服務器端JavaScript，因爲它都是依賴於瀏覽器的。有沒有辦法做到這一點，也許只有Safari和Firefox的Selenium？

我只是想測試主要是顏色和字體，不一定佈局B/C的跨瀏覽器的瘋狂。我怎麼能這樣做？也許有點Jasmine與Cucumber？

謝謝！

更新

感謝@idlefingers，這裏的一些作品：

設置：黃瓜，水豚。

功能/支持/ env.rb：

Capybara.javascript_driver = :selenium

*功能/ step_definitions/css_steps.rb：*

Then /^I should see the color "([^"]+)" on the ([^"]+)$/ do |color, selector| 
    element_color = page.evaluate_script('$("##{selector}").css("border-left-color");') # "rgb(221, 221, 221)" 
    assert_equal color, some_color_conversion_method(element_color) 
end

功能/ some.feature：

And I should see the color "red" on the sidebar

如果有更好的方法，我會愛知道！

來源

2011-02-18 Lance Pollard

我能理解爲什麼你可能要檢查的是正確的ID或類已應用到元素，但我不明白爲什麼你想要直接檢查它的CSS？這將變得非常脆弱 - 僅僅改變顏色的陰影就會破壞你的測試！

此外，我認爲你缺少黃瓜的主要優勢 - 測試行爲，而不是執行。您應該閱讀this - 它會提供一些與您當前測試方式相關的優點。

在回答您的實際問題，如果你真的想這樣做，我能想到的唯一的辦法就是在網頁上執行JavaScript的測試值。這可以在硒中完成（使用get eval）。只要js司機在工作，同樣的事情可以通過水豚來實現。

來源

2011-02-18 15:33:46 idlefingers

你可以使用Webrat（使用引入nokogiri）來測試HTML的身體反應：http://cheat.errtheblog.com/s/webrat/

然後，你可以這樣做：

assert_have_selector "#content.white"

來源

2011-02-18 15:17:24 stef

這將需要我添加渲染特定的類到我寧願避免的元素。尋找完整的方法來檢查計算出的css值。 – 2011-02-18 15:26:34

我得到你 - 我以爲你使用.white作爲課堂......祝你好運！ – stef 2011-02-18 16:15:39

有時需求是元素是某種顏色。可以使用Jasmine等工具對其進行測試，但由於您想驗證最終顯示是否正確，因此基於瀏覽器的集成測試是正確的工具。（爲了讓它在Jasmine中工作，你必須做更多的工作，最終得到一個不太有效的測試......無論如何......）

我寫了一個simple jQuery plugin called Color Spy以便能夠查詢元素關於它的顏色。你可以問：

$(...).backgroundColor() 
$(...).colorColor()

該插件traipses DOM計算顏色。

爲了得到這個Selenium測試的環境中工作，你將需要：

確保插件可以使用。您可以將其包含在您的頁面中，或者有多種方式可以動態地將其引入。
寫一個element_color(selector)測試幫助函數。這將需要使用整個get_eval shenanigans來動態執行一些Javascript。
正常情況下使用assert_equal。（我的jsutils回購中也有一些Javascript函數來聲明顏色的「視覺貼近度」 - 但這是一個不同的問題。）

希望這有助於。

來源

2011-02-18 16:22:19 ndp

有沒有辦法測試（單元/集成）CSS是否應用於預期的HTML元素？

回答

相關問題