如何在Casperjs中输入id输入的表格?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在Casperjs中输入id输入的表格?相关的知识,希望对你有一定的参考价值。

我正在使用Casperjs 1.1.0-beta3并尝试通过'id'选择器填充表单。我已成功使用“input [name ='userID']”但使用'id'作为选择器总是失败,错误类似于下面的错误。

CasperError:填充表单时遇到的错误:没有字段匹配表单中的css选择器“#header-my-account-userid”;表单中没有字段匹配css选择器“#header-my-account-password”

方法1工作正常。方法2,3,4都失败了。我只是一次尝试一种方法并评论其他方法。我还为这个问题削减了额外的表格标签。

我发现这个stackoverflow question在同一主题上它仍然无效。

有任何想法吗?

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也有效。

另一答案

等待表单加载以使用selectors填充表单。使用waitForSelector(),waitFor(),wait()等waitForResource()

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

以上是关于如何在Casperjs中输入id输入的表格?的主要内容,如果未能解决你的问题,请参考以下文章

如何使用CasperJS将选项值插入到选择标记中?

javascript CasperJs - 检查输入具有正确的占位符值

使用 casperjs/phantomjs 登录到 Amazon Developer 网页

Casperjs新页面但表格不更新

CasperJS:在代码中配置代理选项

如何使用 CasperJS 获取 innerHTML?