garris / BackstopJS

Catch CSS curve balls.
http://backstopjs.org
MIT License
6.79k stars 606 forks source link

[PhantomJS] asyncCaptureLimit not working #591

Closed Kenith closed 6 years ago

Kenith commented 7 years ago

Hello All,

We found if we set the engine to phantomJS, the asyncCaptureLimit is not working. Only 1 process is running for capture. Would you please take time for the issue? You are very welcome if something wrong on our side.

ENV: npm - 5.5.1 node - 8.9.1 backstop - 3.0.32 phantomjs - 2.1.1

backstop.json

    "viewports": [
        {
            "label": "phone", 
            "width": 320, 
            "height": 480
        }, 
        {
            "label": "tablet", 
            "width": 1024, 
            "height": 768
        }
    ], 
    "onBeforeScript": "casper/onBefore.js", 
    "onReadyScript": "casper/onReady.js", 
    "scenarios": [
        {
            "label": "Test1", 
            "cookiePath": "", 
            "url": "https://garris.github.io/BackstopJS/", 
            "referenceUrl": "", 
            "readyEvent": "", 
            "readySelector": "", 
            "delay": 10000, 
            "hideSelectors": [], 
            "removeSelectors": [], 
            "hoverSelector": "", 
            "clickSelector": "", 
            "postInteractionWait": "", 
            "selectors": [], 
            "selectorExpansion": true, 
            "misMatchThreshold": 0.1, 
            "requireSameDimensions": true
        }, 
        {
            "label": "Test2", 
            "cookiePath": "", 
            "url": "https://garris.github.io/BackstopJS/", 
            "referenceUrl": "", 
            "readyEvent": "", 
            "readySelector": "", 
            "delay": 10000, 
            "hideSelectors": [], 
            "removeSelectors": [], 
            "hoverSelector": "", 
            "clickSelector": "", 
            "postInteractionWait": "", 
            "selectors": [], 
            "selectorExpansion": true, 
            "misMatchThreshold": 0.1, 
            "requireSameDimensions": true
        }
    ], 
    "paths": {
        "bitmaps_reference": "backstop_data/bitmaps_reference", 
        "bitmaps_test": "backstop_data/bitmaps_test", 
        "engine_scripts": "backstop_data/engine_scripts", 
        "html_report": "backstop_data/html_report", 
        "ci_report": "backstop_data/ci_report"
    }, 
    "report": [
        "browser"
    ], 
    "engine": "phantomjs", 
    "casperFlags": [
        "--ignore-ssl-errors=yes", 
        "--engine=phantomjs", 
        "--proxy=10.74.66.43:3128"
    ], 
    "asyncCaptureLimit": 3, 
    "asyncCompareLimit": 50, 
    "debug": true, 
    "debugWindow": false
}```

**Log**
```BackstopJS v3.0.32
Loading config:  /tmp/test-automation/VisualRegression/Institutional/backstop.json 

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

Running CasperJS with:  [ '/usr/lib/node_modules/backstopjs/capture/genBitmaps.js',
  '--ignore-ssl-errors=yes',
  '--engine=phantomjs',
  '--proxy=10.74.66.43:3128',
  '--captureConfigFileName=/tmp/capture/7875a778a7eab1afe6c82d4adc01466a531e6594.json' ]
