search

bbc / wraith

Wraith — A responsive screenshot comparison tool
http://bbc-news.github.io/wraith/
Apache License 2.0
4.83k stars 356 forks source link

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

Open aoviedo77 opened 5 years ago

aoviedo77 commented 5 years ago

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:

$ 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

$ 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

##############################################################
##############################################################
# 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 commented 5 years ago

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 commented 5 years ago

(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