使用casperjs单击按钮时无响应

Question

For some reason whenever I attempt to click a button using CasperJS it never actually responds. I render a screenshot and it acts as if it never clicked it at all.

phantom.casperPath = './modules/';
phantom.injectJs(phantom.casperPath +'/bin/bootstrap.js');
var system = require('system');
var utils = require('utils');
var casper = require('casper').selectXPath;

var casper = require('casper').create({
    verbose: false,
    logLevel: 'debug'
});

casper.options.viewportSize = {width: 1920, height: 1080};

casper.start();
casper.thenOpen('https://mydomain.com', function(){
});

casper.then(function() {
    this.fill('form#loginPage',{
        'user_name': 'myuser',
        'user_password': 'mypassword'
    },false);
    casper.wait(100);
});
casper.then(function(){
    this.click('#sysverb_login');
    casper.wait(100);
});
casper.then(function(){
    this.capture('test.png');
    this.echo('success');
    this.exit();
});
casper.run(function() {
});

Answer 1

It is not advised to use then after a page is loaded, I quote from the docs :-

Step functions added to then() are processed in two different cases:

1. When the previous step function has been executed,
2. when the previous main HTTP request has been executed and the page loaded;

Note that there's no single definition of page loaded; is it when the DOMReady event has been triggered? Is it “all requests being finished”? Is it *all application logic being performed”? Or “all elements being rendered”? The answer always depends on the context. Hence why you're encouraged to always use the waitFor() family methods to keep explicit control on what you actually expect.

A common trick is to use waitForSelector():

try (replace SOMESELECTOR with a selector that is visible on page after the post back happens):-

casper.then(function() {
    this.fill('form#loginPage',{
        'user_name': 'myuser',
        'user_password': 'mypassword'
    },false);
});

casper.then(function(){
  this.click('#sysverb_login');
});

casper.waitForSelector("SOMESELECTOR", function(){
  this.capture('test.png');
  this.echo('success');
  this.exit();
});