CasperJS is not displaying a modal overlay

Question

I am working on a script for DraftKings. The first thing I need to do is login.

As you can see there is a login button in the top right. When you click it a modal overlay displays with the login box.

I have a CasperJS script that looks like this:

var casper = require('casper').create({
    clientScripts: ["./jquery-2.1.4.min.js"],
    loadImages:false,
    verbose: true,
    logLevel: 'debug'
});

//set browser user agent
casper.userAgent('Mozilla/5.0 (Macintosh; Intel Mac OS X)');

//Open URL
casper.start('https://draftkings.com');

casper.thenEvaluate(function() {
    this.clickLabel('Sign-in', 'a');
    //.click('a[data-lp-signin-nav="1"]');
    this.capture('login.png');
});

casper.thenEvaluate(function() {
    //fill form

    //casper.evaluate(function(){
        casper.sendKeys('#Username', "xxxxx");   
        casper.sendKeys('#Password', "xxxxx");
        this.click('a[data-signin-submit="1"]');
        this.capture('screen.png');
    //});
});

casper.run(function() {
    //finish execution script 
    this.exit();
});

I start the page, then I try to click on the sign-in button to have the modal overlay appear, but when login.png does not show it displayed.

On another note I should be able to login without that displaying, but when I do it does not redirect me to the home page, and when I manually open the main page I am not logged in.

The console logs show no errors, and I can see that the forms items are being filled in and the button is being clicked.

Am I missing something here?

Answer 1

There are a lot of problems with your script. Almost all of it isn't doing anything.

casper.evaluate() and casper.thenEvaluate() are the door into the DOM. They are sandboxed and have no access to outside functions. casper is not available inside of them and this refers to window. I suggest that you read the documentation to casper.evaluate() and page.evaluate() fully.

If you want to show possible errors, then you need to register to the resource.error, page.error, remote.message and casper.page.onResourceTimeout events (Example).

Then there is this problem that you're not waiting for anything to happen after you click something. You're immediately taking a screenshot after clicking, but you should put it into the next step.

Take this an refine it further:

var casper = require('casper').create({
    loadImages:false,
    verbose: true,
    logLevel: 'debug'
});

casper.start('https://draftkings.com');

casper.then(function() {
    this.clickLabel('Sign-in', 'a');
    //.click('a[data-lp-signin-nav="1"]');
});

casper.then(function() {
    this.capture('modal.png');
    this.sendKeys('#Username', "xxxxx");   
    this.sendKeys('#Password', "xxxxx");
    this.click('a[data-signin-submit="1"]');
});

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

casper.run();

Don't include jQuery if you're not using it and the page already has a version. It might make break the page code, because of incompatibilities between the versions.