使用Casper.js來點擊按鈕

Question

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

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個）。我努力的目標與類「級=」 MD-主要MD-色調-2 MD-提出MD-按鈕MD-墨脈動」按鈕。

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

... 

另一個問題可能是阿賈克斯的東西是不完全加載只是一個靜態等待或waitForResource嘗試
有時它讓SENCE激活一個Ajax。 -Container加載數據。