I have been using click() all the time through phantomJS engine on page.evaluate() and it works just fine. but sometimes it just doesn't work I don't know why.

for example I am trying to click the button verify here

I tried this :

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

and this :

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)

Both did not work, There was no output after the click() , I tried the same on chrome though and it was the same. any ideas or suggestions are appreciated.

I have been using click() all the time through phantomJS engine on page.evaluate() and it works just fine. but sometimes it just doesn't work I don't know why.

for example I am trying to click the button verify here

I tried this :

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

and this :

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)

Both did not work, There was no output after the click() , I tried the same on chrome though and it was the same. any ideas or suggestions are appreciated.

• javascript
• phantomjs

• link is attatched, you can try it yourself (The verify button when the 9 pics e out) – Skyliquid Commented May 8, 2016 at 11:39
• Did you try to use jQuery $('#someControl').on('click', function(){}) – Ashraf Sada Commented May 8, 2016 at 11:48
• I do not want to use Jquery for this. and I don't think it will work anyways. – Skyliquid Commented May 8, 2016 at 11:52
• The recaptcha is about detecting if it is solved by a bot or by human, so you will always need to expect that something unexpected happens if try controller it programmatically. The event is emitted if you do document.getElementById('recaptcha-verify-button').click(); but at some place in the code you are kicked off. I also have an assumption where and why, but I didn't investigate it closer because it is not worth to waste the time. – t.niese Commented May 8, 2016 at 11:54
• 1 The answer to this question seems to work for this as well. I tried this in Chrome and it worked: simulateClick(document.getElementById('recaptcha-verify-button')); – CS. Commented May 18, 2016 at 12:38

3 Answers 3

You can use any previously known way to click. You have two problems unrelated to the clicking itself:

• Elements can only be accessed in their respective Document. ReCAPTCHA is always loaded in an iframe, which is a different Document that you have to switch to. For example: page.switchToFrame(0);

• Google delivers different pages depending on the capabilities of the user agent (PhantomJS in this case). It detects that PhantomJS doesn't have JavaScript enables (for some reason) and delivers a different form which doesn't have a #recaptcha-verify-button element. Instead it has:

  <div class="fbc-button-verify">
      <input type="submit" value="Verify">
  </div>
  

Full script:

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

page.open('https://www.google./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);
});

Tested it with: PhantomJS 1.9.8 and 2.1.1

Here is function to simulate click on element

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);
}

I think this is what you need to solve the problem

i'm not sure i understand your problem but sometime you have unexpected problem with id because id must uniq and some engine make element again and it can make happened issue.

Please more describe if i had a mistake in understanding the issue

I think you must use class instead id and you can do it simply with out jquery
look at this example:

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

<!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>