CasperJS脚本找不到正确的按钮和onclick-event

Question

my casperjs script plays a video, then the webpage present 2 buttons either to continue viewing or to click "fill". The "fill option is what I am after but the buttons have same id, except for the desired option has an acivate-access() function:

button id="activate" class="btn btn lg" onclick="activate_access();

I tried doing this.click('#activate') and this.click('#activate.btn.btn-lg') but that just reloads a new video so I figure casper.evaluate or other approach is needed and how do I pass the correct onclick event(which is acivate_access();) to casperjs? Code:

var casper = require('casper').create({
            logLevel: "warning",
            verbose: true,
            onPageInitialized: function() {
                                            console.log("page opened");
                                            },

});
casper.userAgent('Mozilla/5.0 (Windows NT 6.0) AppleWebKit/537.36  (KHTML, like Gecko) Chrome/48.0.2564.109 Safari/537.36');
casper.viewport = {width:1200, height:800}; 
casper.start(url, function() {

    casper.wait(1000, function() {                             

                    casper.capture('look.png');
                    console.log('did screenshot');

    });


});

casper.wait(4000, function() {
console.log('clicking play');
this.click('#video');
casper.wait(37000);
casper.capture('play.png');

pres_url=this.getCurrentUrl();    

console.log(pres_url);
});

casper.evaluate(function() {
document.getElementById('activate').click();

});

casper.wait(500);
casper.run();

Answer 1

You don't have go into the page context and use the DOM API or jQuery to click this element. CasperJS' click(selector) is perfectly capable of handling this with the appropriate selector.

CSS selectors supports matching elements based on their attribute. You use

casper.click("button[onclick='activate_access();']");

for a perfect match or even

casper.click("button[onclick*='activate_access']");

for a partial match.