automating browser with phantom.js

Question

I am trying to automate the browser using phantomjs. I load a page, supply the login credentials and then want to click on the submit button. As the first step I loaded a page, modified the form values and piped the output to a .html file to see if that works. Here is my code:

var page = require('webpage').create();
var fs = require('fs');
page.onConsoleMessage = function(msg) {
  fs.write("/home/phantom/output.html", msg, 'w');
};
page.settings.userAgent = 'SpecialAgent';
//page.open('http://google.com', function(status) {
page.open('https://somewebsitehavingaform.com', function(status) {
  if (status !== 'success') {
    console.log('Unable to access network');
  } else {
    var ua = page.evaluate(function() {
        document.getElementsByName('id').value="id";
        document.getElementsByName('name').value="name";    
        document.getElementsByName('password').value="password";        
        console.log(document.body.innerHTML);
    });
  }
  phantom.exit();
});

When i open the output.html, it shows me the form but its empty. I expected id,name and password to be pre-filled. Where i am going wrong here?

Answer 1

First of all, getElementsByName will return an array. In order to set the value of the first input found with that name, you'd need to choose a specific element in it, ie the first:

getElementsByName('foo')[0].value = 'bar'

Then, if you change the assignment to use setAttribute it seems to work correctly:

var ua = page.evaluate(function() {
    document.getElementsByName('id')[0].setAttribute("value", "id");
    document.getElementsByName('name')[0].setAttribute("value", "name");
    document.getElementsByName('password')[0].setAttribute("value", "password");
    console.log(document.body.innerHTML);
});

According to the Mozilla docs ,

Using setAttribute() to modify certain attributes, most notably value in XUL, works inconsistently, as the attribute specifies the default value. To access or modify the current values, you should use the properties. For example, use elt.value instead of elt.setAttribute('value', val) .

Though since you're just writing out the resulting HTML to file, I don't think it should cause you a problem in this instance.

Not sure if Phantom JS is now using the QJSEngine internally, but notice this open ticket on their backlog that might be related to the issue you're getting with dot notation:

QJSEngine is a simple wrapper around V8, mainly for use with QtQml . Using QJSEngine for the PhantomJS main context might prove to be more malleable/customizable than the current implementation.

Problems:

…

Automatic property creation when using dot notation does not work with QObjects added to the QJSEngine

(This suggests that QJSEngine isn't the current implementation in use, but was raised 9 months ago, so not sure if it's been introduced since then, so thought it was worth flagging)