How to fill up form using CasperJS without form tag

Question

I'm new to CasperJS and I'm having problems in logging in into this site http://weibo.com/login.php

here's what I've tried

this.fill('form#contact-form', {
    'username':    'test@test.com',
    'password':    'anypassword',

}, true);

I can't used that since it has no form.

so I tried a different method using sendKeys.

this.sendKeys('.W_input ', 'tinkerbell@gmail.com');

Now my problem in here is that the input text has no ID in it, only a CLASS and both username and password have the same CLASS in it. how can i type into that textbox using only that class? or is it possible to use sendKeys using XPath?

Answer 1

casper supports CSS3 selectors (tuts+ has a decent rundown of the top 30 you should memorize) so you could do something like:

this.sendKeys('input[name=username]', 'tinkerbell@gmail.com');

Answer 2

I use querySelector function to set username and password with success:

var casper = require("casper").create();
casper.start('http://www.weibo.com', function() {
    this.evaluate(function(username, password) {
        document.querySelector('input[node-type="username"]').value = username;
        document.querySelector('input[node-type="password"]').value = password;
        document.querySelector('.W_btn_g:eq(1)').click();
    }, 'your_username', 'your_password');

});

casper.then(function() {
    this.wait(50000, function() {
        this.echo("50s");
    });

});

casper.then(function() {
    this.capture('weibo.png');
});

casper.run();

Answer 3

This is simple casper js script to fill login form assuming it has mentioned id's for each field

casper.evaluate(function(username, password) { document.querySelector('input#user_email').value = username;

      document.querySelector('input#user_password').value = password;
      document.querySelector('input#login-button').click();
  }, 'email@email.com', 'password');