CasperJS:  Debug is enabled!
CasperJS: CREATING NEW REFERENCE FILES
CasperJS:  [info] [phantom] Starting...
CasperJS:  [info] [phantom] Running suite: 32 steps
CasperJS:  [debug] [phantom] Successfully injected Casper client-side utilities
CasperJS:  Cookie state restored with cookies: []
CasperJS:  [info] [phantom] Step anonymous 1/32: done in 189ms.
CasperJS:  [info] [phantom] Step _step 2/33: done in 190ms.
CasperJS:  [debug] [phantom] opening url: https://garris.github.io/BackstopJS/, HTTP GET
CasperJS:  [debug] [phantom] Navigation requested: url=https://garris.github.io/BackstopJS/, type=Other, willNavigate=true, isMainFrame=true
CasperJS:  [debug] [phantom] url changed to "https://garris.github.io/BackstopJS/"
CasperJS:  [debug] [phantom] Successfully injected Casper client-side utilities
CasperJS:  [info] [phantom] Step anonymous 4/33 https://garris.github.io/BackstopJS/ (HTTP 200)
CasperJS:  [info] [phantom] Step anonymous 4/33: done in 5404ms.
CasperJS:  [info] [phantom] Step _step 5/34 https://garris.github.io/BackstopJS/ (HTTP 200)
CasperJS:  [info] [phantom] Step _step 5/34: done in 5425ms.
CasperJS:  [info] [phantom] waitFor() finished in 40ms.
CasperJS:  [info] [phantom] Step anonymous 6/35 https://garris.github.io/BackstopJS/ (HTTP 200)
CasperJS:  Ready event received.
CasperJS: [info] [phantom] Step anonymous 6/35: done in 5486ms.
CasperJS:  [info] [phantom] Step anonymous 7/35 https://garris.github.io/BackstopJS/ (HTTP 200)
CasperJS:  [info] [phantom] Step anonymous 7/35: done in 5507ms.
CasperJS:  [info] [phantom] Step _step 8/35 https://garris.github.io/BackstopJS/ (HTTP 200)
CasperJS:  [info] [phantom] Step _step 8/35: done in 5528ms.
CasperJS:  [info] [phantom] wait() finished waiting for 10000ms.
CasperJS:  [info] [phantom] Step anonymous 9/35 https://garris.github.io/BackstopJS/ (HTTP 200)
CasperJS:  Current location is https://garris.github.io/BackstopJS/
CasperJS: <body>
CasperJS:       <div class="page-root container-fluid">
CasperJS:       <div class="row justify-content-center moneyshot">
CasperJS:         <div class="col-10">
CasperJS:           <p class="mascotBlock">
CasperJS:             <a href="https://github.com/garris/BackstopJS" class="lemur-link">
CasperJS:               <img id="theLemur" src="assets/lemurFace.png" class="lemurInYourFace" alt="">
CasperJS:             </a>
CasperJS:             <img id="lemurButt" src="assets/lemurButt.png" class="lemurButtInYourFace" alt="">
CasperJS:           </p>
CasperJS:           <p class="logoBlock">
CasperJS:             <img src="assets/BackstopJS3.svg" class="BackstopJS3" alt="BackstopJS 3">
CasperJS:           </p>
CasperJS:         </div>
CasperJS:         <h1>Visual regression testing for web apps.</h1>
CasperJS:       </div>
CasperJS:       <div class="row justify-content-center">
CasperJS:         <p class="supportsBlock col-10">
CasperJS:           Supports screen rendering with <a href="https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md" class="chromy">Chrome-headless</a>, <a href="http://phantomjs.org/" class="casper">Phantom</a> and <a href="https://github.com/laurentj/slimerjs/" class="casper">SlimerJS</a>.
CasperJS:           Add your own interactions with <a href="https://github.com/OnetapInc/chromy" class="chromy">ChromyJS</a> and <a href="http://casperjs.org/" class="casper">CasperJS</a> scripting.
CasperJS:         </p>
CasperJS:       </div>
CasperJS:       <div class="row justify-content-center">
CasperJS:         <p class="getItBlock col-10">
CasperJS:           BackstopJS was created by <a href="https://www.linkedin.com/in/garrisshipon/">Garris Shipon</a> with contributions from <a href="https://github.com/garris/BackstopJS#credits">these amazing engineers</a>.
CasperJS:         </p>
CasperJS:         <p class="getItBlock col-10">
CasperJS:           Opensourced under the <a href="https://raw.githubusercontent.com/garris/BackstopJS/master/LICENSE">The MIT License</a>.
CasperJS:         </p>
CasperJS:         <p class="getItBlock col-10">
CasperJS:           <span class="cta"><a href="https://github.com/garris/BackstopJS" class="github-link"><img src="assets/github-icon.png" class="github-icon" alt="Get it on GitHub"></a></span>
CasperJS:           <span class="cta"><a href="https://github.com/garris/BackstopJS">Get it on github!</a></span>
CasperJS:         </p>
CasperJS:       </div>
CasperJS:     </div>
CasperJS:     <p id="noShow" style="display: none;">This is text that should not show.</p>
CasperJS:     <!-- Optional JavaScript -->
CasperJS:     <!-- jQuery first, then Popper.js, then Bootstrap JS -->
CasperJS:     <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
CasperJS:     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
CasperJS:     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
CasperJS: 
CasperJS:   
CasperJS: 
CasperJS: 
CasperJS: <script type="text/javascript">
CasperJS:   const READY_LAG_MS = 3000;
CasperJS:   const READY_TAG = '_the_lemur_is_ready_to_see_you';
CasperJS:   const LEMUR_CLASS_ACTION = 'hideLemur';
CasperJS:   const COOKIE_TEST = /cookie/i;
CasperJS:   const CLICK_TEST = /click/i;
CasperJS:   const DELAY_TEST = /delay/i;
CasperJS: 
CasperJS:   if (COOKIE_TEST.test(window.location.search)) {
CasperJS:     showCookies();
CasperJS:   }
CasperJS:   if (CLICK_TEST.test(window.location.search)) {
CasperJS:     modifyLemurBehavior();
CasperJS:   }
CasperJS:   if (DELAY_TEST.test(window.location.search)) {
CasperJS:     delayLemurification();
CasperJS:   }
CasperJS: 
CasperJS:   function modifyLemurBehavior () {
CasperJS:     document.body.addEventListener('click', evt => {
CasperJS:       if (evt.target.id === 'theLemur') {
CasperJS:         containTheLemur();
CasperJS:         evt.preventDefault();
CasperJS:         setTimeout(setReadyFlags, READY_LAG_MS + 1000);
CasperJS:       } else {
CasperJS:         releaseTheLemur();
CasperJS:       }
CasperJS:     });
CasperJS:     console.log('lemur behavior is modified');
CasperJS:   }
CasperJS: 
CasperJS:   function showCookies () {
CasperJS:     document.getElementsByClassName('logoBlock')[0].innerText = 'cookies > ' + document.cookie;
CasperJS:   }
CasperJS: 
CasperJS:   function setReadyFlags () {
CasperJS:     console.log(READY_TAG);
CasperJS:     document.body.classList.add(READY_TAG);
CasperJS:   }
CasperJS: 
CasperJS:   function releaseTheLemur () {
CasperJS:     document.body.classList.remove(LEMUR_CLASS_ACTION);
CasperJS:   }
CasperJS: 
CasperJS:   function containTheLemur () {
CasperJS:     document.body.classList.add(LEMUR_CLASS_ACTION);
CasperJS:   }
CasperJS: 
CasperJS:   function delayLemurification () {
CasperJS:     containTheLemur();
CasperJS:     setTimeout(releaseTheLemur, READY_LAG_MS);
CasperJS:     setTimeout(setReadyFlags, READY_LAG_MS + 1000);
CasperJS:   }
CasperJS: </script>
CasperJS: </body>
CasperJS: [info] [phantom] Step anonymous 9/35: done in 15535ms.
CasperJS:  [info] [phantom] Step anonymous 10/35 https://garris.github.io/BackstopJS/ (HTTP 200)
CasperJS:  SCENARIO> Test1
CasperJS:  [info] [phantom] Step anonymous 10/35: done in 15632ms.
CasperJS:  [info] [phantom] Step anonymous 11/35 https://garris.github.io/BackstopJS/ (HTTP 200)
CasperJS: Capturing screenshots for phone (320x480)
CasperJS:  [debug] [phantom] Capturing page to /tmp/test-automation/VisualRegression/Institutional/backstop_data/bitmaps_reference/01076071529_Test1_0_document_0_phone.png
CasperJS:  [info] [phantom] Capture saved to /tmp/test-automation/VisualRegression/Institutional/backstop_data/bitmaps_reference/01076071529_Test1_0_document_0_phone.png
CasperJS:  [info] [phantom] Step anonymous 11/35: done in 15739ms.
CasperJS: [info] [phantom] Step anonymous 12/35 https://garris.github.io/BackstopJS/ (HTTP 200)
CasperJS:  Cookie state restored with cookies: []
CasperJS:  [info] [phantom] Step anonymous 12/35: done in 15800ms.
CasperJS:  [info] [phantom] Step _step 13/36 https://garris.github.io/BackstopJS/ (HTTP 200)
CasperJS: [info] [phantom] Step _step 13/36: done in 15801ms.
CasperJS:  [debug] [phantom] opening url: https://garris.github.io/BackstopJS/, HTTP GET
CasperJS:  [debug] [phantom] Navigation requested: url=https://garris.github.io/BackstopJS/, type=Other, willNavigate=true, isMainFrame=true
CasperJS:  [debug] [phantom] url changed to "https://garris.github.io/BackstopJS/"
CasperJS:  [debug] [phantom] Successfully injected Casper client-side utilities
CasperJS:  [info] [phantom] Step anonymous 15/36 https://garris.github.io/BackstopJS/ (HTTP 200)
CasperJS:  [info] [phantom] Step anonymous 15/36: done in 15968ms.
CasperJS:  [info] [phantom] Step _step 16/37 https://garris.github.io/BackstopJS/ (HTTP 200)
CasperJS:  [info] [phantom] Step _step 16/37: done in 15989ms.
CasperJS:  [info] [phantom] waitFor() finished in 41ms.
CasperJS:  [info] [phantom] Step anonymous 17/38 https://garris.github.io/BackstopJS/ (HTTP 200)
CasperJS:  Ready event received.
CasperJS: [info] [phantom] Step anonymous 17/38: done in 16053ms.
CasperJS:  [info] [phantom] Step anonymous 18/38 https://garris.github.io/BackstopJS/ (HTTP 200)
CasperJS:  [info] [phantom] Step anonymous 18/38: done in 16074ms.
CasperJS:  [info] [phantom] Step _step 19/38 https://garris.github.io/BackstopJS/ (HTTP 200)
CasperJS:  [info] [phantom] Step _step 19/38: done in 16095ms.
CasperJS:  [info] [phantom] wait() finished waiting for 10000ms.
CasperJS:  [info] [phantom] Step anonymous 20/38 https://garris.github.io/BackstopJS/ (HTTP 200)
CasperJS: Current location is https://garris.github.io/BackstopJS/
CasperJS:  <body>
CasperJS:       <div class="page-root container-fluid">
CasperJS:       <div class="row justify-content-center moneyshot">
CasperJS:         <div class="col-10">
CasperJS:           <p class="mascotBlock">
CasperJS:             <a href="https://github.com/garris/BackstopJS" class="lemur-link">
CasperJS:               <img id="theLemur" src="assets/lemurFace.png" class="lemurInYourFace" alt="">
CasperJS:             </a>
CasperJS:             <img id="lemurButt" src="assets/lemurButt.png" class="lemurButtInYourFace" alt="">
CasperJS:           </p>
CasperJS:           <p class="logoBlock">
CasperJS:             <img src="assets/BackstopJS3.svg" class="BackstopJS3" alt="BackstopJS 3">
CasperJS:           </p>
CasperJS:         </div>
CasperJS:         <h1>Visual regression testing for web apps.</h1>
CasperJS:       </div>
CasperJS:       <div class="row justify-content-center">
CasperJS:         <p class="supportsBlock col-10">
CasperJS:           Supports screen rendering with <a href="https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md" class="chromy">Chrome-headless</a>, <a href="http://phantomjs.org/" class="casper">Phantom</a> and <a href="https://github.com/laurentj/slimerjs/" class="casper">SlimerJS</a>.
CasperJS:           Add your own interactions with <a href="https://github.com/OnetapInc/chromy" class="chromy">ChromyJS</a> and <a href="http://casperjs.org/" class="casper">CasperJS</a> scripting.
CasperJS:         </p>
CasperJS:       </div>
CasperJS:       <div class="row justify-content-center">
CasperJS:         <p class="getItBlock col-10">
CasperJS:           BackstopJS was created by <a href="https://www.linkedin.com/in/garrisshipon/">Garris Shipon</a> with contributions from <a href="https://github.com/garris/BackstopJS#credits">these amazing engineers</a>.
CasperJS:         </p>
CasperJS:         <p class="getItBlock col-10">
CasperJS:           Opensourced under the <a href="https://raw.githubusercontent.com/garris/BackstopJS/master/LICENSE">The MIT License</a>.
CasperJS:         </p>
CasperJS:         <p class="getItBlock col-10">
CasperJS:           <span class="cta"><a href="https://github.com/garris/BackstopJS" class="github-link"><img src="assets/github-icon.png" class="github-icon" alt="Get it on GitHub"></a></span>
CasperJS:           <span class="cta"><a href="https://github.com/garris/BackstopJS">Get it on github!</a></span>
CasperJS:         </p>
CasperJS:       </div>
CasperJS:     </div>
CasperJS:     <p id="noShow" style="display: none;">This is text that should not show.</p>
CasperJS:     <!-- Optional JavaScript -->
CasperJS:     <!-- jQuery first, then Popper.js, then Bootstrap JS -->
CasperJS:     <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
CasperJS:     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
CasperJS:     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
CasperJS: 
CasperJS:   
CasperJS: 
CasperJS: 
CasperJS: <script type="text/javascript">
CasperJS:   const READY_LAG_MS = 3000;
CasperJS:   const READY_TAG = '_the_lemur_is_ready_to_see_you';
CasperJS:   const LEMUR_CLASS_ACTION = 'hideLemur';
CasperJS:   const COOKIE_TEST = /cookie/i;
CasperJS:   const CLICK_TEST = /click/i;
CasperJS:   const DELAY_TEST = /delay/i;
CasperJS: 
CasperJS:   if (COOKIE_TEST.test(window.location.search)) {
CasperJS:     showCookies();
CasperJS:   }
CasperJS:   if (CLICK_TEST.test(window.location.search)) {
CasperJS:     modifyLemurBehavior();
CasperJS:   }
CasperJS:   if (DELAY_TEST.test(window.location.search)) {
CasperJS:     delayLemurification();
CasperJS:   }
CasperJS: 
CasperJS:   function modifyLemurBehavior () {
CasperJS:     document.body.addEventListener('click', evt => {
CasperJS:       if (evt.target.id === 'theLemur') {
CasperJS:         containTheLemur();
CasperJS:         evt.preventDefault();
CasperJS:         setTimeout(setReadyFlags, READY_LAG_MS + 1000);
CasperJS:       } else {
CasperJS:         releaseTheLemur();
CasperJS:       }
CasperJS:     });
CasperJS:     console.log('lemur behavior is modified');
CasperJS:   }
CasperJS: 
CasperJS:   function showCookies () {
CasperJS:     document.getElementsByClassName('logoBlock')[0].innerText = 'cookies > ' + document.cookie;
CasperJS:   }
CasperJS: 
CasperJS:   function setReadyFlags () {
CasperJS:     console.log(READY_TAG);
CasperJS:     document.body.classList.add(READY_TAG);
CasperJS:   }
CasperJS: 
CasperJS:   function releaseTheLemur () {
CasperJS:     document.body.classList.remove(LEMUR_CLASS_ACTION);
CasperJS:   }
CasperJS: 
CasperJS:   function containTheLemur () {
CasperJS:     document.body.classList.add(LEMUR_CLASS_ACTION);
CasperJS:   }
CasperJS: 
CasperJS:   function delayLemurification () {
CasperJS:     containTheLemur();
CasperJS:     setTimeout(releaseTheLemur, READY_LAG_MS);
CasperJS:     setTimeout(setReadyFlags, READY_LAG_MS + 1000);
CasperJS:   }
CasperJS: </script>
CasperJS: </body>
CasperJS: [info] [phantom] Step anonymous 20/38: done in 26109ms.
CasperJS:  [info] [phantom] Step anonymous 21/38 https://garris.github.io/BackstopJS/ (HTTP 200)
CasperJS:  SCENARIO> Test1
CasperJS:  [info] [phantom] Step anonymous 21/38: done in 26181ms.
CasperJS:  [info] [phantom] Step anonymous 22/38 https://garris.github.io/BackstopJS/ (HTTP 200)
CasperJS: Capturing screenshots for tablet (1024x768)
CasperJS:  [debug] [phantom] Capturing page to /tmp/test-automation/VisualRegression/Institutional/backstop_data/bitmaps_reference/01076071529_Test1_0_document_1_tablet.png
CasperJS:  [info] [phantom] Capture saved to /tmp/test-automation/VisualRegression/Institutional/backstop_data/bitmaps_reference/01076071529_Test1_0_document_1_tablet.png
CasperJS:  [info] [phantom] Step anonymous 22/38: done in 26390ms.
CasperJS: [info] [phantom] Step anonymous 23/38 https://garris.github.io/BackstopJS/ (HTTP 200)
CasperJS:  Cookie state restored with cookies: []
CasperJS:  [info] [phantom] Step anonymous 23/38: done in 26457ms.
CasperJS:  [info] [phantom] Step _step 24/39 https://garris.github.io/BackstopJS/ (HTTP 200)
CasperJS: [info] [phantom] Step _step 24/39: done in 26457ms.
CasperJS:  [debug] [phantom] opening url: https://garris.github.io/BackstopJS/, HTTP GET
CasperJS:  [debug] [phantom] Navigation requested: url=https://garris.github.io/BackstopJS/, type=Other, willNavigate=true, isMainFrame=true
CasperJS:  [debug] [phantom] url changed to "https://garris.github.io/BackstopJS/"
CasperJS:  [debug] [phantom] Successfully injected Casper client-side utilities
CasperJS:  [info] [phantom] Step anonymous 26/39 https://garris.github.io/BackstopJS/ (HTTP 200)
CasperJS:  [info] [phantom] Step anonymous 26/39: done in 26648ms.
CasperJS:  [info] [phantom] Step _step 27/40 https://garris.github.io/BackstopJS/ (HTTP 200)
CasperJS:  [info] [phantom] Step _step 27/40: done in 26668ms.
CasperJS:  [info] [phantom] waitFor() finished in 40ms.
CasperJS:  [info] [phantom] Step anonymous 28/41 https://garris.github.io/BackstopJS/ (HTTP 200)
CasperJS: Ready event received.
CasperJS:  [info] [phantom] Step anonymous 28/41: done in 26729ms.
CasperJS:  [info] [phantom] Step anonymous 29/41 https://garris.github.io/BackstopJS/ (HTTP 200)
CasperJS:  [info] [phantom] Step anonymous 29/41: done in 26749ms.
CasperJS:  [info] [phantom] Step _step 30/41 https://garris.github.io/BackstopJS/ (HTTP 200)
CasperJS:  [info] [phantom] Step _step 30/41: done in 26769ms.
CasperJS:  [info] [phantom] wait() finished waiting for 10000ms.
CasperJS:  [info] [phantom] Step anonymous 31/41 https://garris.github.io/BackstopJS/ (HTTP 200)
CasperJS: Current location is https://garris.github.io/BackstopJS/
CasperJS:  <body>
CasperJS:       <div class="page-root container-fluid">
CasperJS:       <div class="row justify-content-center moneyshot">
CasperJS:         <div class="col-10">
CasperJS:           <p class="mascotBlock">
CasperJS:             <a href="https://github.com/garris/BackstopJS" class="lemur-link">
CasperJS:               <img id="theLemur" src="assets/lemurFace.png" class="lemurInYourFace" alt="">
CasperJS:             </a>
CasperJS:             <img id="lemurButt" src="assets/lemurButt.png" class="lemurButtInYourFace" alt="">
CasperJS:           </p>
CasperJS:           <p class="logoBlock">
CasperJS:             <img src="assets/BackstopJS3.svg" class="BackstopJS3" alt="BackstopJS 3">
CasperJS:           </p>
CasperJS:         </div>
CasperJS:         <h1>Visual regression testing for web apps.</h1>
CasperJS:       </div>
CasperJS:       <div class="row justify-content-center">
CasperJS:         <p class="supportsBlock col-10">
CasperJS:           Supports screen rendering with <a href="https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md" class="chromy">Chrome-headless</a>, <a href="http://phantomjs.org/" class="casper">Phantom</a> and <a href="https://github.com/laurentj/slimerjs/" class="casper">SlimerJS</a>.
CasperJS:           Add your own interactions with <a href="https://github.com/OnetapInc/chromy" class="chromy">ChromyJS</a> and <a href="http://casperjs.org/" class="casper">CasperJS</a> scripting.
CasperJS:         </p>
CasperJS:       </div>
CasperJS:       <div class="row justify-content-center">
CasperJS:         <p class="getItBlock col-10">
CasperJS:           BackstopJS was created by <a href="https://www.linkedin.com/in/garrisshipon/">Garris Shipon</a> with contributions from <a href="https://github.com/garris/BackstopJS#credits">these amazing engineers</a>.
CasperJS:         </p>
CasperJS:         <p class="getItBlock col-10">
CasperJS:           Opensourced under the <a href="https://raw.githubusercontent.com/garris/BackstopJS/master/LICENSE">The MIT License</a>.
CasperJS:         </p>
CasperJS:         <p class="getItBlock col-10">
CasperJS:           <span class="cta"><a href="https://github.com/garris/BackstopJS" class="github-link"><img src="assets/github-icon.png" class="github-icon" alt="Get it on GitHub"></a></span>
CasperJS:           <span class="cta"><a href="https://github.com/garris/BackstopJS">Get it on github!</a></span>
CasperJS:         </p>
CasperJS:       </div>
CasperJS:     </div>
CasperJS:     <p id="noShow" style="display: none;">This is text that should not show.</p>
CasperJS:     <!-- Optional JavaScript -->
CasperJS:     <!-- jQuery first, then Popper.js, then Bootstrap JS -->
CasperJS:     <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
CasperJS:     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
CasperJS:     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
CasperJS: 
CasperJS:   
CasperJS: 
CasperJS: 
CasperJS: <script type="text/javascript">
CasperJS:   const READY_LAG_MS = 3000;
CasperJS:   const READY_TAG = '_the_lemur_is_ready_to_see_you';
CasperJS:   const LEMUR_CLASS_ACTION = 'hideLemur';
CasperJS:   const COOKIE_TEST = /cookie/i;
CasperJS:   const CLICK_TEST = /click/i;
CasperJS:   const DELAY_TEST = /delay/i;
CasperJS: 
CasperJS:   if (COOKIE_TEST.test(window.location.search)) {
CasperJS:     showCookies();
CasperJS:   }
CasperJS:   if (CLICK_TEST.test(window.location.search)) {
CasperJS:     modifyLemurBehavior();
CasperJS:   }
CasperJS:   if (DELAY_TEST.test(window.location.search)) {
CasperJS:     delayLemurification();
CasperJS:   }
CasperJS: 
CasperJS:   function modifyLemurBehavior () {
CasperJS:     document.body.addEventListener('click', evt => {
CasperJS:       if (evt.target.id === 'theLemur') {
CasperJS:         containTheLemur();
CasperJS:         evt.preventDefault();
CasperJS:         setTimeout(setReadyFlags, READY_LAG_MS + 1000);
CasperJS:       } else {
CasperJS:         releaseTheLemur();
CasperJS:       }
CasperJS:     });
CasperJS:     console.log('lemur behavior is modified');
CasperJS:   }
CasperJS: 
CasperJS:   function showCookies () {
CasperJS:     document.getElementsByClassName('logoBlock')[0].innerText = 'cookies > ' + document.cookie;
CasperJS:   }
CasperJS: 
CasperJS:   function setReadyFlags () {
CasperJS:     console.log(READY_TAG);
CasperJS:     document.body.classList.add(READY_TAG);
CasperJS:   }
CasperJS: 
CasperJS:   function releaseTheLemur () {
CasperJS:     document.body.classList.remove(LEMUR_CLASS_ACTION);
CasperJS:   }
CasperJS: 
CasperJS:   function containTheLemur () {
CasperJS:     document.body.classList.add(LEMUR_CLASS_ACTION);
CasperJS:   }
CasperJS: 
CasperJS:   function delayLemurification () {
CasperJS:     containTheLemur();
CasperJS:     setTimeout(releaseTheLemur, READY_LAG_MS);
CasperJS:     setTimeout(setReadyFlags, READY_LAG_MS + 1000);
CasperJS:   }
CasperJS: </script>
CasperJS: </body>
CasperJS: [info] [phantom] Step anonymous 31/41: done in 36794ms.
CasperJS:  [info] [phantom] Step anonymous 32/41 https://garris.github.io/BackstopJS/ (HTTP 200)
CasperJS:  SCENARIO> Test2
CasperJS:  [info] [phantom] Step anonymous 32/41: done in 36859ms.
CasperJS:  [info] [phantom] Step anonymous 33/41 https://garris.github.io/BackstopJS/ (HTTP 200)
CasperJS:  Capturing screenshots for phone (320x480)
CasperJS: [debug] [phantom] Capturing page to /tmp/test-automation/VisualRegression/Institutional/backstop_data/bitmaps_reference/01076071529_Test2_0_document_0_phone.png
CasperJS:  [info] [phantom] Capture saved to /tmp/test-automation/VisualRegression/Institutional/backstop_data/bitmaps_reference/01076071529_Test2_0_document_0_phone.png
CasperJS:  [info] [phantom] Step anonymous 33/41: done in 36948ms.
CasperJS: [info] [phantom] Step anonymous 34/41 https://garris.github.io/BackstopJS/ (HTTP 200)
CasperJS:  Cookie state restored with cookies: []
CasperJS:  [info] [phantom] Step anonymous 34/41: done in 36994ms.
CasperJS:  [info] [phantom] Step _step 35/42 https://garris.github.io/BackstopJS/ (HTTP 200)
CasperJS:  [info] [phantom] Step _step 35/42: done in 36995ms.
CasperJS:  [debug] [phantom] opening url: https://garris.github.io/BackstopJS/, HTTP GET
CasperJS:  [debug] [phantom] Navigation requested: url=https://garris.github.io/BackstopJS/, type=Other, willNavigate=true, isMainFrame=true
CasperJS:  [debug] [phantom] url changed to "https://garris.github.io/BackstopJS/"
CasperJS:  [debug] [phantom] Successfully injected Casper client-side utilities
CasperJS:  [info] [phantom] Step anonymous 37/42 https://garris.github.io/BackstopJS/ (HTTP 200)
CasperJS:  [info] [phantom] Step anonymous 37/42: done in 37152ms.
CasperJS:  [info] [phantom] Step _step 38/43 https://garris.github.io/BackstopJS/ (HTTP 200)
CasperJS:  [info] [phantom] Step _step 38/43: done in 37173ms.
CasperJS:  [info] [phantom] waitFor() finished in 42ms.
CasperJS:  [info] [phantom] Step anonymous 39/44 https://garris.github.io/BackstopJS/ (HTTP 200)
CasperJS: Ready event received.
CasperJS:  [info] [phantom] Step anonymous 39/44: done in 37236ms.
CasperJS:  [info] [phantom] Step anonymous 40/44 https://garris.github.io/BackstopJS/ (HTTP 200)
CasperJS: [info] [phantom] Step anonymous 40/44: done in 37259ms.
CasperJS:  [info] [phantom] Step _step 41/44 https://garris.github.io/BackstopJS/ (HTTP 200)
CasperJS:  [info] [phantom] Step _step 41/44: done in 37280ms.
CasperJS:  [info] [phantom] wait() finished waiting for 10000ms.
CasperJS:  [info] [phantom] Step anonymous 42/44 https://garris.github.io/BackstopJS/ (HTTP 200)
CasperJS: Current location is https://garris.github.io/BackstopJS/
CasperJS:  <body>
CasperJS:       <div class="page-root container-fluid">
CasperJS:       <div class="row justify-content-center moneyshot">
CasperJS:         <div class="col-10">
CasperJS:           <p class="mascotBlock">
CasperJS:             <a href="https://github.com/garris/BackstopJS" class="lemur-link">
CasperJS:               <img id="theLemur" src="assets/lemurFace.png" class="lemurInYourFace" alt="">
CasperJS:             </a>
CasperJS:             <img id="lemurButt" src="assets/lemurButt.png" class="lemurButtInYourFace" alt="">
CasperJS:           </p>
CasperJS:           <p class="logoBlock">
CasperJS:             <img src="assets/BackstopJS3.svg" class="BackstopJS3" alt="BackstopJS 3">
CasperJS:           </p>
CasperJS:         </div>
CasperJS:         <h1>Visual regression testing for web apps.</h1>
CasperJS:       </div>
CasperJS:       <div class="row justify-content-center">
CasperJS:         <p class="supportsBlock col-10">
CasperJS:           Supports screen rendering with <a href="https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md" class="chromy">Chrome-headless</a>, <a href="http://phantomjs.org/" class="casper">Phantom</a> and <a href="https://github.com/laurentj/slimerjs/" class="casper">SlimerJS</a>.
CasperJS:           Add your own interactions with <a href="https://github.com/OnetapInc/chromy" class="chromy">ChromyJS</a> and <a href="http://casperjs.org/" class="casper">CasperJS</a> scripting.
CasperJS:         </p>
CasperJS:       </div>
CasperJS:       <div class="row justify-content-center">
CasperJS:         <p class="getItBlock col-10">
CasperJS:           BackstopJS was created by <a href="https://www.linkedin.com/in/garrisshipon/">Garris Shipon</a> with contributions from <a href="https://github.com/garris/BackstopJS#credits">these amazing engineers</a>.
CasperJS:         </p>
CasperJS:         <p class="getItBlock col-10">
CasperJS:           Opensourced under the <a href="https://raw.githubusercontent.com/garris/BackstopJS/master/LICENSE">The MIT License</a>.
CasperJS:         </p>
CasperJS:         <p class="getItBlock col-10">
CasperJS:           <span class="cta"><a href="https://github.com/garris/BackstopJS" class="github-link"><img src="assets/github-icon.png" class="github-icon" alt="Get it on GitHub"></a></span>
CasperJS:           <span class="cta"><a href="https://github.com/garris/BackstopJS">Get it on github!</a></span>
CasperJS:         </p>
CasperJS:       </div>
CasperJS:     </div>
CasperJS:     <p id="noShow" style="display: none;">This is text that should not show.</p>
CasperJS:     <!-- Optional JavaScript -->
CasperJS:     <!-- jQuery first, then Popper.js, then Bootstrap JS -->
CasperJS:     <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
CasperJS:     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
CasperJS:     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
CasperJS: 
CasperJS:   
CasperJS: 
CasperJS: 
CasperJS: <script type="text/javascript">
CasperJS:   const READY_LAG_MS = 3000;
CasperJS:   const READY_TAG = '_the_lemur_is_ready_to_see_you';
CasperJS:   const LEMUR_CLASS_ACTION = 'hideLemur';
CasperJS:   const COOKIE_TEST = /cookie/i;
CasperJS:   const CLICK_TEST = /click/i;
CasperJS:   const DELAY_TEST = /delay/i;
CasperJS: 
CasperJS:   if (COOKIE_TEST.test(window.location.search)) {
CasperJS:     showCookies();
CasperJS:   }
CasperJS:   if (CLICK_TEST.test(window.location.search)) {
CasperJS:     modifyLemurBehavior();
CasperJS:   }
CasperJS:   if (DELAY_TEST.test(window.location.search)) {
CasperJS:     delayLemurification();
CasperJS:   }
CasperJS: 
CasperJS:   function modifyLemurBehavior () {
CasperJS:     document.body.addEventListener('click', evt => {
CasperJS:       if (evt.target.id === 'theLemur') {
CasperJS:         containTheLemur();
CasperJS:         evt.preventDefault();
CasperJS:         setTimeout(setReadyFlags, READY_LAG_MS + 1000);
CasperJS:       } else {
CasperJS:         releaseTheLemur();
CasperJS:       }
CasperJS:     });
CasperJS:     console.log('lemur behavior is modified');
CasperJS:   }
CasperJS: 
CasperJS:   function showCookies () {
CasperJS:     document.getElementsByClassName('logoBlock')[0].innerText = 'cookies > ' + document.cookie;
CasperJS:   }
CasperJS: 
CasperJS:   function setReadyFlags () {
CasperJS:     console.log(READY_TAG);
CasperJS:     document.body.classList.add(READY_TAG);
CasperJS:   }
CasperJS: 
CasperJS:   function releaseTheLemur () {
CasperJS:     document.body.classList.remove(LEMUR_CLASS_ACTION);
CasperJS:   }
CasperJS: 
CasperJS:   function containTheLemur () {
CasperJS:     document.body.classList.add(LEMUR_CLASS_ACTION);
CasperJS:   }
CasperJS: 
CasperJS:   function delayLemurification () {
CasperJS:     containTheLemur();
CasperJS:     setTimeout(releaseTheLemur, READY_LAG_MS);
CasperJS:     setTimeout(setReadyFlags, READY_LAG_MS + 1000);
CasperJS:   }
CasperJS: </script>
CasperJS: </body>
CasperJS: [info] [phantom] Step anonymous 42/44: done in 47295ms.
CasperJS:  [info] [phantom] Step anonymous 43/44 https://garris.github.io/BackstopJS/ (HTTP 200)
CasperJS:  SCENARIO> Test2
CasperJS:  [info] [phantom] Step anonymous 43/44: done in 47360ms.
CasperJS:  [info] [phantom] Step anonymous 44/44 https://garris.github.io/BackstopJS/ (HTTP 200)
CasperJS:  Capturing screenshots for tablet (1024x768)
CasperJS: [debug] [phantom] Capturing page to /tmp/test-automation/VisualRegression/Institutional/backstop_data/bitmaps_reference/01076071529_Test2_0_document_1_tablet.png
CasperJS:  [info] [phantom] Capture saved to /tmp/test-automation/VisualRegression/Institutional/backstop_data/bitmaps_reference/01076071529_Test2_0_document_1_tablet.png
CasperJS:  [info] [phantom] Step anonymous 44/44: done in 47575ms.
CasperJS: [info] [phantom] Done 44 steps in 47575ms
CasperJS:  Comparison config file updated.
CasperJS:  [debug] [phantom] Navigation requested: url=about:blank, type=Other, willNavigate=true, isMainFrame=true
CasperJS: [debug] [phantom] url changed to "about:blank"

