Logging in to firedrive using casperjs - forms

Question

I'm trying to log in to Firedrive using casperjs 1.1.0-beta3 with phantomjs 1.9.0. The form does not have an id so I use findone to find the form elements.
Here is the code which runs without throwing any exceptions but doesn't log in as can be seen by capturing the output (document html) and searching for the word 'anonymous'.
Any ideas would be welcome.
Run like this:
casperjs firedrive1.js http://www.firedrive.com/myfiles username password
firedrive1.js:
// Expects url, user, and password on command line.
/*jshint strict:false*/
/*global CasperError, console, phantom, require*/
var casper = require("casper").create();
var dump = require("utils").dump;
var url = casper.cli.args[0]
var user = casper.cli.args[1]
var pass = casper.cli.args[2]
// print out all the messages in the headless browser context
casper.on('remote.message', function(msg) {
this.echo('remote message caught: ' + msg);
});
// print out all the messages in the headless browser context
casper.on("page.error", function(msg, trace) {
this.echo("Page Error: " + msg, "ERROR");
});
casper.start(url, function() {
console.log("page loaded");
this.evaluate(function(user, pass) {
console.log("user: " + user);
console.log("pass: " + pass);
__utils__.findOne('#username').value = user;
__utils__.findOne('#password').value = pass;
console.log("user set to: " + __utils__.findOne('#username').value);
console.log("pass set to: " + __utils__.findOne('#password').value);
__utils__.findOne('#header_login_btn').click();
}, {user: user,
pass: pass})
});
casper.thenEvaluate(function(){
console.log("Page Title " + document.title);
console.log('doc: ' + document.documentElement.innerHTML);
});
casper.run();
The trick seems to be to separate the retrieval of the page using casper.start from the filling in of the form by putting that in a separate casper.then.
Here is an outline of what finally worked. Notice that the class of the form is different from the one I thought it was, this is because the page is actually a different page from the one I captured by hand from Firefox:
casper.start(url, function(){
// do nothing or log something
});
casper.then(function() {
this.fill('form.form-horizontal', {
'user': user,
'pass': pass
}, true);
});
casper.thenEvaluate(function(){
// check that the user name appears in the text of a link
});

Answer 1

It is possible that the issue is the click() which is the DOM click and likely does not work in PhantomJS. You should use the casper.click for this after the evaluate call:
this.evaluate(function(user, pass) {...}, {...})
this.click('#header_login_btn');
If this does not solve the problem you may try it with the various casper.fill functions. They work on forms and include the optional submit argument which you would set to true.
this.fillSelectors('form.il_login_form', {
'#username': user,
'#password': pass
}, true);
It looks like the selector for the login form on the firedrive page is form.il_login_form.
It is also possible that you need to include a casper.wait or casper.waitForSelector after login, if it is only an AJAX driven login.
If this still does not work, you may need to update PhantomJS to newest version (currently 1.9.7-15).