Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Wraith in docker using old version of Chrome according to screenshots #610

Open
4 tasks done
aoviedo77 opened this issue Apr 10, 2019 · 2 comments
Open
4 tasks done

Wraith in docker using old version of Chrome according to screenshots #610

aoviedo77 opened this issue Apr 10, 2019 · 2 comments

Comments

@aoviedo77
Copy link

aoviedo77 commented Apr 10, 2019 •
edited

When executing wraith using the docker provided by you guys, all my screenshots display a label saying I am using an old version of Chrome and also elements in my site are displaced and in general styles are not correct (probably because of the Chrome version)

Issue checklist:

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

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

$ docker-wraith info
DEBUG: #################################################
DEBUG:   Command run:        info
DEBUG:   Wraith version:     4.2.3
DEBUG:   Ruby version:       ruby 2.1.2p95 (2014-05-08 revision 45877) [x86_64-linux]
DEBUG:   ImageMagick:        Version: ImageMagick 6.8.9-9 Q16 x86_64 2018-06-26 http://www.imagemagick.org
DEBUG:   PhantomJS version:  2.1.1
DEBUG:   chromedriver version:  ChromeDriver 74.0.3729.6 (255758eccf3d244491b8a1317aa76e1ce10d57e9-refs/branch-heads/3729@{#29})
DEBUG:   CasperJS version:   1.1.1
  • I have run the command in verbose mode (by adding verbose: true to my config) and pasted the output below:
$ docker-wraith capture configs/capture.yaml
DEBUG: #################################################
DEBUG:   Command run:        capture configs/capture.yaml
DEBUG:   Wraith version:     4.2.3
DEBUG:   Ruby version:       ruby 2.1.2p95 (2014-05-08 revision 45877) [x86_64-linux]
DEBUG:   ImageMagick:        Version: ImageMagick 6.8.9-9 Q16 x86_64 2018-06-26 http://www.imagemagick.org
DEBUG:   PhantomJS version:  2.1.1
DEBUG:   chromedriver version:  ChromeDriver 74.0.3729.6 (255758eccf3d244491b8a1317aa76e1ce10d57e9-refs/branch-heads/3729@{#29})
DEBUG:   CasperJS version:   1.1.1
DEBUG: #################################################
Config validated. No serious issues found.
Creating Folders
SAVING IMAGES
DEBUG: phantomjs  '/usr/local/lib/ruby/gems/2.1.0/gems/wraith-4.2.3/lib/wraith/javascript/phantom.js' 'http://10.35.100.19:90/' '320' 'shots/home/320_phantomjs_current.png' 'body' '/wraithy/javascript/wait--phantom.js' 'false'
DEBUG: phantomjs  '/usr/local/lib/ruby/gems/2.1.0/gems/wraith-4.2.3/lib/wraith/javascript/phantom.js' 'https://www.google.com/' '320' 'shots/home/320_phantomjs_new.png' 'body' '/wraithy/javascript/wait--phantom.js' 'false'
DEBUG: phantomjs  '/usr/local/lib/ruby/gems/2.1.0/gems/wraith-4.2.3/lib/wraith/javascript/phantom.js' 'http://10.35.100.19:90/' '600x768' 'shots/home/600x768_phantomjs_current.png' 'body' '/wraithy/javascript/wait--phantom.js' 'false'
DEBUG: phantomjs  '/usr/local/lib/ruby/gems/2.1.0/gems/wraith-4.2.3/lib/wraith/javascript/phantom.js' 'https://www.google.com/' '600x768' 'shots/home/600x768_phantomjs_new.png' 'body' '/wraithy/javascript/wait--phantom.js' 'false'
DEBUG: phantomjs  '/usr/local/lib/ruby/gems/2.1.0/gems/wraith-4.2.3/lib/wraith/javascript/phantom.js' 'http://10.35.100.19:90/' '768' 'shots/home/768_phantomjs_current.png' 'body' '/wraithy/javascript/wait--phantom.js' 'false'
DEBUG: phantomjs  '/usr/local/lib/ruby/gems/2.1.0/gems/wraith-4.2.3/lib/wraith/javascript/phantom.js' 'https://www.google.com/' '768' 'shots/home/768_phantomjs_new.png' 'body' '/wraithy/javascript/wait--phantom.js' 'false'
DEBUG: phantomjs  '/usr/local/lib/ruby/gems/2.1.0/gems/wraith-4.2.3/lib/wraith/javascript/phantom.js' 'http://10.35.100.19:90/' '1024' 'shots/home/1024_phantomjs_current.png' 'body' '/wraithy/javascript/wait--phantom.js' 'false'
DEBUG: phantomjs  '/usr/local/lib/ruby/gems/2.1.0/gems/wraith-4.2.3/lib/wraith/javascript/phantom.js' 'https://www.google.com/' '1024' 'shots/home/1024_phantomjs_new.png' 'body' '/wraithy/javascript/wait--phantom.js' 'false'
Loading http://10.35.100.19:90/ at dimensions: 768x1500

Loading http://10.35.100.19:90/ at dimensions: 320x1500

Loading http://10.35.100.19:90/ at dimensions: 1024x1500

Loading https://www.google.com/ at dimensions: 320x1500

Loading https://www.google.com/ at dimensions: 1024x1500

Loading http://10.35.100.19:90/ at dimensions: 600x768

Loading https://www.google.com/ at dimensions: 600x768

Loading https://www.google.com/ at dimensions: 768x1500

Snapping http://10.35.100.19:90/ at: 768x1500

Snapping http://10.35.100.19:90/ at: 320x1500

Snapping http://10.35.100.19:90/ at: 1024x1500

Snapping http://10.35.100.19:90/ at: 600x768

DEBUG: phantomjs  '/usr/local/lib/ruby/gems/2.1.0/gems/wraith-4.2.3/lib/wraith/javascript/phantom.js' 'http://10.35.100.19:90/' '1280' 'shots/home/1280_phantomjs_current.png' 'body' '/wraithy/javascript/wait--phantom.js' 'false'
DEBUG: phantomjs  '/usr/local/lib/ruby/gems/2.1.0/gems/wraith-4.2.3/lib/wraith/javascript/phantom.js' 'https://www.google.com/' '1280' 'shots/home/1280_phantomjs_new.png' 'body' '/wraithy/javascript/wait--phantom.js' 'false'
DEBUG: phantomjs  '/usr/local/lib/ruby/gems/2.1.0/gems/wraith-4.2.3/lib/wraith/javascript/phantom.js' 'http://10.35.100.19:90/' '1920x1080' 'shots/home/1920x1080_phantomjs_current.png' 'body' '/wraithy/javascript/wait--phantom.js' 'false'
DEBUG: phantomjs  '/usr/local/lib/ruby/gems/2.1.0/gems/wraith-4.2.3/lib/wraith/javascript/phantom.js' 'https://www.google.com/' '1920x1080' 'shots/home/1920x1080_phantomjs_new.png' 'body' '/wraithy/javascript/wait--phantom.js' 'false'
Loading http://10.35.100.19:90/ at dimensions: 1280x1500

Loading https://www.google.com/ at dimensions: 1280x1500

Loading http://10.35.100.19:90/ at dimensions: 1920x1080

Loading https://www.google.com/ at dimensions: 1920x1080

Snapping https://www.google.com/ at: 768x1500

Snapping https://www.google.com/ at: 320x1500

Snapping https://www.google.com/ at: 600x768

Snapping https://www.google.com/ at: 1024x1500

Snapping http://10.35.100.19:90/ at: 1280x1500

Snapping http://10.35.100.19:90/ at: 1920x1080

Snapping https://www.google.com/ at: 1920x1080

Snapping https://www.google.com/ at: 1280x1500

CROPPING IMAGES
DEBUG: Both images are exactly 1280x1500 - no cropping required. (shots/home/1280_phantomjs_current.png, shots/home/1280_phantomjs_new.png)
DEBUG: Both images are exactly 768x1500 - no cropping required. (shots/home/768_phantomjs_current.png, shots/home/768_phantomjs_new.png)
DEBUG: Both images are exactly 1920x1080 - no cropping required. (shots/home/1920x1080_phantomjs_current.png, shots/home/1920x1080_phantomjs_new.png)
DEBUG: Both images are exactly 1024x1500 - no cropping required. (shots/home/1024_phantomjs_current.png, shots/home/1024_phantomjs_new.png)
DEBUG: Both images are exactly 600x768 - no cropping required. (shots/home/600x768_phantomjs_current.png, shots/home/600x768_phantomjs_new.png)
DEBUG: Both images are exactly 320x1500 - no cropping required. (shots/home/320_phantomjs_current.png, shots/home/320_phantomjs_new.png)
COMPARING IMAGES
Comparing shots/home/1920x1080_phantomjs_current.png and shots/home/1920x1080_phantomjs_new.png
Comparing shots/home/1024_phantomjs_current.png and shots/home/1024_phantomjs_new.png
Comparing shots/home/320_phantomjs_current.png and shots/home/320_phantomjs_new.png
Comparing shots/home/1280_phantomjs_current.png and shots/home/1280_phantomjs_new.png
Saved diff
Comparing shots/home/600x768_phantomjs_current.png and shots/home/600x768_phantomjs_new.png
Saved diff
Comparing shots/home/768_phantomjs_current.png and shots/home/768_phantomjs_new.png
Saved diff
Saved diff
Saved diff
Saved diff
GENERATING THUMBNAILS
GENERATING GALLERY
Gallery generated
WARN: Failures detected:
WARN: 	 home failed at a resolution of 320 (100.0% diff)
WARN: 	 home failed at a resolution of 600 (100.0% diff)
WARN: 	 home failed at a resolution of 768 (100.0% diff)
WARN: 	 home failed at a resolution of 1024 (100.0% diff)
WARN: 	 home failed at a resolution of 1280 (100.0% diff)
WARN: 	 home failed at a resolution of 1920 (100.0% diff)

View the gallery in your browser:
	 file:///wraithy/shots/gallery.html
  • 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: "phantomjs"

# (required) The domains to take screenshots of.
domains:
  current:  "http://10.35.100.19:90"
  new:      "https://www.google.com"

# (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
  - 1920x1080

# (optional) JavaScript file to execute before taking screenshot of every path. Default: nil
before_capture: 'javascript/wait--phantom.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: '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: '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

# (optional) Set the number of threads to use when saving images. Raising this value can improve performance, but very high
# values can lead to server connection issues. Set to around 1.5 the available CPU cores for best performance. Default: 8
threads: 8
verbose: true
@aoviedo77
Copy link
Author

Here you can see that when getting the screenshots, we get a label that says that this Chrome version is depreciated
600x768_phantomjs_new

@khana25
Copy link

khana25 commented May 13, 2019

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

browser: "phantomjs"

Change this to "chrome" option

in your config file
browser: "chrome" and then giver it a go

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@khana25 @aoviedo77