Bitmap file generation completed.

Run `$ backstop test` to generate diff report.

      COMMAND | Command `reference` successfully executed in [48.168s]

Thank you, Ken

garris commented 7 years ago

@kenith asyncCaptureLimit is only for chrome engine. Capture is synchronous with phantom option. This is as designed.

Kenith commented 7 years ago

@garris Really appreciate for the help. I tried, but seems Capture is not working either. The config is as bellow.

Would you please explain more about the how to use the Capture?

Also, I found an same question raised on Jul 19, 2016: https://github.com/garris/BackstopJS/issues/224

Note: Sorry to tell you that we use the phantomjs as our engine, because the engine - chrome (v62) is not stable in Linux (Centos7), sometimes, for example, it should capture 4 screenshots, but with some possibilities, not all screenshots are captured. Later, we will raise a detail issue to you. Really appreciate for your help in advance.

{"viewports": [
        {
            "label": "phone", 
            "width": 320, 
            "height": 480
        }, 
        {
            "label": "tablet", 
            "width": 1024, 
            "height": 768
        }
    ], 
    "onBeforeScript": "casper/onBefore.js", 
    "onReadyScript": "casper/onReady.js", 
    "scenarios": [
        {
            "label": "Test1", 
            "cookiePath": "", 
            "url": "https://garris.github.io/BackstopJS/", 
            "referenceUrl": "", 
            "readyEvent": "", 
            "readySelector": "", 
            "delay": 10000, 
            "hideSelectors": [], 
            "removeSelectors": [], 
            "hoverSelector": "", 
            "clickSelector": "", 
            "postInteractionWait": "", 
            "selectors": [], 
            "selectorExpansion": true, 
            "misMatchThreshold": 0.1, 
            "requireSameDimensions": true
        }, 
        {
            "label": "Test2", 
            "cookiePath": "", 
            "url": "https://garris.github.io/BackstopJS/", 
            "referenceUrl": "", 
            "readyEvent": "", 
            "readySelector": "", 
            "delay": 10000, 
            "hideSelectors": [], 
            "removeSelectors": [], 
            "hoverSelector": "", 
            "clickSelector": "", 
            "postInteractionWait": "", 
            "selectors": [], 
            "selectorExpansion": true, 
            "misMatchThreshold": 0.1, 
            "requireSameDimensions": true
        }
    ], 
    "paths": {
        "bitmaps_reference": "backstop_data/bitmaps_reference", 
        "bitmaps_test": "backstop_data/bitmaps_test", 
        "engine_scripts": "backstop_data/engine_scripts", 
        "html_report": "backstop_data/html_report", 
        "ci_report": "backstop_data/ci_report"
    }, 
    "report": [
        "browser"
    ], 
    "engine": "phantomjs", 
    "casperFlags": [
        "--ignore-ssl-errors=yes", 
        "--engine=phantomjs", 
        "--proxy=10.74.66.43:3128"
    ], 
    "Capture": 3, 
    "asyncCompareLimit": 50, 
    "debug": true, 
    "debugWindow": false
}

