Galen Framework
Look and feel testing con
Problemas en el testeo de Interfaz de Usuario
- Manual
- Comparación de Imágenes
- Responsive Design ¿?
...quería tener una solución estable y sostenible para testear diseños responsive en diferentes tamaños de pantalla, así como hacer test de cross-browsing. Yo quería lograr todo esto sin comparación de imágenes, de una manera en que yo describiría cómo un sitio web debería verse de una forma legible para el ser humano.
— Ivan Shubin
Galen Framework
- Escribir pruebas legibles y simples.
- Uso de una sintaxis especial y las reglas completas.
- Test en los diferentes tamaños de dispositivos y navegadores (Selenium, Sauce Labs, BrowserStack)
La idea fundamental detrás de este framework es que debes ser capaz de escribir pruebas visuales y aplicar la técnica de desarrollo guiado por pruebas (TDD) en la Web. Es por eso que tiene su propio lenguaje para expresar el aspecto de la interfaz de usuario.
— Ivan Shubin
@objects
content #content
sidebar #sidebar
= Content =
@on mobile, tablet
sidebar:
below content 20 to 30 px
@on desktop
sidebar:
left-of content 20 to 30 px
Specs
<body>
<div id='search-bar'>
<input type='text' name='search' value=''/>
<a href='#' class='search-button'>Search</a>
</div>
</body>
@objects
search-panel id search-bar
search-panel-input xpath //div[@id='search-bar']/input[@type='text']
search-panel-button css #search-bar a
@objects
search-panel #search-bar
search-panel-input #search-bar input[type='text']
search-panel-button #search-bar a
@objects
search-panel #search-bar
input input[type='text']
button a
<ul id='menu'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Blog</a></li>
<li><a href='#'>Categories</a></li>
<li><a href='#'>About</a></li>
</ul>
@objects
menu-item-* css #menu li a
Rangos
# Rango Exacto
width 100px
# El valor está entre un rango
width 50 to 200 px
# Mayor que
width > 40 px
# Menor que
width < 40 px
# Aproximadamente
width ~ 100 px
# Rangos Relativos
width 50 % of screen/width
width ~ 95 % of screen/width
height > 40 % of screen/height
width 30 to 100 % of screen/width
Tags y Secciones
= Header section =
= Icons and text =
header.icon:
inside header 10px top left
header.caption:
text is "Greetings!"
= User section =
header.username:
inside header 10px top right
= Main section =
@on mobile, desktop
sidebar:
width 300 px
@on mobile
login-button:
width 100px
Variables
@set
commonHeaderMargin 10 to 20px
contentMargin ~ 20px
= Header =
header-icon:
inside header ${commonHeaderMargin} top left
= Content =
article-description:
inside main ${contentMargin} left right
Componentes
@objects
advert-thumb css .advert-thumb
advert-name css .advert-name
advert-corp css .advert-corp
advert-excerpt css .advert-excerpt
advert-location css .advert-location
= User section =
advert-thumb:
inside parent 10px top left
width ~78px
height 74px
advert-name:
inside parent 10px top
near advert-thumb 10px right
css font-size is "18px"
advert-corp:
below advert-name 5px
near advert-thumb 10px
css font-size is "16px"
advert-excerpt:
below advert-corp 5px
near advert-thumb 10px
css font-size is "14px"
advert-location:
below advert-excerpt 5px
near advert-thumb 10px
css font-size is "14px"
related-ads.gspec
Componentes
@objects
advert-row-* css .advert-row
= Related Ads =
advert-row-*:
component related-ads.gspec
Galen soporta las siguientes especificaciones:
- near - comprueba que el objeto esté situado cerca de otro objeto.
- below - comprueba que el elemento se encuentra por debajo de otro objeto.
- above - comprueba que el elemento se encuentra por encima de otro objeto.
- left-of and right-of - comprueba que el elemento se encuentra a la izquierda o derecha de otro objeto.
- inside - comprueba que el elemento se encuentra dentro de otro elemento.
- width - comprueba el ancho del elemento.
- height - comprueba el alto del elemento.
- aligned - comprueba la alineación horizontal o vertical del elemento con otro elementos de la página.
- text - comprueba que el texto que es visible en la página.
- centered - comprueba que el elemento esté centrado dentro de otro elemento.
- absent - comprueba que el elemento está faltante en la página o no está visible.
- contains - comprueba que el elemento contenga visualmente otros elementos dentro suyo.
- on - comprueba que el elemento está situado visualmente en otro elemento.
- color-scheme - comprueba la distribución de color del area del elemento dado.
Running Tests
Simple Page Test
galen check homepage.gspec
--url "http://example.com"
--size "640x480"
--javascript "some.js"
--include "mobile,all"
--exclude "toexclude"
--htmlreport "htmlreport-dir"
--testngreport "report/testng.xml"
--jsonreport "jsonreport-dir"
- url - la url de la pagina a ser testeada.
- javascript - la ruta del archivo javascript que Galen inyectará en la página web.
- include - una lista separada por comas de los tags que se incluirán en las pruebas.
- exclude - una lista separada por comas de los tags que se excluirán de las pruebas.
- size - dimensiones de la ventana del navegador
- htmlreport - ruta de la carpeta en la que Galen debe generar los informes en HTML.
- testngreport - ruta del archivo XML en el que Galen debe escribir el informe testng.
- jsonreport - ruta a la carpeta en la que Galen debe generar los informes JSON.
Test Suites
galen test mytest01.test
--htmlreport "htmlreport-dir"
--testngreport "report/testng.xml"
--jsonreport "jsonreport-dir"
--parallel-tests 4
--filter "Home page on * device"
- htmlreport - ruta de la carpeta en la que Galen debe generar los informes en HTML.
- testngreport - ruta del archivo XML en el que Galen debe escribir el informe testng.
- jsonreport - ruta a la carpeta en la que Galen debe generar los informes JSON.
- parallel-tests - cantidad de hilos para ejecutar pruebas en paralelo.
- filter - un filtro para un nombre de la prueba.
Test Suites
@@ Set
url_login http://example.com/login
Home page on a small mobile device
http://example.com/home 320x600
check homepage.gspec --include "mobile,all" --exclude "nomobile"
Login page on a small mobile device
${url_login} 320x600
check login.gspec --include "mobile,all" --exclude "nomobile"
Archivo .test
Javascript Injection
@@ Set
url_home http://example.com/home
Home page on a small mobile device
${url_home} 320x600
inject homepage.js
check homepage.gspec --include "mobile,all" --exclude "nomobile"
Archivo .test
homepage.js
$('.our_clients_slider').slick('slickPause');
Parametrization
@@ parameterized
| deviceName | tags | size |
| Mobile | mobile | 320x568 |
| Tablet | tablet | 1024x768 |
| Desktop | desktop | 1280x720 |
Home page on ${deviceName} device
http://example.com/home/ ${size}
inject home.js
check home.gspec --include "${tags}"
Archivo .test
Tablas
@@ table devices
| deviceName | tags | size |
| Mobile | mobile | 320x568 |
| Tablet | tablet | 1024x768 |
| Desktop | desktop | 1280x720 |
@@ parameterized using devices
Home page on ${deviceName} device
http://example.com/ ${size}
check homepage.gspec --include "${tags}"
@@ parameterized using devices
Login page on ${deviceName} device
http://example.com/login ${size}
check login.gspec --include "${tags}"
Archivo .test
Ejemplo
Gracias ^▿^
Galen Framework
By Claudia Valdivieso Castillo
Galen Framework
Introducción sobre el uso de Galen Framework para los test de CSS
- 793