Chromy engine runs slow with scenarios containing many selectors

Hi Garris,

Creating a ticket in reference to #479.

Running backstop reference while using "engine": "chromy" takes forever to finish (not actually had it complete yet), whereas phantomjs finishes in 15s.

Backstop version: BackstopJS v3.0.4 Node version: v7.6.0

Snapshot of the backstop.json:

  "viewports": [
    {
      "name": "mobile",
      "width": 375,
      "height": 564
    },
    {
      "name": "tablet",
      "width": 768,
      "height": 1024
    },
    {
      "name": "desktop",
      "width": 1240,
      "height": 1024
    }
  ],
  "scenarios": [
    {
      "label": "Patternlab",
      "url": "Patternlab/public/styleguide/html/styleguide.html",
      "hideSelectors": [
        "[data-shop-map]",
        "[data-search-map]"
      ],
      "removeSelectors": [
        ".sg-pattern-head",
        ".sg-pattern-extra"
      ],
      "selectorExpansion": true,
      "selectors": [
        ".sg-pattern"
      ],
      "readyEvent": null,
      "delay": 500,
      "misMatchThreshold": 0.1,
      "requireSameDimensions": true
    }
  ],
  "engine": "chromy",
  "report": ["browser"]

Just an idea of how long it takes (there are ~54 components on the page):

Console output when using "engine": "chromy":

BackstopJS v3.0.4
Loading config:  /Users/daveaspinall/Sites/oxfam/oxfam-main/backstop.json 

COMMAND | Executing core for `reference`
  clean | backstop_data/bitmaps_reference was cleaned.
createBitmaps | Selcted 1 of 1 scenarios.
Starting Chromy: port:9222 [ '--window-size=375,564' ]
CREATING NEW REFERENCE FILES
Starting Chromy: port:9223 [ '--window-size=768,1024' ]
CREATING NEW REFERENCE FILES
Starting Chromy: port:9224 [ '--window-size=1240,1024' ]
CREATING NEW REFERENCE FILES
9222 INFO >  backstopTools are running
9223 INFO >  backstopTools are running
9224 INFO >  backstopTools are running

Run `$ backstop test` to generate diff report.

      COMMAND | Command `reference` sucessfully executed in [2143.046s]

Console output when using "engine": "phantomjs":

BackstopJS v3.0.4
Loading config:  /Users/daveaspinall/Sites/oxfam/oxfam-main/backstop.json 

COMMAND | Executing core for `reference`
  clean | backstop_data/bitmaps_reference was cleaned.
createBitmaps | Selcted 1 of 1 scenarios.

Running CasperJS with:  [ '~/.nvm/versions/node/v7.6.0/lib/node_modules/backstopjs/capture/genBitmaps.js',
  '--captureConfigFileName=/var/folders/44/1j9_33pj2kj0ygpsg03jmk_chh6558/T/capture/faaa966138ec0284c589c66a65cb1ca2ffc37025.json' ]
CasperJS:  CREATING NEW REFERENCE FILES
CasperJS:  Ready event received.
CasperJS:  Current location is Patternlab/public/styleguide/html/styleguide.html
CasperJS:  Capturing screenshots for mobile (375x564)
CasperJS:  Ready event received.
CasperJS:  Current location is Patternlab/public/styleguide/html/styleguide.html
CasperJS:  Capturing screenshots for tablet (768x1024)
CasperJS:  Ready event received.
CasperJS:  Current location is Patternlab/public/styleguide/html/styleguide.html
CasperJS:  Capturing screenshots for desktop (1240x1024)
CasperJS:  Comparison config file updated.

Bitmap file generation completed.

Run `$ backstop test` to generate diff report.

      COMMAND | Command `reference` sucessfully executed in [15.859s]

Any ideas what could be slowing this down? Let me know if you need any more info and I’ll post it up.

Thanks 🤓

[daveaspinall]

@garris Can confirm the reference task is much much faster!

Was:

COMMAND | Command `reference` sucessfully executed in [2143.046s]

Now:

COMMAND | Command `reference` sucessfully executed in [35.389s]

Seriously great work!! 🙌🏼 Going to mark this issue as complete 🎉

Now to fix our issue with Chromy in my Docker container and our setup with be sweet

[dotneet]

@daveaspinall Thanks! I found the cause of this problem.

@garris Please update chromy version. chromy ver.0.3.3 doesn’t work with chrome61 (canary). 0.3.4 or later works.