尝试使用 CasperJS 填写时未找到表单答案

【问题标题】：Form Not Found When Attempting to Fill Using CasperJS尝试使用 CasperJS 填写时未找到表单
【发布时间】：2015-01-24 18:15:07
【问题描述】：

我正在学习 CasperJS，并想尝试一个简单但有用的任务。我想制作一份我的煤气费账单的 pdf 副本，但我什至无法登录网站。

我是 CT 天然气公司的客户。网址是：

https://www.cngcorp.com/wps/portal/cng/home/mycng/customerWebAccess/

登录应该很简单。它应该只是我的帐号和姓氏。

我的代码是：

var start_url = "https://www.cngcorp.com/wps/portal/cng/home/mycng/customerWebAccess/"
var casper = require('casper').create()

casper.start(start_url, function() {

    this.fill('formid', {
        'input1id': '000000000000',
        'input2id': 'LastName'
    }, true);
    this.capture('cng.png');

})
casper.run()

我的“真实”代码使用网站 HTML 中显示的完整 ID，而不是“formid”或“input1ID”。我没有在上面的示例代码中包含完整的 ID，因为我不确定这些 ID 到底是什么。它们看起来像：viewns_7_LOIGMC7IA21234QWERASDF1234_:custWebLogin。一个“简单”的 ID 就这么多。也许这是从 WebSphere 产品生成的东西？

无论如何，表格没有找到。我明白了：

CasperError: Errors encountered while filling form: form not found

我也对其进行了修改，并将其放入我的start 以查看表单“看起来像”：

listItems = this.evaluate(function () {
    var nodes = document.querySelectorAll('form');
    return [].map.call(nodes, function(node) {
        return node.id;
    })
})

this.echo(listItems);

,viewns_7_LOIGMC7IA21234QWERASDF1234_:custWebLogin

我认为表单 ID 搞砸了。谁能给点建议？

【问题讨论】：

标签： javascript css-selectors casperjs

【解决方案1】：

等待表单被加载以使用选择器填充表单。使用除了 waitForResource() 之外的 waitForSelector()、waitFor()、wait() 等

casper.start('your_url_here',function(){
    this.echo(this.getTitle());
});

casper.waitForResource("your_url_here",function() {
    this.fillSelectors('#loginform', {
        'input[name="Email"]' : 'your_email',
        'input[name="Passwd"]': 'your_password'
    }, true);
});

【讨论】：

【解决方案2】：

我认为 DOM/CSS3 选择器不适用于此 ID，但它适用于 xpath：

// Create a function for selectXPath : 
var x = require('casper').selectXPath

var start_url = "https://www.cngcorp.com/wps/portal/cng/home/mycng/customerWebAccess/"
var casper = require('casper').create()

casper.start(start_url, function() {
    // Query xpath with fillSelectors
    this.fill(x('//*[@id="viewns_7_LOIGMC7IA26I00I9TQ9SLI1B12_:custWebLogin"]'), {
        'input1id': '000000000000',
        'input2id': 'LastName'
    }, true);
    this.capture('cng.png');

})
casper.run()

【讨论】：

【解决方案3】：

您需要完整的 ID 吗？因为也许这样的东西可以工作：

this.fill("form[id^='viewns_7_LOIGMC7IA21234QWERASDF1234']", {
    'input1id': '000000000000',
    'input2id': 'LastName'

或者

this.fill("form[id*='LOIGMC7IA21234QWERASDF1234']", {
    'input1id': '000000000000',
    'input2id': 'LastName'

【讨论】：