Selector added by ajax script doesn't fire snapshot

I’ve this case where when the page loads it fire a ajax request using some parameters passed with #! and then, once has done it adds a div#rmp-done, I set up htmlSnapshots like this to wait for that selector:

var htmlSnapshots = require('html-snapshots');
var result = htmlSnapshots.run({
	input: "array",
	source: [
		"mysite/something/#!/first_param"
	],
	outputDir: "./snapshots",
	outputDirClean: true,
        selector: "#rmp-done"
});

but I wait a lot and then fails with no output.

The javascript file is a simple jQuery script that call $.ajax to an url and fetch some data then once has done it append the data and div#rmp-done to the body.

Is possible to do trigger the snapshot when the ajax call has finished? (with a timeout callback works fine)

[localnerve]

How I tested was to just insert output statements into the installed code. Quick and dirty results.

If you’re interested:

1. Update selectorDetect.js to receive output from the page and write it out to a test file:

        // The test to determine readiness
        function() {
          var testObj = page.evaluate(detector, {
            selector: options.selector,
            url: options.url
          });

          fs.write("test001.txt", testObj.output, "a");
          return testObj.result;
        },

1. Collect output in the detector used in detectors.js:

  querySelector: function(options) {

    var result = false;
    var el = document.querySelector(options.selector);

    var output = '@@@ querySelector called\n';

    if (el) {
      output += '  => found element, ';

      // el must be an HTMLElement that is visible
      result = el.offsetWidth && el.offsetHeight;

      output += 'result: '+result+'\n';
    }

    return {
      result: result,
      output: output
    };
  },

1. I ran this test script:

var path = require("path");
var util = require("util");
var assert = require("assert");
var htmlSnapshots = require("html-snapshots");

htmlSnapshots.run({
  input: 'array',
  source: [ 'https://www.ecutuningperformance.com/en/chip-tuning/#!/ALFA-ROMEO/147/1.6L-16V-TS-88KW-120PS-ME7.3.1' ],
  outputDir: path.join(__dirname, "./tmp"),
  outputDirClean: true,
  selector: '#rmp-done',
  timeout: 30000
}, function(err, completed) {

  console.log("completed snapshots:");
  console.log(util.inspect(completed));

  // throw if there was an error
  assert.ifError(err);
});

1. Open ‘test001.txt’:

@@@ querySelector called
@@@ querySelector called
@@@ querySelector called
@@@ querySelector called
@@@ querySelector called
@@@ querySelector called
@@@ querySelector called
@@@ querySelector called
@@@ querySelector called
@@@ querySelector called
@@@ querySelector called
@@@ querySelector called
  => found element, result: 0
@@@ querySelector called
  => found element, result: 0
@@@ querySelector called
  => found element, result: 0
@@@ querySelector called
  => found element, result: 0
@@@ querySelector called
  => found element, result: 0
@@@ querySelector called
  => found element, result: 0
// A bunch more repeating I'm omitting

[codekraft-studio]

Many thanks for the tips! I will spent time on it! After seeing strange things on my windows machine I decided to try on a linux based environment and I realized is a lot verbose and I really don’t know why but on windows was behaving strangely :[ that’s why previously I suggested for more verbosity because the same script wasn’t returning anything as output when I was trying on windows. Also there was a couple of bugs (maybe related to my windows environment) once is this:

rimraf.js:312
        throw er
        ^

Error: ENOTEMPTY: directory not empty, rmdir 'C:\Users\Filippo\Desktop\templates\temp\etp_snapshot\temp'
    at Error (native)

    at Object.fs.rmdirSync (fs.js:806:18)
    at rmkidsSync (C:\Users\Filippo\Desktop\templates\temp\etp_snapshot\node_modules\rimraf\rimraf.js:342:11)
    at rmdirSync (C:\Users\Filippo\Desktop\templates\temp\etp_snapshot\node_modules\rimraf\rimraf.js:332:7)
    at rimrafSync (C:\Users\Filippo\Desktop\templates\temp\etp_snapshot\node_modules\rimraf\rimraf.js:303:9)
    at Object.module.exports.run (C:\Users\Filippo\Desktop\templates\temp\etp_snapshot\node_modules\html-snapshots\lib\html-snapshots.js:129:7)
    at Object.<anonymous> (C:\Users\Filippo\Desktop\templates\temp\etp_snapshot\main.js:7:28)
    at Module._compile (module.js:413:34)
    at Object.Module._extensions..js (module.js:422:10)
    at Module.load (module.js:357:32)

after opening a snapshot with a editor to watch it.

And when I used an array of sources, it always did one and no more. (always on windows), in linux the same script run through all of them.

source: [
	"http://www.codekraft.it/test/index#!test",
	"http://www.codekraft.it/test/index#!prova",
	"http://www.codekraft.it/test/index",
],

node main.js
completed snapshots:
[ 'temp\\test\\index#!prova\\index.html' ]

In linux is working like a charm I will continue on this. Many many thanks great 📦 again!!