Question

我正在尝试为项目创建一个爬虫，而我正面临这个问题。我正在尝试使用CasperJS单击页面上的按钮并返回页面导航到的URL。

<product-searcher-results>  
<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="fp-card fp-card-product-result mobile-padding _md flex" role="button" tabindex="0">
            <img static-src="https://products.freedompop.com/kyo-c6725bk/kyo-c6725bk_C10.jpg" alt="Cheap Kyocera Hydro Vibe, 8GB Black (CDMA)" class="md-card-image" style="padding-top:10px" src="https://products.freedompop.com/kyo-c6725bk/kyo-c6725bk_C10.jpg">
            <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-text>
                    <span class="md-title">Kyocera Hydro Vibe, 8GB Black (CDMA)</span>
                </md-card-title-text>
            </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>
</product-searcher-results>

在主页上有一个我想要定位的30个按钮。下面是我的CasperJS脚本。

casper.start("https://staging-shop.freedompop.com/product/", function( ) {
    this.echo(this.getTitle( ) );
} );
casper.waitForSelector( '.md-card-image', function( ) {
console.log( 'AJAX results loaded' );
this.echo( this.getTitle( ) );

} )
casper.then( function( ) {    
var buttons = document.querySelectorAll("product-searcher-results button");
    while (buttons.length > 0) {
    button = buttons.pop();
    (function(button) {
        casper.then(function() {
            casper.echo("Button id is " + button);
        });
        casper.then(function() {
            this.clickLabel('Details');
        });
        casper.waitForSelector('.md-card-image', function() {
            casper.echo(casper.getCurrentUrl());
        });
        this.back();
    })(button);
}


})

最后一条语句未运行，我正试图从产品搜索结果中获取所有按钮。我试图逐个点击它们并获得currentURL。我能够使用此语句找到第一个按钮，但我需要单击页面上的所有按钮。

 if( casper.exists(  'product-searcher-results button' ) ) {
     this.echo( "found" )
 }

 this.clickLabel( 'Details' );

我不确定如何将节点列表的集合转换为casper可以迭代的内容。

使用CasperJS单击NodeLists数组

0 个答案: