Issues with logging in using Chrome

[Lubos Jerabek]

Hello everyone,

I love using Wraith but I desperately need to log in. I have a following issue:

• Land on page
• Expect redirect to login screen (this is fine)
• Fill in username
• Click Next button

Expected result:

• Stuff works and I'm able to continue filling in my password

Actual result:

• I am getting javascript errors about document being unloaded whilst waiting (this is kinda expected as well if I understand the idea of javascript and its interpretation in browser.)

---

Issue checklist:

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

• I have run the wraith info command and pasted the output below:

Can't open 'C:\bin\bootstrap.js'
DEBUG: #################################################
DEBUG:   Command run:        info
DEBUG:   Wraith version:     4.2.3
DEBUG:   Ruby version:       ruby 2.5.1p57 (2018-03-29 revision 63029) [x64-mingw32]
DEBUG:   ImageMagick:        Version: ImageMagick 7.0.8-9 Q16 x64 2018-08-06 http://www.imagemagick.org
DEBUG:   PhantomJS version:  2.1.1
DEBUG:   chromedriver version:  ChromeDriver 2.41.578737 (49da6702b16031c40d63e5618de03a32ff6c197e)
DEBUG:   CasperJS version:   CasperJS not installed
DEBUG: #################################################

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

Can't open 'C:\bin\bootstrap.js'
DEBUG: #################################################
DEBUG:   Command run:        history configs/history.yaml
DEBUG:   Wraith version:     4.2.3
DEBUG:   Ruby version:       ruby 2.5.1p57 (2018-03-29 revision 63029) [x64-mingw32]
DEBUG:   ImageMagick:        Version: ImageMagick 7.0.8-9 Q16 x64 2018-08-06 http://www.imagemagick.org
DEBUG:   PhantomJS version:  2.1.1
DEBUG:   chromedriver version:  ChromeDriver 2.41.578737 (49da6702b16031c40d63e5618de03a32ff6c197e)
DEBUG:   CasperJS version:   CasperJS not installed
DEBUG: #################################################
Config validated. No serious issues found.
Creating Folders
SAVING IMAGES
[0903/143949.941:ERROR:gpu_process_transport_factory.cc(1016)] Lost UI shared context.
[0903/143949.947:ERROR:display.cc(52)] Failed to parse the default device scale factor:

DevTools listening on ws://127.0.0.1:49630/devtools/browser/42b43ba4-d158-415a-b774-8a45942afc64
ERROR: javascript error: document unloaded while waiting for result
  (Session info: headless chrome=68.0.3440.106)
  (Driver info: chromedriver=2.41.578737 (49da6702b16031c40d63e5618de03a32ff6c197e),platform=Windows NT 10.0.17134 x86_64)
WARN: Using fallback image instead

• 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 'history' mode, which is best suited to
# making sure your site's appearance remains consistent over
# time.
#
# `wraith history history.yaml` # generate base screenshots
# `wraith latest history.yaml`  # take new shots and compare
#
##############################################################
##############################################################

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

# (required) The domain to take screenshots of.
domains:
  expense: "https://example.com"

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

# (required) The paths to capture. This particular config is using casperjs, so we can take screenshots of selectors rather than the entire page.
paths:
  new_claim_screen:
    path: /mypath/

# (required) Screen widths (and optional height) to resize the browser to before taking the screenshot.
screen_widths:
  - 360
  - 1366
  - 1920

# (optional) Resize to each screen width (efficient), or reload at each screen width (costly). Default: 'reload'
resize_or_reload: 'resize'

# (required for history mode, otherwise optional) The directory that your base screenshots will be stored in.
history_dir: 'shots_base'

# (required) The directory that your latest 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: '20%'

# (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: 'basic_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

# (optional) Choose to run Wraith in verbose mode, for easier debugging. Default: false
verbose: true

# (optional) Color to highlight the image diff. Default: 'blue'
highlight_color: red

# (optional) Parameters to pass to Phantom/Casper command line. Default: '--ignore-ssl-errors=true --ssl-protocol=tlsv1'
# phantomjs_options: ''

Also, this is my interact--chrome.js file:

var callback = arguments[arguments.length-1];
setTimeout(callback, 2000);
document.getElementById('Email').value = '[e-mail]';
var nextButton = document.querySelector('#Next');
nextButton && nextButton.click();

[Lubos Jerabek]

Also, good thing to point out:

• When I remove either adding the email element value or clicking the next button it all works fine
• I reckon this could be caused by the fact that the page does not load again (getting the other part of the form)

[riyadh-hossain]

@lubosjerabek i started looking into Wraith for UI/UX regression and facing the same issue. Were you able to find a solution for this?

[Lubos Jerabek]

@lubosjerabek i started looking into Wraith for UI/UX regression and facing the same issue. Were you able to find a solution for this?

@riyadh-hossain I ended up writing my own library that is working directly with Imagemagick and integrated into our testing framework.