WIP: Integrate with Galen framework testing

ci-scripts/test_client.sh

@@ -14,3 +14,6 @@ fi
 
 cd "$TRAVIS_BUILD_DIR"/client
 npm test
+
+# Run galen tests.
+npm run galen -- check ./test/galen/login.gspec --url http://server.local:3000 --size 640x480 --config ./test/galen/galen.travis.config

client/.gitignore

@@ -14,3 +14,6 @@ errorShots/
 
 # Ignore the local config file.
 LocalConfig.elm
+
+test/galen/report
+test/galen/galen.local.config

client/README.md

@@ -37,3 +37,15 @@ npm test
 1. Execute tests with `./node_modules/.bin/wdio wdio.conf.js`
 
 Note: You will have 3 terminal tabs open: One with `gulp`, the other with the selenium standalone server and the third with the executed tests.
+
+## Galen tests
+
+1. Run `gulp`
+1. Copy `./test/galen/galen.config` to `./test/galen/galen.local.config`
+1. Make sure your `$.webdriver.chrome.driver` path is correct (Line 32).
+1. Run the Galen tests:
+
+`npm run galen -- check ./test/galen/login.gspec --url http://localhost:3000 --size 640x480 --htmlreport ./test/galen/report --config ./test/galen/galen.local.config`
+
+Note: You can see the galen reports by opening the following file in your browser:
+`file:///{PATH_TO_PROJECT}/drupal-elm-starter/client/test/galen/report/report.html` 

client/package.json

@@ -10,6 +10,8 @@
     "browser-sync": "2.18.2",
     "del": "1.2.1",
     "elm-test": "0.18.2",
+    "galenframework-cli": "^2.3.4",
+    "geckodriver": "^1.8.0",
     "gulp": "3.9.1",
     "gulp-autoprefixer": "2.3.1",
     "gulp-cache": "0.2.10",
@@ -47,6 +49,7 @@
     "node": ">0.10.0"
   },
   "scripts": {
-    "test": "elm-test src/elm/TestRunner.elm"
+    "test": "elm-test src/elm/TestRunner.elm",
+    "galen": "galen"
   }
 }

client/test/galen/galen.config

@@ -0,0 +1,103 @@
+
+# Range approximation
+# ~~~~~~~~~~~~~~~~~~~~~
+# Defines the approximation value for ranges when using "~" in galen page specs
+# This value means how many pixels or percents should it take constructing a range
+# e.g. if we define approximation as 5 then the following spec:
+#   height: ~ 50 px
+# will actually be replaced by Galen with this:
+#   height: 45 to 55px
+galen.range.approximation=2
+
+
+# Custom Listeners
+# ~~~~~~~~~~~~~~~~~~~~~~~
+# A comma separated list of class paths to reporting listeners
+# The defined listeners will be picked up by Galen and used for reporting
+#
+# galen.reporting.listeners=
+
+
+# Using page urls from last checked page in HTML report
+# ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+# This property enables the use of last page url in a page test
+# Needed when for some pages on the website there is no way to open it by direct url
+# galen.reporting.html.useLastPageUrls = true
+
+# Default browser
+# ~~~~~~~~~~~~~~~~~~~~~~~~
+# A browser that should be used by default in case it was not specified in galen test
+galen.default.browser=chrome
+
+$.webdriver.chrome.driver=/usr/lib/chromedriver
+
+
+# Color scheme spec precision
+# ~~~~~~~~~~~~~~~~~~~~~~~~
+# A value between 8 and 256 for color spectrum accuracy.
+spec.colorscheme.precision = 256
+
+
+# Full screenshots
+# ~~~~~~~~~~~~~~~~~~~~
+# In some browsers it is not possible to create a complete screenshot of whole page.
+# With this property enabled Galen will scroll page and make screenshots of parts of it.
+# Then it will assemble it in a one big screenshot
+#
+galen.browser.screenshots.fullPage = false
+# the following parameter is need in case the upper parameter is set to true
+# it sets the amount of time in milliseconds needed for a check that the page was scrolled when taking full page screenshots
+galen.browser.screenshots.fullPage.scrollWait = 0
+
+
+
+# Color scheme spec test color range
+# ~~~~~~~~~~~~~~~~~~~~~~~~~
+# A value between 0 and 256 which defined the range of nearby colors
+# in spectrum which will be picked up for calculating the percentage of usage
+spec.colorscheme.testrange = 6
+
+
+
+# Running in Selenium Grid
+# ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+# You can run your tests in Selenium Grid without modifying the tests.
+# Just enable the "galen.browserFactory.selenium.runInGrid" property
+# and Galen will always choose a Selenium Grid instead of running tests against local browsers
+# Also make sure you provide the proper url to grid
+#
+# galen.browserFactory.selenium.runInGrid = true
+# galen.browserFactory.selenium.grid.url = http://localhost:4444/wd/hub
+# galen.browserFactory.selenium.grid.browser =
+# galen.browserFactory.selenium.grid.browserVersion =
+# galen.browserFactory.selenium.grid.platform =
+
+
+# Exit with fail code in case of any failures
+# ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+# galen.use.fail.exit.code = true
+
+
+# Test file extension for standard test runner
+# ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+galen.test.suffix=.test
+
+
+# JavaScript Test file extension for JavaScript test runner
+# ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+galen.test.js.file.suffix=.test.js
+
+
+
+# Area finder for page elements
+# ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+# Defines a method of extracting location and size of web element. By default 'native' is used, which means
+# that Galen will use WebElement.getLocation() and WebElement.getSize() Java methods to construct area of page element.
+# But on some devices (e.g. iPhone with iOS 8.0) this would not work and there you need to switch to another method.
+# All possible methods
+# - native - Uses WebDriver methods for getting location and size
+# - jsbased - Uses JavaScript getBoundingClientRect() function in order to get area for page element.
+# - jsbased_native - Uses 'jsbased' method but in case of error goes back to 'native' method
+# - custom - Uses user-defined JavaScript for getting area of page element. If you use this method, you need to also
+#            provide a script via galen.browser.pageElement.areaFinder.custom.script property
+galen.browser.pageElement.areaFinder = native

