javascript - 使用 CasperJS 登录不起作用，按钮呈灰色

Question

我正在尝试使用 CasperJS 登录此 Web 应用程序。我已成功填写表格，但由于某种原因无法登录。我尝试输入等待时间以及单击电子邮件/密码字段。当我在完成所有操作后进行屏幕截图时，我看到的是:

登录按钮呈灰色，我不知道为什么。如果有人知道以某种方式登录此网站的解决方法，这是我正在使用的代码:

var links = [], linkHolder = [], result = '<p>';
var casper = require('casper').create({   
    verbose: true, 
    logLevel: 'debug',

    pageSettings: {
         loadImages:  true,         // The WebPage instance used by Casper will
         loadPlugins: true,         // use these settings
         userAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.130 Safari/537.36'
    }
});

casper.options.viewportSize = {width: 1600, height: 950};

casper.on('remote.message', function(msg) {
    this.echo('remote message caught: ' + msg);
});

casper.start('https://app.relateiq.com/', function() {
    this.wait(5000, function() {
        casper.waitForSelector('form.sign-in-form input.ng-valid-email', function() {
            casper.evaluate(function(username, password) {
                document.querySelector('form.sign-in-form input.ng-valid-email').click();
                document.querySelector('form.sign-in-form input.ng-valid-email').value = username;
                document.querySelector('div.password-container input').click();
                document.querySelector('div.password-container input').value = password;
                this.wait(5000, function() {
                    document.querySelector('form.sign-in-form button.btn-primary').click(); 
                });
            }, 'myemail@myemail.com', 'myassociatedpassword');
        }, true);
    });

    casper.then(function(){
        this.wait(5000, function() {
            this.capture('./relateScreen.png');
            this.echo("Page Title " + this.getTitle());
        })
    })
});

如何解决这个看似禁用的登录按钮？

Answer 1

网站是为在网站提供的字段中输入信息的人们而编写的。当您使用 inputElement.value = "myValue"; 时，您正在设置输入元素的值，但这并不意味着会触发表示值发生更改的伴随事件。您必须以某种方式触发更改事件。

PhantomJS 提供 sendEvent()实际上提供 native 操作的函数。使用此功能时，网站无法区分普通用户(除了打字速度和模式)。

CasperJS 提供了一个包装器 sendKeys() :

casper.sendKeys('form.sign-in-form input.ng-valid-email', 'myemail@myemail.com');
casper.sendKeys('div.password-container input', 'myassociatedpassword');
casper.click('form.sign-in-form button.btn-primary');

现在您不再需要使用evaluate() 在页面上下文中设置这些字段。另外，您不能在页面上下文中使用 casper.wait()，因为只有 clientutils module 中的函数。暴露在页面上下文内部。