In CasperJS scroll not working if we use it with PhantomJS - node.js

If we use casper without --engine=slimerjs the casper.scrollToBottom(); and casper.page.scrollPosition = {top: scrollHeight, left: 0}; is not working.
I mean if we use just $ casperjs file.js it not works. But with $ casperjs --engine=slimerjs file.js it works good enough.
Any suggestion?
maybe I should use something in command line? like --webdriver? I tried --ssl-protocol=any - IT ALSO DOESN'T HELPS. Or maybe I should include JS files like page.includeJs('https://www.my-site.com/thisjsfile.min.js')
P.S.: I'm not believe that it will be helpful but here is the code:
casper.then(function() {
this.waitForSelector('#myselector', function() {
this.open('http://www.my-site.com/messages');
this.echo('Open messages Inbox');
});
})
.then(function() {
this.repeat(timesForCasperRepeat, function() {
this.wait(5000, function() {
scrollHeight = this.evaluate(function() {
return document.body.scrollHeight;
});
this.echo('Scroll Height: ' + scrollHeight);
this.scrollToBottom();
this.echo('scrolling down', 'INFO_BAR');
});
});
});
even I change scrollToBottom() to:
this.page.scrollPosition = {
top: scrollHeight,
left: 0
};
I also included Anrtjom's handle errors events, there is a link
and there is the errors i have:
Error: ReferenceError: Can't find variable: ourvarname1
Error: ReferenceError: Can't find variable: jQuery
Error: ReferenceError: Can't find variable: ourvarname2
Error: ReferenceError: Can't find variable: ourvarname3
Error: TypeError: 'undefined' is not a function (evaluating 'RegExp.prototype.test.bind(/^(data|aria)-[a-z_][a-z\d_.\-]*$/)')
Console: Unsafe JavaScript attempt to access frame with URL http://www.my-site.com/messages from frame with URL http://ads.my-site.com/daisy?browser=windows_chrome&base=1&page=Mailbox&pageurl=%2fmessages&format=half_page&authid=1%2c0%2c1457605848%2c0xf290ca6243d86169%3beed7d0c7a540f963b5268452a4c95ac74793badc&cachebust=655998. Domains, protocols and ports must match.

found solution and it works for me, the problem was that casperjs use older version of phantomjs, so for mac users just go to folder where casperjs installed. For me it was: /usr/local/Cellar/casperjs/. And find folder with phantomjs: /usr/local/Cellar/casperjs/1.1-beta4/libexec/phantomjs and change it to new dowloaded from phantomjs website.
I found that casperjs used 1.9 version, but current phantomjs is 2.1.1, just changed folder to new one and no problems with it.

Related

Electron app createWriteStream throwing ENOENT error

