TDD / Probar CSS y HTML?

¿Hay alguna forma de probar CSS y HTML? Por ejemplo: a veces algunos de los avisos se ven afectados por algunos cambios de CSS. No quiero probar todos los avisos a mano cada vez que hago un cambio.

Gracias

Es muy difícil automatizar las pruebas de diseño. Pero no es demasiado difícil reducir drásticamente el tiempo y el esfuerzo involucrados para que pueda hacerlo manualmente, pero muy rápidamente.

Podría intentar Prueba de parpadeo.

He oído que se usa para sitios web como este.

  1. Escriba una secuencia de comandos que recorre su sitio web, visitando tantas páginas como se pueda imaginar.
  2. En cada página, toma una captura de pantalla.
  3. Combine todas las capturas de pantalla en una “película” con solo uno o dos segundos para cada captura de pantalla.
  4. Ahora, todos los días puedes ‘jugar’ la película y verla por cualquier problema.

Incluso podría extender el enfoque de bcarlso, pero reemplace la verificación MD5 con una verificación visual. Cada página se muestra durante 1 segundo: primero el bien conocido, luego el nuevo. Puede alternarlos algunas veces para que cualquier error obvio aparezca como un parpadeo.

Un sitio web con cientos de páginas se puede consultar así en cuestión de minutos. Es posible que no crea que esto proporcionará el tiempo suficiente para encontrar problemas, pero es notablemente eficiente en la identificación de problemas obvios con su sitio web.

Cualquier página que tenga problemas importantes de diseño saltará a la vista, ya que no coinciden con el mismo patrón que todas las otras páginas.

Asumo que el problema que intentas probar es que el CSS cambió de alguna manera incompatible con el diseño, lo que provocó, por ejemplo, que el texto se truncara o se “rompiera” visualmente. Si ese es el caso, entonces diría que no hay una buena manera de probar la estética de una página en este momento. Uno de los principales beneficios de TDD y CI es una respuesta rápida para que sepa que algo está roto antes de que llegue a producción. Al no conocer mucho contexto en torno a su entorno y cómo esos cambios lo convierten en su aplicación, es difícil sugerir soluciones, pero aquí hay un ejemplo de una posible opción no tradicional:

Ponga un gancho de compromiso en su repository que todos los miembros del equipo sepan a través de un correo electrónico cuando alguien cambie algo de CSS. Preferiblemente con una diferencia de CSS. Esto le daría al equipo una pista para estar atentos a los problemas de diseño.

Comenzamos un experimento para usar WATIR para recorrer algunas de las pantallas principales de la aplicación y tomar una foto con ImageMagik (esencialmente una captura de pantalla) y almacenarla en una carpeta “Última información conocida”. Todos los días, vuelva a ejecutar el script en una instalación limpia de la aplicación y los datos, y coloque las imágenes en una carpeta “Actual”. Al final de cada ejecución, use un MD5 para comparar las imágenes y alertar sobre los cambios. Haga que el equipo de control de calidad revise una lista de capturas de pantalla marcadas y, si el cambio fue aceptable (por ejemplo, se agregó un campo como parte de una característica), copie “Actual” en “Último bien conocido”. Desafortunadamente no terminamos nuestro experimento, así que no sé si funcionará bien. Me preocupa la fragilidad de las capturas de pantalla como “afirmaciones”.

¡Espero que ayude!

Creo que Selenium puede probar tus interfaces por ti. Específicamente para las pruebas de compatibilidad del navegador, eche un vistazo a Selenium RC .

Si simplemente desea asegurarse de que sus contenidos estén en los contenidos correctos, etc., puede crear un conjunto de pruebas simple que va a realizar solicitudes GET a su sitio web. Cuando reciba todo el contenido, puede ejecutarlo a través de una plantilla de validación como xslt. El html bien formado usualmente se puede comparar con xslt o xsd. No es ideal, pero si solo te preocupa la estructura de tu sitio web y no el estilo, podrás lograrlo de esta manera.

Un cambio a CSS no debería afectar el comportamiento de una página, solo su apariencia, por lo que no estoy seguro de que el selenium sea de gran ayuda para esto.

Voy a adivinar que está tratando de evitar problemas tales como elementos que se extravían en la página para que no sean legibles. Si es así, probablemente necesitarías algún tipo de herramienta basada en OCR, pero no conozco ningún tipo de herramienta para sugerir.

Sin embargo, puede ser mejor invertir su esfuerzo en la prevención de este tipo de problema en primer lugar. Si su diseño se rompe fácilmente, tal vez necesite refactorizar su CSS a algo más simple.