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 ^▿^

Made with Slides.com