Question

我一直在click()通过phantomJS引擎使用page.evaluate()，它运行得很好。但有时它只是不起作用我不知道为什么。

例如，我尝试点击按钮验证relevant docs.

我试过了：

page.evaluate(function() {
  document.getElementById('recaptcha-verify-button').click();
});

和此：

rect = page.evaluate(function() {
  return document.getElementById('recaptcha-verify-button').getBoundingClientRect();
});

console.log(rect.left + " " + rect.right);
page.sendEvent('mousemove', rect.left + rect.width / 2, rect.top + rect.height / 2);
page.sendEvent('mousedown', rect.left + rect.width / 2, rect.top + rect.height / 2);
page.sendEvent('mouseup', rect.left + rect.width / 2, rect.top + rect.height / 2)

两者都不起作用，click()之后没有输出，我在chrome上尝试了相同但是它是相同的。任何想法或建议表示赞赏。

Answer 1

您可以使用any previously known way to click。您有两个与点击本身无关的问题：

元素只能在各自的文档中访问。 ReCAPTCHA始终加载在iframe中，这是您必须切换到的另一个文档。例如：page.switchToFrame(0);
Google会根据用户代理的功能（本例中为PhantomJS）提供不同的页面。它检测到PhantomJS没有启用JavaScript（由于某种原因）并提供了一个不具有#recaptcha-verify-button元素的不同形式。相反它有：
```
<div class="fbc-button-verify">
    <input type="submit" value="Verify">
</div>
```

完整脚本：

var page = require('webpage').create();

page.open('https://www.google.com/recaptcha/api2/demo', function() {
    page.render('1.png');
    page.switchToFrame(0);
    page.evaluate(function(){
        document.querySelector('.fbc-button-verify > input').click();
    });
    setTimeout(function(){
        page.render('2.png');
        phantom.exit();
    }, 3000);
});

使用：PhantomJS 1.9.8和2.1.1进行测试

Answer 2

这是模拟点击元素的功能

function simulateClick(element) {
    var event = document.createEvent("MouseEvents");
    event.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    element.dispatchEvent(event);
}

我认为这是解决问题所需要的

Answer 3

我不确定我是否理解你的问题，但有时你会遇到id的意外问题，因为id必须是uniq而某些引擎再次生成元素而且它可能会发生问题。

请更多地描述我是否在理解问题时出错

我认为你必须使用class而不是id，你可以简单地用jquery来做看看这个例子：

＆＃13;

var tests = document.querySelectorAll('.test');
for(var i=0; i<tests.length; i++){
  tests.item(i).click();
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="test" onclick="alert(1);">test 1</div>
  <div class="test" onclick="alert(2);">test 2</div>
</body>
</html>

＆＃13;

click（）的替代方式

3 个答案: