如何在Casperjs中通过输入id填写表格

How to fill a form by id of input in Casperjs?

本文关键字：id 输入 表格 Casperjs      更新时间：2023-09-26

我正在使用Casperjs 1.1.0-beta3，并试图通过"id"选择器填写表单。我已经成功地使用了"input[name='userID']"，但使用"id"作为选择器总是失败，并出现类似以下的错误。

CasperError:填写表单时遇到错误：表单中没有与css选择器"#header my account userid"匹配的字段；没有与表单中的css选择器"#header我的帐户密码"匹配的字段

方法1效果良好。方法2、3、4均失败。我一次只尝试一种方法，并对其他方法进行评论。我还为这个问题去掉了多余的表格标签。

我发现这个关于同一主题的stackoverflow问题仍然不起作用。

有什么想法吗？

HTML

                <input id="header-my-account-userid" name="userID" class="m-my-account-userid" maxlength="80" autocomplete="off" placeholder="Email or Rewards #" type="text">
                <input id="header-my-account-password" name="password" class="m-my-account-password" maxlength="20" autocomplete="off" placeholder="Password" type="password">
                <button type="submit" name="submit" id="header-my-account-sign-in" class="analytics-click m-button-default"  title="Sign In">Sign In</button>

Casperjs脚本

    casper.then(function() {
        casper.waitForSelector('form[name=directLoginForm]', function() {
    // Method 1 Works
            this.fillSelectors("form[name=directLoginForm]", {
                'input[name=userID]' : username,
                'input[name=password]' : password
            }, true);
    // Method 2 Does not work
            this.fillSelectors("form[name=directLoginForm]", {
                'input[id="header-my-account-userid"]' : username,
                'input[id="header-my-account-password"]' : password
            }, true);
    // Method 3 Does not work
            this.fillSelectors("form[name=directLoginForm]", {
                'header-my-account-userid' : username,
                'header-my-account-password' : password
            }, true);
    // Method 4 Does not work
            this.fillSelectors("form[name=directLoginForm]", {
                '#header-my-account-userid' : username,
                '#header-my-account-password' : password
            }, true);
        });
    });

我试过了，它们都能工作（除了3，因为你的选择器无效）。我将bool设置为false以查看更改，但您不应该有"填写表单时遇到错误：没有与css选择器"#header my account userid"匹配的字段"。

这不是一个casper错误，所以，它是特定于您的情况。由于不明原因，它无法识别您的id。

this.sendKeys('input[id="header-my-account-userid"]', username);

sendKeys也可以。

等待加载表单以使用选择器填充表单。使用除waitForResource（）之外的have 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);
});

一个最小的例子表明，只有方法3不应该工作。我怀疑你通过检查下一页是否加载来检查"工作"表单。可能是因为casper找不到提交按钮。尝试明确地单击按钮。

此外，PhantomJS有时会遇到未引用属性选择器的问题。您应该更改

"form[name=directLoginForm]"

至

"form[name='directLoginForm']"

我发现当casperJS对浏览器来说太快时就会发生这种情况，而casper.wait()将解决这个问题。

这是一个例子：

// Make a test order
    casper.then(function() {
        casper.waitForSelector('#onestepcheckout-form', function() {
            this.fillSelectors('#onestepcheckout-form', {
                'input[id="billing:telephone"]': '12344534',
                'input[id="billing:postcode"]': '432323',
                'input[id="billing:city"]': 'London',
                'input[id="billing:street1"]': 'Lambada is a good music'
            }, false);
        })
        casper.wait(5000, function() {
            this.fillSelectors('#onestepcheckout-form', {
                '#sagepaydirectpro_cc_owner': 'Fizipit o Moyazoci',
                'input[id="agreement-1"]': true
            }, true);
        })
        this.test.pass('form populated');
    });
相关文章：