8

I'm currently working on a chrome extension and the extension has to automate some process but in the page when I click the element some action performed but when I click the element programmatically with JavaScript nothing happens.

Does anyone know how to click it like real human ?

event.isTrusted // readonly property

but how can i make it as a event.isTrusted = true?

I think the website made some prevention method with the isTrusted property of the click event!

Janaravi
  • 125
  • 1
  • 1
  • 10
  • You can't simulate it with any in-browser API. You can write/use a separate utility that communicates with your extension via [nativeMessaging API](https://developer.chrome.com/extensions/nativeMessaging) and sends a low-level mouse event using the API of the OS itself (e.g. WINAPI in Windows). – wOxxOm Mar 08 '19 at 08:21
  • @wOxxOm if you don't mind can you give me some more info sir? – Janaravi Mar 08 '19 at 10:36
  • I don't have any more info so try searching for existing solutions or implement one yourself from ground up. – wOxxOm Mar 08 '19 at 10:37
  • [This approach](https://stackoverflow.com/questions/43291181/how-to-trigger-click-on-a-button/43331339#43331339) doesn't change `isTrusted` property (since it is read only), but it might work. – Iván Nokonoko Mar 08 '19 at 14:32
  • @IvánNokonoko thanks a lot dude it works ! – Janaravi Mar 08 '19 at 16:21

1 Answers1

21

From this answer:

Try with this code; it simulates a mouse left click on the element by a quick succession of mousedown, mouseup and click events fired in the center of the button:

var simulateMouseEvent = function(element, eventName, coordX, coordY) {
  element.dispatchEvent(new MouseEvent(eventName, {
    view: window,
    bubbles: true,
    cancelable: true,
    clientX: coordX,
    clientY: coordY,
    button: 0
  }));
};

var theButton = document.querySelector('ul form button');

var box = theButton.getBoundingClientRect(),
        coordX = box.left + (box.right - box.left) / 2,
        coordY = box.top + (box.bottom - box.top) / 2;

simulateMouseEvent (theButton, "mousedown", coordX, coordY);
simulateMouseEvent (theButton, "mouseup", coordX, coordY);
simulateMouseEvent (theButton, "click", coordX, coordY);
Iván Nokonoko
  • 4,888
  • 2
  • 19
  • 27
  • 3
    Really helped in clicking an element when using Puppeteer. – Haris ur Rehman Jun 04 '21 at 20:44
  • 1
    I upvoted your answer using your code. I used this selector: `#answer-55068681 > div > div.votecell.post-layout--left > div > button.js-vote-up-btn.flex--item.s-btn.s-btn__unset.c-pointer` – Orion Apr 09 '22 at 10:21
  • In Tampermonkey I got this message `Uncaught TypeError: elemnt1.dispatchEvent is not a function` – Salem Apr 23 '22 at 22:43
  • @HarisurRehman Hello, have you been able to simulate a human scroll in Puppeteer? I'm not sure that normal events will suffice. – Lenin Zapata Dec 10 '22 at 01:44
  • @LeninZapata well scroll didn't give me any problem in the past. Traditional puppeteer code to scroll always worked for me. – Haris ur Rehman Dec 10 '22 at 20:27
  • @HarisurRehman Ok I'm going to try, I want to do everything possible to be undetectable – Lenin Zapata Dec 13 '22 at 14:50