search

garris / BackstopJS

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

[PhantomJs] How to set page load time out for engine - phantomjs #599

Closed Kenith closed 6 years ago

Kenith commented 6 years ago

Hello All,

These days, we are using the phantomjs as our engine to test. However, we found that with high possibilities, the phantom will hang there. We searched a lot of solutions, and found that casper.options.pageSettings.resourceTimeout = 300000 could be the help. But how to make the resourceTimeout take effective.

We tried to set the js into casper/onReady.js as debug as bellow. However not working, because the hang issue still there, and what's more the page source we logged is still: ``.

Would you please give us a help for this? Really appreciate for your help in advance.

module.exports = function(casper, scenario, vp) {
    casper.options.waitTimeout = 300000;
    casper.options.pageSettings.resourceTimeout = 300000;
    console.log('SCENARIO> ' + scenario.label);
    require('./clickAndHoverHelper')(casper, scenario);
    // Wait page finish load
    casper.waitFor(function check() {
        return this.evaluate(function() {
            console.log("test is here.....");
            console.log(document.readyState);
            return document.readyState == "complete";
        });
    }, function then() {
        console.log("backstopjs_ready");
        console.log(document.documentElement.outerHTML);
    }, function timeout() { // step to execute if check has failed
        console.log("backstopjs_ready");
        console.log("timeout occured");
    });
};

backstop.json:

{
  "id": "Demo", 
  "viewports": [
    {
      "label": "phone", 
      "width": 320, 
      "height": 480
    }, 
    {
      "label": "tablet", 
      "width": 1024, 
      "height": 768
    }
  ], 
  "onBeforeScript": "casper/onBefore.js", 
  "onReadyScript": "casper/onReady.js", 
  "scenarios": [
    {
      "label": "Demo", 
      "cookiePath": "", 
      "url": "https://garris.github.io/BackstopJS/", 
      "referenceUrl": "", 
      "readyEvent": "", 
      "readySelector": "", 
      "delay": 1000, 
      "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": [], 
  "engine": "phantomjs", 
  "casperFlags": [
    "--ignore-ssl-errors=yes", 
    "--engine=phantomjs", 
    "--proxy=10.74.66.43:3128"
  ], 
  "asyncCaptureLimit": 2, 
  "asyncCompareLimit": 20, 
  "debug": false, 
  "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 1 of 1 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=/tmp/capture/d7e3f2270d82623d03d01c5c840dd98d3ebc903c.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> Demo CasperJS: test is here..... CasperJS: complete CasperJS: backstopjs_ready CasperJS: <html><head></head><body></body></html> 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> Demo CasperJS: test is here..... CasperJS: complete CasperJS: backstopjs_ready CasperJS: <html><head></head><body></body></html> 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 [15.093s]

Note: We used the engine - chrome as our 1st version, but the chrome could miss capture some page screenshot with possibilities. So we choose the phantom, we found that it is much more stable.

VladimirPittner commented 6 years ago

Hi @Kenith, what exactly are you trying to solve with this resourceTimeout, or what do you expect should happen when you change it? To me it seems more like issue with proxy or SSL protocol.

Please make sure you use this flags:

casperFlags: [
   '--ignore-ssl-errors=true',
   '--ssl-protocol=any'
],

Note: I have spot you have --ignore-ssl-errors=yes, I am not sure yes is correct value ;)

When it comes to Chromy missing scenarios capture, you might find answer and solution at the end of conversation here https://github.com/garris/BackstopJS/issues/589

Good luck.

/V

Kenith commented 6 years ago

Hello @VladimirPittner :

Really appreciate for the quick hot help. To use the timeout, we would like to avoid the phantom hang issue. Sometimes, during the test, the phantom will hang there, and block the whole test. We need to stop the test manually.

After searching the google, the resourceTimeout could solve the issue. So we were wondering where we need to set the config in backstops?

We will try with your solution, and will update to you timely.

Thank you, Ken

Kenith commented 6 years ago

Hello @VladimirPittner:

I found that it our side issue. We have tested, works fine now. Here are the configures for those who use the phantom as the engine.

Note: Capture is not working as expected for run multiple captures. Seems with phantom, only 1 capture could be run at the time. If anyone has the solution, please let us know.

backstop.json: For more phantomjs command lines in the CasperFlags, please refer to: http://phantomjs.org/api/command-line.html.

{
  "id": "Demo", 
  "viewports": [
    {
      "label": "phone", 
      "width": 320, 
      "height": 480
    }, 
    {
      "label": "tablet", 
      "width": 1024, 
      "height": 768
    }
  ], 
  "onBeforeScript": "casper/onBefore.js", 
  "onReadyScript": "casper/onReady.js", 
  "scenarios": [
    {
      "label": "Demo", 
      "cookiePath": "", 
      "url": "https://garris.github.io/BackstopJS/", 
      "referenceUrl": "", 
      "readyEvent": "", 
      "readySelector": "", 
      "delay": 1000, 
      "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": [], 
  "engine": "phantomjs", 
  "casperFlags": [
    "--ignore-ssl-errors=true", 
    "--ssl-protocol=any",
    "--engine=phantomjs", 
    "--proxy=10.74.66.43:3128"
  ], 
  "Capture": 2, 
  "asyncCompareLimit": 20, 
  "debug": false, 
  "debugWindow": false
}

casper/onBefore.js: Wait the page full loaded and add the timeout for wait to deal with the phantom hang issue by set the resourceTimeout & onResourceTimeout

module.exports = function (casper, scenario, vp) {
  require('./loadCookies')(casper, scenario);
  casper.userAgent('Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36');
  casper.page.settings.resourceTimeout = 300000;
  casper.options.waitTimeout = 300000;
  casper.page.onResourceTimeout = function() {
    console.log("Phantomjs failed to donwload the resource in 5 minutes..."); 
    casper.bypass(1);
  };
};

casper/onReady.js: Wait the page full loaded and add the timeout for wait to deal with the phantom hang issue

module.exports = function(casper, scenario, vp) {
    console.log('SCENARIO> ' + scenario.label);
    require('./clickAndHoverHelper')(casper, scenario);
    console.log("Wait page loaded...");
    // Wait page finish load
    casper.waitFor(function check() {
      return this.evaluate(function(status) {
          console.log("Page load status: ", document.readyState);
          return document.readyState == "complete";
      });
    }, function then() {
      console.log("backstopjs_ready");
      var html = this.evaluate(function() {
        return document.documentElement.outerHTML;
      });
      console.log(html.substring(0,50), "...");
    }, function timeout() { // step to execute if check has failed
      console.log("backstopjs_ready");
      console.log("timeout occured");
      console.log("exit phantomjs...");
      this.bypass(1);
    });
    // For more casper info, please refer to: http://docs.casperjs.org/en/latest/modules/casper.html
};

Thank you, Ken

Kenith commented 6 years ago

closed as solution found