javascript - 无法让 "this.mouse.click()"与 casperjs 一起工作

Question

我试图理解 casperjs 但为此苦苦挣扎。有人能告诉我为什么这有效吗(它导航到 http://www.w3schools.com/html/default.asp ):

var casper = require('casper').create();
var mouse = require("mouse").create(casper);

casper.start('http://www.w3schools.com/');

casper.then(function(){

  this.click('a.btn'); 
});

casper.then(function(){

   console.log('Location is now: ' + this.getCurrentUrl());
});

casper.run();

但是如果我替换

this.click('a.btn'); 

与

this.mouse.click('a.btn');

然后它停留在同一页面上。我以为这些是一样的。

Answer 1

根据使用 CasperJS 的即时测试:

casper.click() creates an event and dispatches it to the targeted event, but casper.mouse.click() does not deal with any element but just produces a mouse action at the given position.

这产生了第二个问题，即为什么这会有所作为(据我所知，w3schools.com 的 HTML 非常简洁明了，没有不可见的层，也没有花哨的 JavaScript 干预点击操作)。

原来原因很简单。默认视口(viewport)尺寸非常小:您的按钮在屏幕外，所以鼠标无法点击它!这是一个对我有用的快速测试脚本:

var casper = require('casper').create();
//var mouse = require("mouse").create(casper);

casper.options.viewportSize = {width: 1024,height: 768};

casper.start('http://www.w3schools.com/');

casper.then(function(){
  this.mouse.click('a.btn'); 
});

casper.then(function(){
   console.log('Location is now: ' + this.getCurrentUrl());
});

casper.run();

我用 PhantomJS 和 SlimerJS 进行了测试。但我只是在使用 SlimerJS 进行测试时才意识到这个问题，并且可以看到生成的 HTML。在 this.mouse.click('a.btn'); 之前放置一个 this.capture("aboutToClick.png"); 也是一个很好的故障排除方法方法。

旁白:我注释掉了 var mouse 行以表明您不需要它:casper 对象内部有一个。