点击链接/按钮

SlimerJS Click a link/button

本文关键字：按钮 链接      更新时间：2023-09-26

我正在尝试使用SlimerJS点击页面上的按钮。

在SlimerJS文档中，我看到sendEvent(eventType, arg1, arg2, button, modifier)允许我们通过X和Y坐标单击给定位置。(Doc)

所以，我试着得到这些X和Y的按钮坐标如下方式:

var webpage = require("webpage").create();
function clickButton(button)
{
    var rect = button.getBoundingClientRect();
    webpage.sendEvent('click',rect.left,rect.top,'left',0);
}
webpage.open(url).then(function(){
    var button = webpage.evaluate(function(){
        signInButton = document.querySelector("#signIn");
        return signInButton;
    });
    clickButton(button);
});

这样，不会抛出错误，但按钮似乎没有被点击。这种做法有什么问题吗?有没有更好的办法?是否有一种方法来点击一个按钮或链接提供它的ID或标签名称?

这是一种相当困难的方法。(顺便说一句，你不能传递一个DOM对象，像一个按钮，从evaluate()回来，所以你最好把你的clickButton内容移动到evaluate()里面。)

简单的方法是使用CasperJS，它是围绕PhantomJS/SlimerJS的高级抽象层。你的例子变成:

var casper = require('casper').create();
casper.start(url, function(){
  this.click('#signIn');
  });
casper.run();

如果你想坚持使用PhantomJS，并且你已经在页面中加载了jQuery，那么它也相当容易:

var webpage = require("webpage").create();
webpage.open(url).then(function(){
    this.evaluate(function(){
        $("#signIn").click();
        });
    });

另一种方法是直接向DOM对象发送一个点击事件(即，而不是担心鼠标坐标):

var webpage = require("webpage").create();
webpage.open(url).then(function(){
    this.evaluate(function(){
      var evt = document.createEvent("MouseEvents");
      evt.initMouseEvent("click", true, true, window,
        0, 0, 0, 0, 0, false, false, false, false, 0, null);
      return document.querySelector('#signIn').dispatchEvent(evt);
      };
    });

为什么我认为这比处理鼠标线更好?因为使用线的鼠标点击必须在可见按钮上，这意味着你必须担心你的视口;见https://stackoverflow.com/a/24861718/841830

(最后两篇文章的来源是我自己的博客文章，我也谈到了使用d3。)
相关文章：