Trying to use with Chromedriver: Module not defined error

[jepster]

I am using Wraith in version 4.2.3.

I want to use Wraith with Chromedriver (since PhantomJS is no longer maintained). Tried to simply set chrome in my configs. Chromedriver is supported by Wraith. See https://github.com/BBC-News/wraith/pull/541. However, I am getting errors, if I execute: ./scripts/wraith_baseline.sh. No screenshots are being created.

I am using Chromedriver successfully in other projects.

My questions: Do I need Chromedriver "and" CasperJS? Is there any documentation about using Chromedriver instead of PhantomJS? So far I have only found description for PhantomJS.

See my error output and executed commands below.

---

Reporting a problem? Please describe the issue above, and complete the following checklist so that we can help you more quickly.

Issue checklist:

• [ X] I have validated my config file against YAML Validator to make sure it is valid YAML.

• [ X] I have run the wraith info command and pasted the output below:
  DEBUG: #################################################
  DEBUG: Command run: info
  DEBUG: Wraith version: 4.2.3
  DEBUG: Ruby version: ruby 2.3.3p222 (2016-11-21 revision 56859) [x86_64-darwin13]
  DEBUG: ImageMagick: Version: ImageMagick 6.9.6-2 Q16 x86_64 2017-11-27 http://www.imagemagick.org
  DEBUG: PhantomJS version: PhantomJS not installed
  DEBUG: chromedriver version: ChromeDriver 71.0.3578.33 (269aa0e3f0db08097f0fe231c7e6be200b6939f7)
  DEBUG: CasperJS version: CasperJS not installed
  DEBUG: #################################################

paste results here

• [X ] I have run the command in verbose mode (by adding verbose: true to my config) and pasted the output below:

peter@NB8 wraith (feature/DEGOV-350-wraith-aufsetzen) $ ./scripts/wraith_baseline.sh
DEBUG: #################################################
DEBUG:   Command run:        history configs/history.yaml
DEBUG:   Wraith version:     4.2.3
DEBUG:   Ruby version:       ruby 2.3.3p222 (2016-11-21 revision 56859) [x86_64-darwin13]
DEBUG:   ImageMagick:        Version: ImageMagick 6.9.6-2 Q16 x86_64 2017-11-27 http://www.imagemagick.org
DEBUG:   PhantomJS version:  PhantomJS not installed
DEBUG:   chromedriver version:  ChromeDriver 71.0.3578.33 (269aa0e3f0db08097f0fe231c7e6be200b6939f7)
DEBUG:   CasperJS version:   CasperJS not installed
DEBUG: #################################################
Config validated. No serious issues found.
Creating Folders
SAVING IMAGES
ERROR: javascript error: module is not defined
JavaScript stack:
ReferenceError: module is not defined
    at eval (eval at executeAsyncScript (:457:5), <anonymous>:7:1)
    at eval (eval at executeAsyncScript (:457:5), <anonymous>:10:5)
    at executeAsyncScript (<anonymous>:457:26)
    at <anonymous>:473:29
    at callFunction (<anonymous>:361:33)
    at <anonymous>:371:23
    at <anonymous>:372:3
  (Session info: headless chrome=71.0.3578.80)
  (Driver info: chromedriver=71.0.3578.33 (269aa0e3f0db08097f0fe231c7e6be200b6939f7),platform=Mac OS X 10.14.1 x86_64)
WARN: Using fallback image instead
ERROR: javascript error: module is not defined
JavaScript stack:
ReferenceError: module is not defined
    at eval (eval at executeAsyncScript (:457:5), <anonymous>:7:1)
    at eval (eval at executeAsyncScript (:457:5), <anonymous>:10:5)
    at executeAsyncScript (<anonymous>:457:26)
    at <anonymous>:473:29
    at callFunction (<anonymous>:361:33)
    at <anonymous>:371:23
    at <anonymous>:372:3
  (Session info: headless chrome=71.0.3578.80)
  (Driver info: chromedriver=71.0.3578.33 (269aa0e3f0db08097f0fe231c7e6be200b6939f7),platform=Mac OS X 10.14.1 x86_64)
WARN: Using fallback image instead
ERROR: javascript error: module is not defined
JavaScript stack:
ReferenceError: module is not defined
    at eval (eval at executeAsyncScript (:457:5), <anonymous>:7:1)
    at eval (eval at executeAsyncScript (:457:5), <anonymous>:10:5)
    at executeAsyncScript (<anonymous>:457:26)
    at <anonymous>:473:29
    at callFunction (<anonymous>:361:33)
    at <anonymous>:371:23
    at <anonymous>:372:3
  (Session info: headless chrome=71.0.3578.80)
  (Driver info: chromedriver=71.0.3578.33 (269aa0e3f0db08097f0fe231c7e6be200b6939f7),platform=Mac OS X 10.14.1 x86_64)