client/test/galen/galen.travis.config

@@ -0,0 +1,105 @@
+
+# Range approximation
+# ~~~~~~~~~~~~~~~~~~~~~
+# Defines the approximation value for ranges when using "~" in galen page specs
+# This value means how many pixels or percents should it take constructing a range
+# e.g. if we define approximation as 5 then the following spec:
+#   height: ~ 50 px
+# will actually be replaced by Galen with this:
+#   height: 45 to 55px
+galen.range.approximation=2
+
+
+# Custom Listeners
+# ~~~~~~~~~~~~~~~~~~~~~~~
+# A comma separated list of class paths to reporting listeners
+# The defined listeners will be picked up by Galen and used for reporting
+#
+# galen.reporting.listeners=
+
+
+# Using page urls from last checked page in HTML report
+# ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+# This property enables the use of last page url in a page test
+# Needed when for some pages on the website there is no way to open it by direct url
+# galen.reporting.html.useLastPageUrls = true
+
+# Default browser
+# ~~~~~~~~~~~~~~~~~~~~~~~~
+# A browser that should be used by default in case it was not specified in galen test
+galen.default.browser=chrome
+
+$.webdriver.chrome.driver=/usr/lib/chromedriver
+
+
+
+
+# Color scheme spec precision
+# ~~~~~~~~~~~~~~~~~~~~~~~~
+# A value between 8 and 256 for color spectrum accuracy.
+spec.colorscheme.precision = 256
+
+
+# Full screenshots
+# ~~~~~~~~~~~~~~~~~~~~
+# In some browsers it is not possible to create a complete screenshot of whole page.
+# With this property enabled Galen will scroll page and make screenshots of parts of it.
+# Then it will assemble it in a one big screenshot
+#
+galen.browser.screenshots.fullPage = false
+# the following parameter is need in case the upper parameter is set to true
+# it sets the amount of time in milliseconds needed for a check that the page was scrolled when taking full page screenshots
+galen.browser.screenshots.fullPage.scrollWait = 0
+
+
+
+# Color scheme spec test color range
+# ~~~~~~~~~~~~~~~~~~~~~~~~~
+# A value between 0 and 256 which defined the range of nearby colors
+# in spectrum which will be picked up for calculating the percentage of usage
+spec.colorscheme.testrange = 6
+
+
+
+# Running in Selenium Grid
+# ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+# You can run your tests in Selenium Grid without modifying the tests.
+# Just enable the "galen.browserFactory.selenium.runInGrid" property
+# and Galen will always choose a Selenium Grid instead of running tests against local browsers
+# Also make sure you provide the proper url to grid
+#
+# galen.browserFactory.selenium.runInGrid = true
+# galen.browserFactory.selenium.grid.url = http://localhost:4444/wd/hub
+# galen.browserFactory.selenium.grid.browser =
+# galen.browserFactory.selenium.grid.browserVersion =
+# galen.browserFactory.selenium.grid.platform =
+
+
+# Exit with fail code in case of any failures
+# ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+# galen.use.fail.exit.code = true
+
+
+# Test file extension for standard test runner
+# ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+galen.test.suffix=.test
+
+
+# JavaScript Test file extension for JavaScript test runner
+# ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+galen.test.js.file.suffix=.test.js
+
+
+
+# Area finder for page elements
+# ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+# Defines a method of extracting location and size of web element. By default 'native' is used, which means
+# that Galen will use WebElement.getLocation() and WebElement.getSize() Java methods to construct area of page element.
+# But on some devices (e.g. iPhone with iOS 8.0) this would not work and there you need to switch to another method.
+# All possible methods
+# - native - Uses WebDriver methods for getting location and size
+# - jsbased - Uses JavaScript getBoundingClientRect() function in order to get area for page element.
+# - jsbased_native - Uses 'jsbased' method but in case of error goes back to 'native' method
+# - custom - Uses user-defined JavaScript for getting area of page element. If you use this method, you need to also
+#            provide a script via galen.browser.pageElement.areaFinder.custom.script property
+galen.browser.pageElement.areaFinder = native

client/test/galen/login.gspec

@@ -0,0 +1,6 @@
+@objects
+    login-container              css      .ui.login>.ui.segment
+
+= Main section =
+    login-container:
+        width 612px