我正在开展一个从电子商务网站抓取数据的项目。我正在尝试使用 Casper.js 来实现它。我正在尝试迭代 AngularMaterial 按钮的节点列表,单击它们将导航到新页面/状态 - 我的目标是获取生成的 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 张卡片)。我正在尝试使用“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>
最佳答案
不太确定问题出在哪里,但是对于“单击所有按钮”问题,这应该有所帮助:
...
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 容器来加载数据是有意义的。
关于javascript - 使用 Casper.js 单击按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41029738/