Look and feel testing con
...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
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
<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
# 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
= 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
@set
commonHeaderMargin 10 to 20px
contentMargin ~ 20px
= Header =
header-icon:
inside header ${commonHeaderMargin} top left
= Content =
article-description:
inside main ${contentMargin} left right
@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
@objects
advert-row-* css .advert-row
= Related Ads =
advert-row-*:
component related-ads.gspec
Galen soporta las siguientes especificaciones:
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"
galen test mytest01.test
--htmlreport "htmlreport-dir"
--testngreport "report/testng.xml"
--jsonreport "jsonreport-dir"
--parallel-tests 4
--filter "Home page on * device"
@@ 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
@@ 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');
@@ 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
@@ 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