rayferns commented 8 years ago

I've been trying to hide or remove CSS Selectors using RemoveSelectors or HideSelectors, that overlaps the Selectors I have listed to verify, unfortunately, with no success I've given up trial an error approach. eg: removeSelectors: '#cookie-compliance' or

Any help appreciated.

Details below.

Thanks,

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

Issue checklist:

[Yes ] I have validated my config file against YAML Validator to make sure it is valid YAML.
[Yes ] I have run the command in verbose mode (by adding verbose: true to my config) and pasted the output below:

paste results here

PS C:\VisualRegression> wraith capture .\configs\CSS_Selector_pages.yaml
DEBUG: #################################################
DEBUG:   Command run:        capture .\configs\CSS_Selector_pages.yaml
DEBUG:   Wraith version:     3.2.0
DEBUG:   Ruby version:       ruby 2.3.0p0 (2015-12-25 revision 53290) [x64-mingw32]

DEBUG:   ImageMagick:        Version: ImageMagick 7.0.2-1 Q16 x64 2016-06-23 http://www.imagemagick.org

DEBUG:   PhantomJS version:  1.9.6

DEBUG:   CasperJS version:   1.1.1

DEBUG: #################################################
DEBUG:
Config validated. No serious issues found.
Creating Folders
SAVING IMAGES
DEBUG: casperjs --ssl-protocol=tlsv1 --ignore-ssl-errors=yes 'C:/Ruby23-x64/lib/ruby/gems/2.3.0/gems/wraith-3.2.0/lib/wraith/javascript/casper.js' 'http://origin-vw06.vwcloud.co.uk/find-a-retailer' '600x800,320x533,1280x800' 'Retailers_CSS_Selector_shots/Retailer/MULTI_casperjs_Origin_VW06.png' '.grid-row' 'C:/VisualRegression/javascript/wait--casper.js' 'false'
DEBUG: casperjs --ssl-protocol=tlsv1 --ignore-ssl-errors=yes 'C:/Ruby23-x64/lib/ruby/gems/2.3.0/gems/wraith-3.2.0/lib/wraith/javascript/casper.js' 'http://www.volkswagen.co.uk/' '600x800,320x533,1280x800' 'Retailers_CSS_Selector_shots/HomeHeader/MULTI_casperjs_Live.png' '\#header' 'C:/VisualRegression/javascript/wait--casper.js' 'false'
DEBUG: casperjs --ssl-protocol=tlsv1 --ignore-ssl-errors=yes 'C:/Ruby23-x64/lib/ruby/gems/2.3.0/gems/wraith-3.2.0/lib/wraith/javascript/casper.js' 'http://origin-vw06.vwcloud.co.uk/' '600x800,320x533,1280x800' 'Retailers_CSS_Selector_shots/HomeHeader/MULTI_casperjs_Origin_VW06.png' '\#header' 'C:/VisualRegression/javascript/wait--casper.js' 'false'
DEBUG: casperjs --ssl-protocol=tlsv1 --ignore-ssl-errors=yes 'C:/Ruby23-x64/lib/ruby/gems/2.3.0/gems/wraith-3.2.0/lib/wraith/javascript/casper.js' 'http://www.volkswagen.co.uk/' '600x800,320x533,1280x800' 'Retailers_CSS_Selector_shots/HomeFooter/MULTI_casperjs_Live.png' '\#footer' 'C:/VisualRegression/javascript/wait--casper.js' 'false'
DEBUG: casperjs --ssl-protocol=tlsv1 --ignore-ssl-errors=yes 'C:/Ruby23-x64/lib/ruby/gems/2.3.0/gems/wraith-3.2.0/lib/wraith/javascript/casper.js' 'http://www.volkswagen.co.uk/find-a-retailer' '600x800,320x533,1280x800' 'Retailers_CSS_Selector_shots/Retailer/MULTI_casperjs_Live.png' '.grid-row' 'C:/VisualRegression/javascript/wait--casper.js' 'false'
DEBUG: casperjs --ssl-protocol=tlsv1 --ignore-ssl-errors=yes 'C:/Ruby23-x64/lib/ruby/gems/2.3.0/gems/wraith-3.2.0/lib/wraith/javascript/casper.js' 'http://origin-vw06.vwcloud.co.uk/' '600x800,320x533,1280x800' 'Retailers_CSS_Selector_shots/HomeFooter/MULTI_casperjs_Origin_VW06.png' '\#footer' 'C:/VisualRegression/javascript/wait--casper.js' 'false'
Snapping http://www.volkswagen.co.uk/find-a-retailer at: 600x800

Snapping http://www.volkswagen.co.uk/find-a-retailer at: 320x533

Snapping http://www.volkswagen.co.uk/find-a-retailer at: 1280x800

Snapping http://www.volkswagen.co.uk/ at: 600x800

Snapping http://www.volkswagen.co.uk/ at: 600x800

Snapping http://origin-vw06.vwcloud.co.uk/ at: 600x800

Snapping http://origin-vw06.vwcloud.co.uk/ at: 600x800