WARN: Using fallback image instead
ERROR: javascript error: module is not defined
JavaScript stack:
ReferenceError: module is not defined
    at eval (eval at executeAsyncScript (:457:5), <anonymous>:7:1)
    at eval (eval at executeAsyncScript (:457:5), <anonymous>:10:5)
    at executeAsyncScript (<anonymous>:457:26)
    at <anonymous>:473:29
    at callFunction (<anonymous>:361:33)
    at <anonymous>:371:23
    at <anonymous>:372:3
  (Session info: headless chrome=71.0.3578.80)
  (Driver info: chromedriver=71.0.3578.33 (269aa0e3f0db08097f0fe231c7e6be200b6939f7),platform=Mac OS X 10.14.1 x86_64)
WARN: Using fallback image instead
ERROR: javascript error: module is not defined
JavaScript stack:
ReferenceError: module is not defined
    at eval (eval at executeAsyncScript (:457:5), <anonymous>:7:1)
    at eval (eval at executeAsyncScript (:457:5), <anonymous>:10:5)
    at executeAsyncScript (<anonymous>:457:26)
    at <anonymous>:473:29
    at callFunction (<anonymous>:361:33)
    at <anonymous>:371:23
    at <anonymous>:372:3
  (Session info: headless chrome=71.0.3578.80)
  (Driver info: chromedriver=71.0.3578.33 (269aa0e3f0db08097f0fe231c7e6be200b6939f7),platform=Mac OS X 10.14.1 x86_64)
WARN: Using fallback image instead

• [X ] I have pasted the contents of my config file below:

##############################################################
##############################################################
# This is an example configuration provided by Wraith.
# Feel free to amend for your own requirements.
# ---
# This particular config is intended to demonstrate how
# to use Wraith in 'capture' mode, which is best suited to
# comparing a test and live version of the same website.
#
# `wraith capture capture.yaml`
#
##############################################################
##############################################################

# (required) The engine to run Wraith with. Examples: 'phantomjs', 'casperjs', 'slimerjs'
browser: "chrome"

# (required) The domains to take screenshots of.
domains:
  german: "http://nrwgov:8888/"

# (required) The paths to capture. All paths should exist for both of the domains specified above.
paths:
  home: /

# (required) Screen widths (and optional height) to resize the browser to before taking the screenshot.
screen_widths:
  - 320
  - 600x768
  - 768
  - 1024
  - 1280

# (optional) JavaScript file to execute before taking screenshot of every path. Default: nil
before_capture: 'javascript/wait--chrome.js'

# (required) The directory that your screenshots will be stored in
directory: 'shots'

# (required) Amount of fuzz ImageMagick will use when comparing images. A higher fuzz makes the comparison less strict.
fuzz: '0%'

# (optional) The maximum acceptable level of difference (in %) between two images before Wraith reports a failure. Default: 0
threshold: 5

# (optional) Specify the template (and generated thumbnail sizes) for the gallery output.
gallery:
  template: 'slideshow_template' # Examples: 'basic_template' (default), 'slideshow_template'
  thumb_width:  200
  thumb_height: 200

# (optional) Choose which results are displayed in the gallery, and in what order. Default: alphanumeric
# Options:
#   alphanumeric - all paths (with or without a difference) are shown, sorted by path
#   diffs_first - all paths (with or without a difference) are shown, sorted by difference size (largest first)
#   diffs_only - only paths with a difference are shown, sorted by difference size (largest first)
# Note: different screen widths are always grouped together.
mode: diffs_first

verbose: true

[patricknelson]

This is your issue:

before_capture: 'javascript/wait--chrome.js'

The wait--chrome.js file is referencing module, so you're getting a ReferenceError. I don't think it supports this pattern in ChromeDriver (while it was probably supported in PhantomJS, which is now defunct). Unfortunately, the documentation surrounding ChromeDriver support in Wraith is seriously lacking right now. This is literally what I've put into my before_capture JavaScript file 😄

(function() {
	// This is undocumented, but discovered that there is an "arguments" variable where the only argument is a function
	// which turns out to be executable and is a callback that you can trigger to ensure selenium gets control back.
	// And, since it's undocumented, I don't yet know what this callback argument is named...
	const done = arguments[0];
	
	// ... execute your in-page JavaScript....
	
	// Tell Wraith you're finished.
	done();
})();

Personally I think the abstraction wrapping ChromeDriver should provide more robust support (e.g. module pattern for defining your code) with better documentation. But, for now, hopefully this helps.