CasperJS: Как вы нажимаете на все выбранные кнопки?

Question

Я пытаюсь использовать CasperJS как веб-скребок, и есть страница с кнопками, которые будут загружать данные при нажатии. Итак, сначала я хочу щелкнуть по всем этим кнопкам и подождать, прежде чем делать запрос, чтобы захватить все необходимые данные.

Проблема в том, что с Casper, casper.thenClick(selector) кликает первый элемент. Но как вы повторяете и выбираете каждый элемент на основе селектора?

Обратите внимание, что эти кнопки не имеют идентификаторов. У всех есть универсальные селекторы классов.

Ex.

<h3> 
    <span>Text 1</span> 
    <span> 
     <button class="load-btn">show</button> 
    </span> 
</h3> 
<h3> 
    <span>Text 2</span> 
    <span> 
     <button class="load-btn">show</button> 
    </span> 
</h3> 
<h3> 
    <span>Text 3</span> 
    <span> 
     <button class="load-btn">show</button> 
    </span> 
</h3> 

И по какой-то причине casper.thenClick("h3:contains('text 1') .load-btn") не работает.

Answer 1

Я создал новую функцию 'нажмите кнопку', вы можете нажать на каждом элементе, используя for цикл:

function click(sel){var event=document.createEvent('MouseEvents');event.initMouseEvent('click',1,1,window,1,0,0,0,0,0,0,0,0,0,null);sel.dispatchEvent(event);} 
var casper = require('casper').create({ 
    verbose: true, 
    logLevel: 'debug', 
    waitTimeout: 5000, 
    userAgent: 'Mozilla/5.0 (X11; Linux x86_64; rv:49.0) Gecko/20100101 Firefox/49.0', 
    viewportSize:{width: 1600, height: 900} 
}); 
casper 
.on("error", function(msg){ this.echo("error: " + msg, "ERROR") }) 
.on("page.error", function(msg, trace){ this.echo("Page Error: " + msg, "ERROR") }) 
.on("remote.message", function(msg){ this.echo("Info: " + msg, "INFO") }) 

.start("http://domu-test-2/node/12", function(){ 
    this.evaluate(function(click){ 
     var i, x = document.querySelectorAll("button.load-btn"); 
     for(i = 0; i < x.length; i++) { 
      click(x[i]); 
     } //'click' for each element 
    }, click); 
}) 
.run(); 

С помощью этого HTML:

<h3> 
    <span>Text 1</span> 
    <span> 
     <button class="load-btn" onclick='console.log("1")'>show</button> 
    </span> 
</h3> 
<h3> 
    <span>Text 2</span> 
    <span> 
     <button class="load-btn" onclick='console.log("2")'>show</button> 
    </span> 
</h3> 
<h3> 
    <span>Text 3</span> 
    <span> 
     <button class="load-btn" onclick='console.log("3")'>show</button> 
    </span> 
</h3> 

Напечатает:

Info: 1 
Info: 2 
Info: 3 

В зеленом цвете.

Answer 2

Вы можете попробовать сбросить в DOM, используя вместо этого оценку (я предполагаю, что на этой странице есть jquery).

casper.thenEvaluate(function() { 
    $('button.load-btn').click(); 
}); 

Помните, что вам нужно WAIT на что-то появиться впоследствии.

casper.wait(2000, function() {...}); 

или с помощью одного из waitFor function