单击一个按钮，直到它在CasperJS中消失

Question

I have this sample of my code:

function clickOldShares() {
  console.log("Waiting for all shares");
  element = document.querySelector("#pagelet_scrolling_pager > div > div > a"); 
  return element;
 }      

  casper.thenOpen("https://www.facebook.com/shares/view?id=" + fb_objectID,function(){
    console.log("Open post with object-id");
  });

  casper.then(function(){
    element = this.evaluate(clickOldShares);
  });


  casper.wait(2000,function() {
    console.log('ELEMENT1: ' + element);
    element = this.evaluate(clickOldShares);

  });

  casper.wait(2000,function() {
    newelement = this.evaluate(clickOldShares);  
    console.log('ELEMENT2: ' + newelement);
  });

  casper.wait(2000,function() {
    newelement = this.evaluate(clickOldShares);  
    console.log('ELEMENT3: ' + newelement);

  });

I´m not understanding how can I transform this calls to clickOldShares in a loop using CasperJS because casper.wait is asynchronous. May I have some example of how to do this, please?

The page doesn't load all data in one time. It's necessary to click on the 'Older Shares' button until the data appears. And this can happen many times, depending the amount of data. So, I need to click as often as needed before capturing data.

Answer 1

First thing's first, you can't use clickOldShares for anything as it is now. casper.evaluate() provides access to the DOM, but the passed in function is sandboxed and executed in the page context. All data must be explicitly passed in and out, and this has to be primitive. DOM elements are not primitive and cannot be passed out of the page context ( this.evaluate(clickOldShares) will always return null ). You will either have to call the click code inside of the page context.

---

You can wait for an element to appear with waitForSelector . You really don't need to iterate to wait for it.

var selector = "#pagelet_scrolling_pager > div > div > a";
casper.start()
    .thenOpen(url)
    .waitForSelector(selector, null, null, 15000); // max 15 seconds
    .then(function(){
        this.capture("screen1.png");
        this.click(selector);
    })
    .then(function(){
        this.capture("screen2.png");
    })
    .run();

The third argument for waitForSelector is the callback for when the timeout is reached, but the element is not found. The fourth argument is a custom timeout. The default timeout is set to 10 seconds.

---

It seems you need to click on a certain selector until it disappears. You can't use a loop for this, because the functions are asynchronous. You will have to use recursion like this:

var selector = "#pagelet_scrolling_pager > div > div > a";
var i = 0;
function step() {
    if (this.exists(selector)) {
        this.capture("screen"+(i++)+".png");
        this.click(selector);
        this.wait(2000, step);
    } else {
        this.capture("screen_final.png");
    }
}

casper.start()
    .thenOpen(url)
    .then(step)
    .then(function(){
        // TODO: do something else
    })
    .run()