Some case a website would ask username and password in this form (attached photo below) from the browser. Is it possible to use Casper.js to fill out this?
Casper.fill can only do it when it's a HTML form. http://casperjs.org/api.html#casper.fill

UPDATE 1:
I tried this and didn't work.
var casper = require("casper").create({
pageSettings: {
userName: "myusername",
password: "mypassword"
}
});
This login box is in Windows 7 and the reason it popped up because I used proxy. And the reason I have to do this is because casperjs --proxy=x.x.x.x --proxy-auth=u:p don't work (at least on Win7)
From the screenshot, it seems that you are dealing with HTTP Basic Authentication. If that's the case then you should be able to use the following url format:
http://username:password@www.example.com/path
Though, I did not test if it works in CasperJS
You should be able to use the setHttpAuth() function for this:
var casper = require("casper").create();
casper.start();
casper.setHttpAuth('sheldon.cooper', 'b4z1ng4');
casper.thenOpen('http://password-protected.domain.tld/', function() {
this.echo("I'm in. Bazinga.");
});
casper.run();