I'm trying to download files to the filesystem in an electron app. My code, in the main thread, looks like this:
const dir = `${__dirname}/media`;
if (!fs.existsSync(dir)){
fs.mkdirSync(dir);
}
const file = fs.createWriteStream(`${dir}/${name}`);
file.on("open", function() {
const request = http.get(url, function(response) {
response.pipe(file);
response.on('end', function() {
file.close();
...
});
});
request.on('error', function(err) {
...
});
});
This works when running in development using electron . But after I build it with electron-builder, I get the error in an alert:
Uncaught Exception:
Error: ENOENT, media/uploads_2016_02_BASF_Holistic_Program.jpg not found in /Users/nicholasstephan/Desktop/XXXXXXX/dist/Mac/XXXXXX.app/Contents/Resources/app.asar
at notFoundError (ELECTRON_ASAR.js:109:19)
at Object.module.(anonymous function) [as open] (ELECTRON_ASAR.js:209:16)
at WriteStream.open (fs.js:1890:6)
at new WriteStream (fs.js:1876:10)
at Object.fs.createWriteStream (fs.js:1831:10)
at next (/Users/nicholasstephan/Desktop/XXXXXXXX/dist/Mac/XXXXXXXX.app/Contents/Resources/app.asar/media.js:19:18)
at /Users/nicholasstephan/Desktop/XXXXXXXX/dist/Mac/XXXXXXXX.app/Contents/Resources/app.asar/media.js:52:4
...
where the media.js, ln 19, being referred to is the const file = fs.createWriteStream(${dir}/${name}); line in the code.
I've tried the solutions offered in about a dozen other similar stackoverflow answers, but none have fixed the problem.
What's going on here?
Thanks.
The built Electron app uses the Asar format. Asar is an archive format (it's really just one big file) though in Electron you are able to read from it as if it were a standard directory.
I presume (though I have not seen it explicitly documented) that it is not possible to write to an Asar with the fs functions. In any case there are almost certainly more appropriate locations to write data.
Try writing to a different path. Electron provides a number of useful paths using app.getPath(name) so you could for example write to the userData directory which holds configuration files for your app.

Photoswipe and Require.js configuration

I have a module which is dependent upon both, PhotoSwipe and PhotoSwipeUI_Default. I am requiring both modules, like so and inside of my module I am initialising my gallery. EG:
define("modules/lightboxStart", ["vendor/PhotoSwipe", "vendor/PhotoSwipeUI_Default"], function (PhotoSwipe, PhotoSwipeUI_Default) {
var StartGallery = function(){
var lightBox = new PhotoSwipe($pswp, PhotoSwipeUI_Default, items, options);
lightBox.init();
}
StartGallery()
}
The gallery then works as expected but require is throwing a mismatched anonymous define module error in PhotoSwipe.js.
After looking through the docs I came to the conclusion that I need to run both scripts(PhotoSwipe and PhotoSwipeUI_Default) through the require.js API.
I then defined each, like so:
define('PhotoSwipe', function() {
//PhotoSwipe script here
return PhotoSwipe
})
And
define('PhotoSwipeUI_Default', function() {
//PhotoSwipeUI_Default script here
return PhotoSwipeUI_Default
})
This then eliminates the mismatched anonymous define module error I was getting earlier, but I am getting this error now instead:
PhotoSwipe is not a function
How could I fix this? I am essentially trying to access the PhotoSwipe function within PhotoSwipe.js and pass through my arguments but I am unable to do so without generating a load of js errors on the page and I can not figure out why.
Help much appreciated!
define( ["modules/lightboxStart", "vendor/PhotoSwipe", "vendor/PhotoSwipeUI_Default"], function (lightboxStart, PhotoSwipe, PhotoSwipeUI_Default) { //i think so}

browserify watchify produces errors

I am using gulp, browserify and watchify. Here is my 'scripts' task:
gulp.task('scripts', function() {
var b = watchify(browserify(paths.app.root + '/client.js', watchify.args));
b.on('update', bundle);
return bundle();
function bundle() {
return b
.bundle()
.pipe(source('bundle.js'))
.pipe(gulp.dest(paths.build.root + '/scripts'));
}
});
client.js looks like:
require('request');
alert('1');
where request is node module (http client): https://github.com/request/request
When I run this task and execute the code - everything is fine. The problem starts when I change client.js. When I comment alert('1'), watchify start it's work and bundle() runs again. When I reload the page on the browser, I get the following javascript exception:
Uncaught TypeError: Cannot read property 'version' of undefined
with the following stack trace:
/Users/me/project/node_modules/browserify/node_modules/crypto-browserify/node_modules/browserify-sign/node_modules/elliptic/lib/elliptic.js.../package.jsonbundle.js:19825
/Users/me/project/node_modules/browserify/node_modules/crypto-browserify/node_modules/create-ecdh/node_modules/elliptic/lib/elliptic.js.../package.jsonbundle.js:1
/Users/me/project/node_modules/browserify/node_modules/crypto-browserify/node_modules/create-ecdh/ecdh.js.bn.js
/Users/me/project/node_modules/browserify/node_modules/crypto-browserify/node_modules/create-ecdh/inject.js../ecdh
/Users/me/project/node_modules/browserify/node_modules/crypto-browserify/index.js.browserify-aes
/Users/me/project/node_modules/request/lib/helpers.js._process
/Users/me/project/node_modules/request/index.js../lib/cookies
./client.js.request
Any idea what is wrong with browserify / request?
It looks like it is an issue with elliptic, a dependency of browserify. See https://github.com/indutny/elliptic/issues/30
Hopefully this gets fixed up shortly.
Edit: It may actually be an issue with browserify. I would try reverting to 8.1.2 and seeing if that helps.

Node debug - undefined error

I was exploring node debugger and I am stuck at the problem. I have a debugging.js file with following content
var http = require("http");
function process_request(req, res) {
var body = 'Thanks for calling!\n';
var content_length = body.lenggth ;
res.writeHead(200, {
'Content-Length': content_length,
'Content-Type': 'text/plain'
});
res.end(body);
}
var s = http.createServer(process_request);
s.listen(8080);
Note that there is an mistake on line 5. This is done intentionally to debug the problem. Now I tried running node using node debug debugging.js. While this didn't gave any error. Calling setBreakpoint(5) resulted in following error.
Warning: script 'undefined' was not loaded yet.
_debugger.js:1399
var escapedPath = script.replace(/([/\\.?*()^${}|[\]])/g, '\\$1');
^
TypeError: Cannot call method 'replace' of undefined
at Interface.setBreakpoint (_debugger.js:1399:31)
at repl:1:1
...
Environment : Debian Linux3.2.0, Node JS - V0.13.0-pre
Can someone tell me, what should be done to resolve this?
I found post, which seems to have similar problem, but it seems to be a year old post and I am not sure whether the fix is available in the node version, I am using.
Well it seems to be a problem with the node V0.13.0-pre, I am using on Linux. I tried same code on Windows with node v0.10.33 and its working well. All the debugging commands are working as expected.

phantomjs and requirejs

codes in file main.js is like this:
phantom.injectJs("libs/require-1.0.7.js");
require.config(
{
baseUrl: ""
}
);
require([], function(){});
when i run "phantomjs main.js" in the commandline, requirejs doesn't work well in the main.js. I know how to use requirejs in the page running in the browser(including phantomjs' way: page.open(url, callback)), but not like above. I tries using requirejs like the main.js, it is a popular problem, i think. Thank you!
I just struggled for some time. My solution is not clean, but it works, and I'm happy with that due to the unfinished api documentation from phantomjs.
Wordy explanation
You need three files. One is your amd phantomjs test file which I'll call "amd.js". The second is your html page to load which I'll name "amd.html". Finally the browser test which I called "amdTestModule.js".
In amd.html, declare your script tag per normal:
<script data-main="amdTestModule.js" src="require.js"></script>
In your phantomjs test file, this is where it gets hacky. Create your page, and load in the 'fs' module. This allows you to open a relative file path.
var page = require('webpage').create();
var fs = require('fs');
page.open('file://' + fs.absolute('tests/amd.html'));
Now since requirejs loads files asynchronously, we can't just pass in a callback into page.open and expect things to go smoothly. We need some way to either
1) Test our module in the browser and communicate the result back to our phantomjs context. Or
2) Tell our phantomjs context that upon loading all the resources, to run a test.
#1 was simpler for my case. I accomplished this via:
page.onConsoleMessage = function(msg) {
msg = msg.split('=');
if (msg[1] === 'success') {
console.log('amd test successful');
} else {
console.log('amd test failed');
}
phantom.exit();
};
**See full code below for my console.log message.
Now phantomjs apparently has an event api built in but it is undocumented. I was also successfully able to get request/response messages from their page.onResourceReceived and page.onResourceRequested - meaning you can debug when all your required modules are loaded. To communicate my test result however, I just used console.log.
Now what happens if the console.log message is never ran? The only way I could think of resolving this was to use setTimeout
setTimeout(function() {
console.log('amd test failed - timeout');
phantom.exit();
}, 500);
That should do it!
Full Code
directory structure
/projectRoot
/tests
- amd.js
- amdTestModule.js
- amd.html
- require.js (which I symlinked)
- <dependencies> (also symlinked)
amd.js
'use strict';
var page = require('webpage').create();
var fs = require('fs');
/*
page.onResourceRequested = function(req) {
console.log('\n');
console.log('REQUEST');
console.log(JSON.stringify(req, null, 4));
console.log('\n');
};
page.onResourceReceived = function(response) {
console.log('\n');
console.log('RESPONSE');
console.log('Response (#' + response.id + ', stage "' + response.stage + '"): ' + JSON.stringify(response, null, 4));
console.log('\n');
};
*/
page.onConsoleMessage = function(msg) {
msg = msg.split('=');
if (msg[1] === 'success') {
console.log('amd test successful');
} else {
console.log('amd test failed');
}
phantom.exit();
};
page.open('file://' + fs.absolute('tests/amd.html'));
setTimeout(function() {
console.log('amd test failed - timeout');
phantom.exit();
}, 500);
amd.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<script data-main='amdTestModule.js' src='require.js'></script>
</body>
</html>
amdTestModule.js
require([<dependencies>], function(<dependencies>) {
...
console.log(
(<test>) ? "test=success" : "test=failed"
);
});
console
$ phantomjs tests/amd.js
amd test successful
you are misunderstanding webpage.injectJs()
it's for injecting scripts into the page you are loading, not into the phantomjs runtime environment.
So using .injectJs() is making requirejs load up into your page, not into phantomjs.exe.
That said, phantomjs's runtime environment has an aproximation of commonjs. RequireJs will not run on there by default. If you felt especially (VERY) motivated, you could attempt porting the require-shim made for nodejs, but it doesn't work out of the box, and would require an incredibly deep understanding of the runtimes. for more details: http://requirejs.org/docs/node.html
a better idea:
probably you should make sure you have commonjs versions of your javascript you wish to run. i personally write my code in typescript so i can build for either commonjs or amd. i use commonjs for phantomjs code, and amd for nodejs and browser.

Resources