casperJS page.resource.request and page.resource.response callback calls increment when opening multiple URL

问题

I've got a small problem which has to do with the following approach:

I want to iterate through a given array of URLs with a loop
I do this here because I want to measure the loading time of each page which is listed in the URL List

Here comes the code which is leaned to this example here (https://stackoverflow.com/a/24137013/4353553):

var urls = [
  'meine-url.de/home.html',
  'meine-url.de/impressum.html',
  'meine-url.de/rechtliche_hinweise.html',
  'meine-url.de/datenschutz.html',
  'meine-url.de/emissions_verbrauchswerte.html',
  'meine-url.de/probefahrtanfrage.html',
  'meine-url.de/angebotsanfrage.html',
  'meine-url.de/servicekontaktanfrage.html',
  'meine-url.de/serviceterminanfrage.html',
  'meine-url.de/autohaus_aktuell.html',
  'meine-url.de/aktuelles_von_auto.html',
  'meine-url.de/unser_autohaus.html',
  'meine-url.de/unser_team.html',
  'meine-url.de/anfahrt.html',
  'meine-url.de/standorte.html',
  'meine-url.de/oeffnungszeiten.html',
  'meine-url.de/checks_inspektion.html',
  'meine-url.de/auto_service_check.html',
  'meine-url.de/inspektion.html',
  'meine-url.de/hauptuntersuchung.html',
  'meine-url.de/reparaturen.html',
  'meine-url.de/garantie_mobilitaet.html',
  'meine-url.de/herstellergarantie.html',
  'meine-url.de/mobilservice.html',
  'meine-url.de/flex_garantie.html',
  'meine-url.de/verlaengerung_anschlussgarantie.html'
];

var s,e;

casper.test.begin('TEST CONTROLLER', function(test) {

  casper.start();

  /* Run tests for all given URLs */
  casper.each(urls, function(self, url, i) {

    /* Open the next given URL form the array */
    casper.thenOpen(url, function() {

      /* On every request we take a new start time */
      casper.on('page.resource.requested', function(requestData, request) {
        console.log("REQUESTED:",requestData.url);
        s = new Date().getTime();
      });

      /* And when the response comes in we calculate the difference */
      casper.on('page.resource.received', function(response) {
        console.log("RESPONSE DATA GOTTEN: ",response.url);

        e = new Date().getTime();
        casper.echo("URL: "+url+" - "+"Time between HTTP request and HTTP response : "+ (e-s) + "ms", "INFO");
      });

    });

  });

  casper.run(function() {
    test.done();
  });

});

In generally this approach works but there is a little problem i do not understand and makes no sense.

Have look on the output result here:

# TEST CONTROLLER
  PASS URL: meine-url.de/home.html - Time : 244ms

  PASS URL: meine-url.de/home.html - Time : 153ms
  PASS URL: meine-url.de/impressum.html - Time : 154ms

  PASS URL: meine-url.de/home.html - Time : 123ms
  PASS URL: meine-url.de/impressum.html - Time : 124ms
  PASS URL: meine-url.de/rechtliche_hinweise.html - Time : 125ms

  PASS URL: meine-url.de/home.html - Time : 153ms
  PASS URL: meine-url.de/impressum.html - Time : 154ms
  PASS URL: meine-url.de/rechtliche_hinweise.html - Time : 154ms
  PASS URL: meine-url.de/datenschutz.html - Time : 154ms

  PASS URL: meine-url.de/home.html - Time : 2327ms
  PASS URL: meine-url.de/impressum.html - Time : 2328ms
  PASS URL: meine-url.de/rechtliche_hinweise.html - Time : 2328ms
  PASS URL: meine-url.de/datenschutz.html - Time : 2328ms
  PASS URL: meine-url.de/emissions_verbrauchswerte.html - Time : 2328ms

  PASS URL: meine-url.de/home.html - Time : 2403ms
  PASS URL: meine-url.de/impressum.html - Time : 2404ms
  PASS URL: meine-url.de/rechtliche_hinweise.html - Time : 2405ms
  PASS URL: meine-url.de/datenschutz.html - Time : 2405ms
  PASS URL: meine-url.de/emissions_verbrauchswerte.html - Time : 2405ms
  PASS URL: meine-url.de/probefahrtanfrage.html - Time : 2405ms

  PASS URL: meine-url.de/home.html - Time : 2320ms
  PASS URL: meine-url.de/impressum.html - Time : 2321ms
  PASS URL: meine-url.de/rechtliche_hinweise.html - Time : 2321ms
  PASS URL: meine-url.de/datenschutz.html - Time : 2321ms
  PASS URL: meine-url.de/emissions_verbrauchswerte.html - Time : 2321ms
  PASS URL: meine-url.de/probefahrtanfrage.html - Time : 2321ms
  PASS URL: meine-url.de/angebotsanfrage.html - Time : 2321ms

  PASS URL: meine-url.de/home.html - Time : 2363ms
  PASS URL: meine-url.de/impressum.html - Time : 2364ms
  PASS URL: meine-url.de/rechtliche_hinweise.html - Time : 2365ms
  PASS URL: meine-url.de/datenschutz.html - Time : 2365ms
  PASS URL: meine-url.de/emissions_verbrauchswerte.html - Time : 2365ms
  PASS URL: meine-url.de/probefahrtanfrage.html - Time : 2365ms
  PASS URL: meine-url.de/angebotsanfrage.html - Time : 2365ms
  PASS URL: meine-url.de/servicekontaktanfrage.html - Time : 2365ms

  PASS URL: meine-url.de/home.html - Time : 3025ms
  PASS URL: meine-url.de/impressum.html - Time : 3026ms
  PASS URL: meine-url.de/rechtliche_hinweise.html - Time : 3026ms
  PASS URL: meine-url.de/datenschutz.html - Time : 3026ms
  PASS URL: meine-url.de/emissions_verbrauchswerte.html - Time : 3026ms
  PASS URL: meine-url.de/probefahrtanfrage.html - Time : 3027ms
  PASS URL: meine-url.de/angebotsanfrage.html - Time : 3027ms
  PASS URL: meine-url.de/servicekontaktanfrage.html - Time : 3027ms
  PASS URL: meine-url.de/serviceterminanfrage.html - Time : 3027ms

So you can see it builds up a stack, the callback methods, BOTH casper.on('page.resource.requested' and casper.on('page.resource.received' got callbacks from ALL pages ever called before. And as you see this increments with every step.

The code works correct respective to the measured time for the last given URL but its not proper here.

I just want ONE callback for ONE URL and not this, what can i do here, i assumed it must have to do something with the page object. Something out of this context: https://github.com/n1k0/casperjs/pull/826

But this doesn't work, when I recreate the page context I get error messages like this:

FAIL Error: cannot access member `customHeaders' of deleted QObject

uncaughtError: TypeError: 'undefined' is not a function (evaluating 'casper.newPage()')

Seems like he cannot find the newPage function.

回答1:

casper.on() will always add an event handler to the list. It will not replace them. Since you add the event on every iteration you will get duplicate output from previous iterations.

Additionally, the then callback is called after the URL is loaded, so the event handlers that you register inside of that callback won't be called for the current URL anymore.

casper.start();

/* On every request we take a new start time */
casper.on('page.resource.requested', function(requestData, request) {
    console.log("REQUESTED:",requestData.url);
    s = new Date().getTime();
});

/* And when the response comes in we calculate the difference */
casper.on('page.resource.received', function(response) {
    console.log("RESPONSE DATA GOTTEN: ",response.url);

    var e = new Date().getTime();
    casper.echo("URL: "+url+" - "+"Time between HTTP request and HTTP response : "+ (e-s) + "ms", "INFO");
});

/* Run tests for all given URLs */
casper.each(urls, function(self, url, i) {
    /* Open the next given URL form the array */
    casper.thenOpen(url);
});

casper.run(function() {
    test.done();
});

If you want to make it more robust, then you need to detect if the page was at all loaded. For that you might need to register to "resource.error" and casper.page.onResourceTimeout (Example).

来源：https://stackoverflow.com/questions/32221785/casperjs-page-resource-request-and-page-resource-response-callback-calls-increme

标签

javascript

callback

event-handling

casperjs