使用Casper.js單擊按鈕

Question

我正在做一個從電子商務網站抓取數據的項目。 我正在嘗試使用Casper.js來實現它。 我試圖遍歷AngularMaterial按鈕的Nodelist，單擊它們將導航到新頁面/狀態-我的目標是獲取生成的URL。 我正在努力正確觸發按鈕上的click事件並進行迭代。 以下是我到目前為止所得到的。

casper.start( "http://store.com", function( ) {
    this.echo(this.getTitle( ) );
} );

casper.waitForSelector( '.md-card-image', function( ) { //Going to Home page and waiting for AJAX content to load
    console.log( 'AJAX results loaded' );
    this.echo( this.getTitle( ) );
    var product = this.evaluate( function( ) {
        return document.querySelector('html').outerHTML;

    } ) 

} )



function goToDetails( ) { //Using querySelector to target the buttons I want to nav to.
   var products = document.querySelectorAll( 'button.md-primary.md-button.md-hue-2.md-raised.md-ink-ripple' );

   return products;

}

casper.then( function( ) { //Trying to access the first button, no luck =[
details = this.evaluate( goToDetails );

this.echo( "Second test" );
console.log(details.length);  //length of 30 - for 30 buttons.
  if(casper.exists(  "button.md-primary.md-button.md-hue-2.md-raised.md-ink-ripple"  )){
      this.echo('found')
  }

  this.clickLabel('Details')

  })

});
casper.then(function(){
    casper.waitForSelector('.image-large-preview', function(){
        casper.echo(casper.getCurrentUrl()); //im getting the proper URL here.
    })
    this.back(); // going back to the home page
})

此方法單擊第一個可用按鈕，獲取其導航到的URL，然后返回主頁。 我需要找到一種方法來一個接一個地單擊所有按鈕並獲取URL。 當前正在嘗試找到定位按鈕的正確方法，這是其中一張卡的標記（頁面上30條標記）。 我正在嘗試使用“ class =“ md-primary md-hue-2 md-raised md-button md-ink-ripple”類定位按鈕。

   <div flex="33" flex-sm="50" flex-xs="50" layout="row" ng-repeat="product in resultsCtrl.products" class="layout-row flex-xs-50 flex-sm-50 flex-33" style="">
        <md-card flex="" ng-click="resultsCtrl.goToDetail( product )" ng-class="{ 'md-whiteframe-3dp': hover }" ng-mouseenter="hover = true" ng-mouseleave="hover = false" class="_md flex" role="button" tabindex="0">
            <img  class="md-card-image" style="padding-top:10px">
            <div layout="row" layout-align="end center" ng-init="condition = resultsCtrl.getCondition( product )" class="label-row layout-align-end-center layout-row">
                <div ng-show="condition.isVisible" ng-class="{ grey: condition.labelColor,  tiny: resultsCtrl.$mdMedia( 'xs' ) }" class="ui label ng-hide grey" aria-hidden="true">New</div>
            </div>
            <md-card-title>

            </md-card-title>
            <md-card-content>
                <div layout="row" layout-align="end end" class="price-sizing layout-align-end-end layout-row">
                    <div class="msrp results-msrp">

                        <span class="value price-strikethrough">
                        $249.99
                        </span>
                    </div>
                    <!----><div ng-if="product.products[0].retailPrice.amount">
                        <div>
                            <span class="ui tiny statistic">
                                <span class="value">
                                $79.99
                                </span>
                            </span>
                        </div>
                    </div><!---->
                </div>

            </md-card-content>
            <md-card-actions layout="column" class="layout-column">
                <button class="md-primary md-hue-2 md-raised md-button md-ink-ripple" type="button" ng-transclude="" ng-click="resultsCtrl.goToDetail( product )"><span>Details</span></button>
            </md-card-actions>
        </md-card>
    </div>

Answer 1

並不是很清楚問題出在哪里，但是對於單擊全部按鈕問題，這應該有所幫助：

...

var buttons = casper.getElementsAttribute("button.md-primary.md-button.md-hue-2.md-raised.md-ink-ripple", 'id');
while (buttons.length > 0) {
    button = buttons.pop();
    (function(button) {
        casper.then(function() {
            casper.echo("Button id is " + button);
        });
        casper.then(function() {
            casper.click("#" + button);
        });
        casper.waitForSelector('.selector', function() {
            casper.echo(casper.getCurrentUrl());
        });
    })(button);
}

...

另一個問題可能是Ajax內容未完全加載。 只需嘗試使用靜態wait或waitForResource。
有時需要激活Ajax容器來加載數據。