¿Hay alguna manera de probar (Unidad/Integración) que CSS se aplique a los Elementos HTML esperados?

Question

Estoy probando vistas con Cucumber and Rails en este momento y realmente disfruto de la experiencia. Puedo decir:

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    | 

Ahora me pregunto, ¿cómo puedo ir un paso más allá y decir:

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

Siento que he visto que es posible hacer esto con algo como Node.js u otro servidor junto a javascript, porque todo depende del navegador. ¿Hay alguna manera de hacer esto, tal vez con Selenium solo en Safari y Firefox?

Solo quiero probar principalmente colores y fuentes, no necesariamente el diseño b/c de la locura de navegador cruzado. ¿Cómo podría hacer esto? Tal vez un poco Jasmine con Cucumber?

Gracias!

actualización

Gracias a @idlefingers, aquí hay algo que funciona:

Configuración: Pepino, capibara.

características/soporte/env.rb:

Capybara.javascript_driver = :selenium 

* Características/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 

características/some.feature:

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

Si hay una manera mejor, me encantaría ¡saber!

Answer 1

puedo entender por qué es posible que desee comprobar que el ID correcto o la clase se ha aplicado a un elemento, pero no veo por qué querrías comprobarlo directamente. Eso será tan frágil: ¡simplemente cambiar el tono del color romperá tus pruebas!

Además, creo que le falta la principal fortaleza de pepino: el comportamiento de prueba, no la implementación. Debería leer this, ya que brinda algunos buenos puntos que son pertinentes a la forma en que está actualmente probando.

En respuesta a su pregunta real, si realmente desea hacer esto, la única forma en que se me ocurre es ejecutar javascript en la página para probar los valores. Esto se puede hacer en selenio (con get eval). Lo mismo se puede lograr a través del carpincho, siempre y cuando el controlador js esté funcionando.

Answer 2

Usted podría utilizar Webrat (que utiliza Nokogiri) para probar la respuesta del cuerpo HTML: http://cheat.errtheblog.com/s/webrat/

entonces usted puede hacer:

assert_have_selector "#content.white" 

Answer 3

A veces el requisito es que un elemento sea de cierto color. Es posible probar esto con herramientas como Jasmine, pero como quiere validar que la visualización final es correcta, una prueba de integración basada en navegador es la herramienta adecuada.(Para que esto funcione en Jasmine, tendrías que trabajar un poco más y terminar con una prueba menos válida ... de todos modos ...)

Escribí un simple jQuery plugin called Color Spy para poder consultar un elemento sobre sus colores. Puede preguntar:

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

El complemento sigue el DOM calculando el color.

Para conseguir que esto funcione en el contexto de una prueba de selenio, tendrá que:

1. asegúrese de que el plugin está disponible. Puede simplemente incluir esto en su página, o hay varias formas de hacerlo de forma dinámica.
2. escribe una función auxiliar de prueba element_color(selector). Para poder ejecutar Javascript de forma dinámica, será necesario utilizar todo el get_eval shenanigans.
3. Use assert_equal como siempre. (También tengo alguna función de Javascript en mi repositorio jsutils para afirmar "cercanía visual" de colores-- pero esa es una pregunta diferente.)

Espero que esto ayude.