CasperJS未显示模态叠加层

Question

我正在为DraftKings制作一个脚本。我需要做的第一件事就是登录

正如您所看到的，右上角有一个登录按钮。单击它时，将显示带有登录框的模态叠加层。

我有一个CasperJS脚本，如下所示：

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();
});

我启动页面，然后尝试点击登录按钮以显示模态叠加层，但是当login.png未显示时显示。

另一方面，我应该可以在没有显示的情况下登录，但是当我这样做时不会将我重定向到主页，当我手动打开主页面时，我没有登录。

控制台日志显示没有错误，我可以看到正在填写表单项并单击按钮。

我在这里错过了什么吗？

Answer 1

您的脚本存在很多问题。几乎所有这些都没有做任何事情。

casper.evaluate()和casper.thenEvaluate()是进入DOM的大门。它们是沙盒，无法访问外部功能。其中casper不可用，this指的是window。我建议您完整阅读文档casper.evaluate()和page.evaluate()。

如果您想显示可能的错误，则需要注册resource.error，page.error，remote.message和casper.page.onResourceTimeout事件（Example）。

然后就是这个问题，您在点击某些内容后并没有等待任何事情发生。您点击后会立即拍摄屏幕截图，但您应该将其放入下一步。

进一步改进：

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();

如果您不使用jQuery并且页面已经有版本，请不要包含jQuery。它可能会破坏页面代码，因为版本之间不兼容。