Snapping http://origin-vw06.vwcloud.co.uk/find-a-retailer at: 600x800

Snapping http://origin-vw06.vwcloud.co.uk/find-a-retailer at: 320x533

Snapping http://origin-vw06.vwcloud.co.uk/find-a-retailer at: 1280x800

CROPPING IMAGES
Process.fork is not supported by this Ruby
DEBUG: Cropping both images to 976x128. (Retailers_CSS_Selector_shots/Retailer/1280x800_casperjs_Live.png, Retailers_CSS_Selector_shots/Retailer/1280x800_casperjs_Origin_VW06.png)
DEBUG: Cropping both images to 318x309. (Retailers_CSS_Selector_shots/Retailer/320x533_casperjs_Live.png, Retailers_CSS_Selector_shots/Retailer/320x533_casperjs_Origin_VW06.png)
DEBUG: Cropping both images to 488x237. (Retailers_CSS_Selector_shots/Retailer/600x800_casperjs_Live.png, Retailers_CSS_Selector_shots/Retailer/600x800_casperjs_Origin_VW06.png)
COMPARING IMAGES
Process.fork is not supported by this Ruby
Comparing Retailers_CSS_Selector_shots/Retailer/1280x800_casperjs_Live.png and Retailers_CSS_Selector_shots/Retailer/1280x800_casperjs_Origin_VW06.png
Saved diff
Comparing Retailers_CSS_Selector_shots/Retailer/320x533_casperjs_Live.png and Retailers_CSS_Selector_shots/Retailer/320x533_casperjs_Origin_VW06.png
Saved diff
Comparing Retailers_CSS_Selector_shots/Retailer/600x800_casperjs_Live.png and Retailers_CSS_Selector_shots/Retailer/600x800_casperjs_Origin_VW06.png
Saved diff
GENERATING THUMBNAILS
Process.fork is not supported by this Ruby
GENERATING GALLERY
Gallery generated
WARN: Failures detected:
WARN:    Retailer failed at a resolution of 320 (28.87% diff)
WARN:    Retailer failed at a resolution of 600 (29.07% diff)
WARN:    Retailer failed at a resolution of 1280 (37.94% diff)

View the gallery in your browser:
         file://C:/VisualRegression/Retailers_CSS_Selector_shots/gallery.html

- [Yes ] I have pasted the contents of my config file below:

paste config here

debug mode

verbose: true

Headless browser option

browser: casperjs: "casperjs"

phantomjs: "phantomjs"

Type the name of the directory that shots will be stored in

directory: 'Retailers_CSS_Selector_shots'

As per https://github.com/BBC-News/wraith/issues/308 - to read in https urls

phantomjs_options: --ssl-protocol=tlsv1 --ignore-ssl-errors=yes

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

Add only 2 domains, key will act as a label

domains: Live: "http://www.volkswagen.co.uk"

Origin_VW03: "http://origin-vw03.vwcloud.co.uk"

Origin_VW06: "http://origin-vw06.vwcloud.co.uk"

Type screen widths below, here are a couple of examples

screen_widths:

600x800
320x533
1280x800

resize_or_reload: 'resize'

resize_or_reload: 'reload'

Type page URL paths below, here are a couple of examples

paths: Retailer: path: /find-a-retailer selector: '.grid-row' removeSelectors: '#cookie-compliance'

hideSelectors: '#cookie-compliance'

   #before_capture: 'javascript/disable_javascript_and_cookies--casperjs'

This section does not work since CSS with hash does not show up on snapped images, need to investigate further.

HomeHeader: path: / selector: '#header' HomeFooter: path: / selector: '#footer'

before_capture: 'javascript/disable_javascript_and_cookies--casperjs'

before_capture: 'javascript/disable_javascript--casper.js'

Amount of fuzz ImageMagick will use

fuzz: '20%'

Set the number of days to keep the site spider file

spider_days:

10
Choose how results are displayed, by default alphanumeric. Different screen widths are always grouped.

alphanumeric - all paths (with, and without, a difference) are shown, sorted by path

diffs_first - all paths (with, and 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)

mode: diffs_first

mode: alphanumeric

threshold: 5

Examples: 'basic_template' (default), 'slideshow_template'

gallery: template: 'basic_template' thumb_width: 200 thumb_height: 200

ChrisBAshton commented 8 years ago

Where are you getting RemoveSelectors and HideSelectors from? Is it in the docs?

As far as I know, this isn't a feature!

rayferns commented 8 years ago

RemoveSelectors and HideSelectors is not documented in Wraith docs, I googled this and found it from Node JS backstopJS project. Was eagerly looking for solutions.

SimonKeep commented 8 years ago

You can interact with the page in your before_capture files so you can just use js/jquery to remove elements that you dont wan't.

ChrisBAshton commented 8 years ago

Thanks @SimonKeep.

Yes, the docs are at http://bbc-news.github.io/wraith/#before_capturehooks. Good luck!

bbc / wraith

Removing or Hiding CSS selectors on snapshot images #452