Alternative way for click()

Question

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.

link is attatched, you can try it yourself (The verify button when the 9 pics come out) — Skyliquid, May 08 '16 at 11:39
Did you try to use jQuery `$('#someControl').on('click', function(){})` — Ashraf Sada, May 08 '16 at 11:48
I do not want to use Jquery for this. and I don't think it will work anyways. — Skyliquid, May 08 '16 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, May 08 '16 at 11:54
@t.niese I already automated the whole process and it clicks on the right pics, only the last button is not working for some reason, I tried to look in the source to manually run the function that runs when clicking the button but I failed to find it. Doesnt mean that recaptcha detects that I am a bot or not makes it unsolvable. — Skyliquid, May 08 '16 at 12:00
@victory You are assuming 'recaptcha-verify-button' is a button but it is a div. And to discourage people who are trying to hack recaptcha from doing it, it must be harder to click that 'button' programatically. You can't know if there is a click event assigned initially to that button. Maybe the click event is assigned after you hover over the button. It can also pressed with space key after focusing it but for me focusing on it programatically did not work. So good luck trying to solve the puzzle. — Gokhan Kurt, May 11 '16 at 06:53
@victory I question the ethics of what you are trying to accomplish. Does it involve stealing and/or wrongful attrition? If not, then try appending event listeners to the top most parent element of the `recaptcha-verify-button` element. Then, bubble/trigger a click of all the children of that parent element. It would help if you `console.log()` the elements that get clicked to see if it is working. — Alexander Dixon, May 13 '16 at 18:04
The answer to [this question](http://stackoverflow.com/questions/26126663/jquery-click-on-a-div-button-wont-fire) seems to work for this as well. I tried this in Chrome and it worked: `simulateClick(document.getElementById('recaptcha-verify-button'));` — CS., May 18 '16 at 12:38

score 3 · Answer 1 · edited May 23 '17 at 12:07

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

Tested it with: PhantomJS 1.9.8 and 2.1.1

No. I am on the right frame, I didn't ask for pressing the checkbox button. I asked to press the Verify button. Please read my question again. — Skyliquid, May 26 '16 at 18:57
I haven't provided you with a solution for pressing the checkbox button. There's not only one issue with your code but multiple. Since you haven't shown your full code, I have assumed that you've forgotten to switch to the correct frame, but if you did it then good for you. Next time please show the full code. — Artjom B., May 26 '16 at 19:03

score -1 · Accepted Answer · answered May 14 '16 at 05:54

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

S. Ali Mihandoost · Answer 3 · 2016-05-08T12:53:11.253

-3

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>

edited May 08 '16 at 12:53

answered May 08 '16 at 12:14

S. Ali Mihandoost

2,873
3
18
24

i know the your write use the id but as i sad before some time engines make shadow element and make a copy of elements and browser see duplicate id and you run first element click not second. please test the class before you judge soon. – S. Ali Mihandoost May 08 '16 at 12:22
4

The OP wants to control a foreign page (a google reCAPTCHA). As of that the source code cannot be modified. Beside that the `document.getElementById('recaptcha-verify-button')` is able to find the correct element. – t.niese May 08 '16 at 12:24

Alternative way for click()

3 Answers3