Testing Visual Layout

Working on a responsive Single Page Application. Backend java webservice have solid test, but the AngularJS front end is more difficult. I need to be able to test layout issues on different browsers and at different resolutions. A little bit of googling lead me to Galen Framework.

I started by reading some documentation and then this video. Unfortunately the video is out of date and on Windows and chrome there are a ton of gotchas.

• Add Galen to your path
• Get the selenium chromedriver and place it in the Galen directory, that was added to your path
• Galen is VERY VERY wierd about tabs, you have to use spaces. if there is a tab it ignored it completely making this line

        selenium chrome http://galenframework.com/[tab]1024x768
           Completely different to
        selenium chrome http://galenframework.com/ 1024x768

P.s. if you want IE to work go here you will have to restart your computer

Here are my files that I got working with the video.

introduction.test

@@ Set
  domain galenframework.com

@@ Table devices
  | device     | tags        | size     |
  | mobile     | all,mobile  | 320x640  |
  | desktop    | all,desktop | 1024x768 |

@@ Parameterized using devices
Home page on ${device}
  selenium chrome http://${domain} ${size}
    check homepage.spec --include "${tags}"

command line

galen test introduction.test --htmlreport reports

homepage.spec

=========================================
header-container     id  header
header-brand         css #header .navbar-brand
header-logo          css #header .navbar-brand img

header-news          css #bs-example-navbar-collapse-1 .nav
=========================================

@all
-------------------------
header-container 
  inside: screen 0px top
  width: 100% of screen/width
  height: 50px

header-brand
  inside: header-container 0px top left

header-logo
  width: 26px
  height: 26px  

@desktop
-------------------------
header-news
  visible

@mobile
-------------------------
header-news
  absent