如何通過Casperjs中的輸入ID填寫表單？

Question

我正在使用 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 問題仍然不起作用。

有任何想法嗎？

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

        });
    });

Answer 1

好吧，我試過了，它們都有效（除了 3，因為您的選擇器無效）。 我將 bool 設置為 false 以查看更改，但您不應出現“填寫表單時遇到錯誤：沒有與 css 選擇器“#header-my-account-userid”匹配的字段。

這不是 casper 錯誤，所以它特定於您的情況。 由於不明原因，它無法識別您的 ID。

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

sendKeys 也有效。

Answer 2

一個最小的例子表明只有方法 3 不應該工作。 我懷疑您通過檢查下一頁是否加載來檢查“工作”表單。 可能是 casper 找不到提交按鈕的情況。 嘗試明確單擊按鈕。

此外，PhantomJS 有時會遇到非引用屬性選擇器的問題。 你應該改變

"form[name=directLoginForm]"

到

"form[name='directLoginForm']"

Answer 3

等待表單加載以使用選擇器填寫表單。使用除了 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);
});

Answer 4

我發現當 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');
    });