Pruebas de regresión para estilo y diseño de aplicaciones web

Question

Me doy cuenta de que esta es una tarea no trivial, pero ¿hay alguna manera de probar la regresión del diseño y el diseño de una aplicación web? He encontrado que es sencillo para la prueba unitaria y la funcionalidad de prueba de regresión, tanto del lado del servidor como del lado del cliente. Sin embargo, un problema frustrante con el que me he encontrado son los cambios de CSS realizados para solucionar un problema de diseño que rompe el diseño y el estilo en una página diferente. La única forma en que sé cómo detectar esto es ver manualmente cada página en una aplicación y compararla con mis propias expectativas, pero obviamente esto puede ser oneroso y costoso cuando una aplicación puede tener docenas de páginas. ¿Ha habido alguna investigación que utilice el procesamiento de imágenes u otras técnicas para detectar este tipo de problemas automáticamente?

Answer 1

En realidad, una de las gemas escondidas de Selenium es que puedes usarla para tomar capturas de pantalla del navegador. Luego, utilizando una técnica como se describe aquí (http://www.bryancook.net/2009/10/find-differences-between-images-c.html) puede resaltar las diferencias entre las instantáneas anteriores.

Este ejemplo muestra cómo tomar una captura de pantalla de la página de inicio y luego crear una imagen diferente. Con un poco de retoque adicional, puede usar la misma técnica para contar los píxeles que son diferentes.

[Test] 
public void CompareHomePageToPrevious() 
{ 
    string fileName = Path.Combine(Environment.CurrentDirectory,"homepage.bmp"); 
    var selenium = new DefaultSelenium("localhost",4444, "*chrome", "http://mywebsite"); 
    selenium.Start(); 
    selenium.Open("/"); 
    selenium.CaptureEntirePageScreenshot(fileName, ""); 

    // load current and previous captures 
    var current = new Bitmap(filename); 
    var previous = new Bitmap(_previousHomepageImage); 

    // find all pixels that are the same and make them pink 
    Bitmap diff = ImageTool.GetDifferenceImage(current,previous,Color.Pink); 
    diff.MakeTransparent(Color.Pink); 

    // save the image for viewing 
    // or count the number of different 
} 

El selenio es una opción muy interesante porque es multiplataforma y multi-navegador, lo que significa que puede capturar pantallas de diferentes navegadores. Puede utilizar esta técnica para comparar instantáneas entre compilaciones o para comparar entre navegadores.

Answer 2

Supongo que podría generar una captura "ideal" de cada página en su aplicación web para usar como referencia.

A continuación, genere una nueva toma de cada página después de una actualización CSS y compárela con las anteriores. Una comparación 1: 1 debería estar bien si se asegura de mantener siempre la misma resolución, etc.

Incluso podría hacerlo para que pueda decirle que si la página difiere, la otra página es realmente "mejor" que el ejemplo y para usar el 'otro' como el ejemplo para las próximas ejecuciones.

De esta manera, cuando arreglas algo, puedes ver la diferencia para una página y marcarla como mejor, y luego corregir un error en otra página mientras te aseguras de no retroceder el error que estabas tratando de corregir en primer lugar.

Answer 3

Debe consultar Web Consistency Testing como un enfoque para hacer sus pruebas de regresión. Usamos esas técnicas para impulsar Mogotest, que es un servicio alojado para hacer regresiones visuales automáticas y pruebas entre navegadores. En los años posteriores a la publicación de esta respuesta, cerré el servicio de Mogotest. La mención aquí se deja como un artefacto histórico para indicar que las técnicas se usaron en un sistema de producción y no solo en forrajes académicos.

Answer 4

Si se está desarrollando en rubí, eche un vistazo a la gema rspec-page-regression. Es un complemento RSpec que le permite comparar las instantáneas de página solicitadas con una imagen esperada. Funciona con Poltergeist, que es un controlador Capybara que usa PhantomJS y admite instantáneas de página de representación.

Rspec páginas regresión proporciona una matcher RSpec que le permite hacer cosas como

context "user page" do 
    before(:each) do 
    visit user_path 
    end 

    it { page.should match_expected } 

    context "popup help" do 
    before(:each) do 
     click_button "Help" 
    end 

    it { page.should match_expected } 
    end 
end 

Y proporciona un mecanismo para gestionar las imágenes de expectativas.

Descargo de responsabilidad: soy el autor de la gema.

Answer 5

Hay una manera de probar el diseño de una aplicación web utilizando Galen Framework. Esta herramienta tiene su propio lenguaje y es muy fácil de aprender y entender. Se basa en Selenium y puede ejecutar la prueba en Selenium Grid, Sauce Labs si desea probar su aplicación en diferentes navegadores.

Esta herramienta obtiene la ubicación del elemento especificado en la página y las verifica relativamente entre sí.

Ejemplo: si desea comprobar que panel de menú está por debajo de la cabecera y se extiende a la anchura de un navegador y tiene altura de 50 píxeles, puede hacerlo de esta manera:

menu 
    below: header 5px 
    width: 100% of screen/width 
    height: 50px 

Esta herramienta puede ser también utilizado para probar diseños receptivos.

Puede encontrar documentación completa en el sitio oficial http://galenframework.com

La mejor parte es que usted puede incluso crear pruebas JAVA. Galen JavaScript API también está disponible junto con los proyectos de muestra en github.

De nuevo, la (s) prueba (s) escrita (s) una vez se pueden usar en múltiples fases del ciclo de vida de la aplicación.