Log

BackstopJS v3.0.32
Loading config:  /Users/ken/Docker/test-automation/VisualRegression/Institutional/backstop.json

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

Running CasperJS with:  [ '/usr/local/lib/node_modules/backstopjs/capture/genBitmaps.js',
  '--ignore-ssl-errors=yes',
  '--engine=phantomjs',
  '--proxy=10.74.66.43:3128',
  '--captureConfigFileName=/var/folders/sx/81945gm9197gbnxx5snbl54c0000gn/T/capture/20a06bb00fceeedb0c83fa61cd0c080a3c7e518f.json' ]
CasperJS:  CREATING NEW REFERENCE FILES
CasperJS:  Cookie state restored with cookies: []
CasperJS:  Ready event received.
CasperJS:  Current location is https://garris.github.io/BackstopJS/
CasperJS:  SCENARIO> Test1
CasperJS:  Capturing screenshots for phone (320x480)
CasperJS:  Cookie state restored with cookies: []
CasperJS:  Ready event received.
CasperJS:  Current location is https://garris.github.io/BackstopJS/
CasperJS:  SCENARIO> Test1
CasperJS:  Capturing screenshots for tablet (1024x768)
CasperJS:  Cookie state restored with cookies: []
CasperJS:  Ready event received.
CasperJS:  Current location is https://garris.github.io/BackstopJS/
CasperJS:  SCENARIO> Test2
CasperJS:  Capturing screenshots for phone (320x480)
CasperJS:  Cookie state restored with cookies: []
CasperJS:  Ready event received.
CasperJS:  Current location is https://garris.github.io/BackstopJS/
CasperJS:  SCENARIO> Test2
CasperJS:  Capturing screenshots for tablet (1024x768)
CasperJS:  Comparison config file updated.

Bitmap file generation completed.

Run `$ backstop test` to generate diff report.

      COMMAND | Command `reference` successfully executed in [48.435s]
Ken-MacBook-Pro:Institutional ken$
VladimirPittner commented 6 years ago

@Kenith I guess @garris meant that with PhantomJS you can only run 1 capture at the time (therefore synchronous), that means asyncCapture is setting only for case when you use Chrome. There is not such setting for PhantomJS.

As for not capturing all screenshots with Chrome engine maybe you will find some helpful answer here https://github.com/garris/BackstopJS/issues/589 ... although I still get empty screenshots even with asyncCapture set to 1 :/

Kenith commented 6 years ago

@VladimirPittner Great post! Thank you! We will take time to try it.

Kenith commented 6 years ago

@garris If we only can run 1 capture at the time for phantom, you could close ticket. Really appreciate for your help.

Kenith commented 6 years ago

closed as PhantomJS does not have parallel feature