Browser testing

Browser testing consiste en asegurarse de que un sitio web, o una aplicación web funciona en un cierto navegador. Se basa en ciertas medidas como las siguientes:

  • Funcionalidad básica: los enlaces, diálogos y menús funcionan como deben.
  • Interfaz de usuario: la apariencia se corresponde con la especificación.
  • Graceful Degradation: la experiencia en la aplicación se ajusta entre los diferentes navegadores.
  • Responsividad
  • Rendimiento: se carga la aplicación en un tiempo razonable.

Compatibilidad con navegadores antiguos

Cuando hablamos de navegadores antiguos, solemos hablar de IE. Hay usuarios que no han actualizad su explorador (por la razón que sea) y siguen usando una versión de IE antigua.

Algunas caracterí­sticas que no están en IE pueden complicar nuestro trabajo:

  • Hasta IE 9 no se soportaron los media query
  • Hasta IE 9 no se soportaron los elementos de HTML5
  • Hasta IE 11 no se soportan algunas propiedades, como flexbox (IE 10 utiliza prefijo)

Esto requiere de ciertas consideraciones:

Media Query

Es poco probable que IE8 se ejecute en entorno diferente a una pantalla de entre 800x600 y 1280x1024 pí­xeles (nada de móviles).

HTML5

Existen atajos. Por ejemplo, ubicar en la cabecera lo siguiente, permitirá a IE comprender las etiquetas de HTML5 y enlazar una hoja de estilos especí­fica:

<!--[if lt IE 9]> <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script> <link rel="stylesheet" href="ie8-prev.css" type="text/css"> <![endif]-->

Existen diferentes comentarios condicionales para IE (a partir de IE 10 ya no son soportados):

<!--[if IE]> According to the conditional comment this is IE 6-9 <![endif]--> <!--[if IE 6]> According to the conditional comment this is IE 6 <![endif]--> <!--[if IE 7]> According to the conditional comment this is IE 7 <![endif]--> <!--[if IE 8]> According to the conditional comment this is IE 8 <![endif]--> <!--[if IE 9]> According to the conditional comment this is IE 9 <![endif]--> <!--[if gte IE 8]> According to the conditional comment this is IE 8 or higher <![endif]--> <!--[if lt IE 9]> According to the conditional comment this is IE lower than 9 <![endif]--> <!--[if lte IE 7]> According to the conditional comment this is IE lower or equal to 7 <![endif]--> <!--[if gt IE 6]> According to the conditional comment this is IE greater than 6 <![endif]--> <!--[if !IE]> --> According to the conditional comment this is not IE 5-9 <!--[endif]-->

Segmentar las reglas CSS

Otra cuestión a tener en cuenta es cómo distribuir las reglas. Una buena opción es la planteada en http://www.sitepoint.com/support-old-browsers-responsive-web-design/:

  • Los estilos comunes pueden estar en una hoja llamada common.css
  • Los estilos compatibles con navegadores antiguos, estarán en una hoja llamada simple.css
  • Los estilos más actuales, estarán en una hoja llamada complex.css

Browser testing automático/manual

El testing automático permite preparar pruebas que se ejecutar sin la intervención humana.

El testing manual, en cambio, requiere que una persona compruebe la funcionalidad

Cuándo hacer browser testing

Cuando nuestra aplicación/página debe ser utilizada en diferentes plataformas (iOS, Android, Windows Phone...).

Herramientas para el browser testing

Hay muchas herramientas para hacer cross browser testing. De hecho, hay herramientas para evaluar el código a diferentes niveles. La mayorí­a son de pago. Algunas en cambio son gratuitas.

  • SauceLabs
  • BrowserStack
  • Browserling
  • Browsershots
  • Ghostlab
  • Responsinator
  • Usersnap

Pruebas usando máquinas virtuales

Una última opción es utilizar máquinas virtuales y dispositivos reales.