CasperJS如何提交action属性为空（无action）的表单？

我之前也踩过这个坑！当表单的action属性为空时，直接用fillSelectors的第三个参数true（自动提交）会失效——CasperJS的自动提交逻辑没法识别这种“提交到当前页面”的默认行为，所以虽然日志显示已经填充了用户名密码，但表单根本没提交出去。

给你两个靠谱的解决方案：

方法1：手动调用表单的submit()方法 #

先填充表单但不自动提交（把第三个参数改成false），然后通过evaluate在页面上下文里触发表单的原生提交事件：

var loginFormSelector = 'form[name="loginForm"]';
casper.waitForSelector(loginFormSelector, function() {
    this.echo("Login page loaded. Entering in username and password");
    // 填充表单，关闭自动提交
    this.fillSelectors(loginFormSelector, {
        'input#username': username,
        'input#password': password
    }, false);
    
    // 在页面环境中手动提交表单
    this.evaluate(function(selector) {
        document.querySelector(selector).submit();
    }, loginFormSelector);
}, function() {
    this.die("Login form not found");
});

方法2：模拟点击提交按钮 #

如果表单有可见或隐藏的提交按钮，直接模拟点击按钮也是个稳妥的办法：

var loginFormSelector = 'form[name="loginForm"]';
casper.waitForSelector(loginFormSelector, function() {
    this.echo("Login page loaded. Entering in username and password");
    this.fillSelectors(loginFormSelector, {
        'input#username': username,
        'input#password': password
    }, false);
    
    // 点击表单内的提交按钮（根据实际选择器调整）
    this.click(`${loginFormSelector} input[type="submit"]`);
}, function() {
    this.die("Login form not found");
});

为什么原来的方法不行？ #

当表单action为空时，浏览器默认会把表单提交到当前页面的URL，但CasperJS的自动提交逻辑没有处理这种“默认目标”的情况，必须手动触发提交动作才能让表单正常发送。

内容的提问来源于stack exchange，提问作者Uday Jayavaram