0

I'm pretty new to javascript, and I've been working on a simple userscript that clicks buttons on a webpage (that I have no control of.) I have had no problem getting and clicking buttons or divs with listeners, however, there is one button I need to click which only appears after a first button has been clicked. When I Inspect Element on this, all it gives me is an empty Canvas which surrounds the buttons. I have gone through the entire source, and cannot find these buttons anywhere! How can I access them with JavaScript? Here is an example of such a box and button in Agar.io (hey, it's the first place I could find one!)

This is the popup: Three button Popup

And this is the code associated with the inspect element:

<div data-v-9c4d2b0c="" id="openfl-content" style="transform: translate(0%, -50%) scale(0.895); cursor: default;"><canvas style="transform: translateZ(0px); width: 880px; height: 1024px; margin-left: 0px; margin-top: 0px;" width="880" height="1024"></canvas></div>

Somebody please help me find my buttons!

Rafael
  • 7,605
  • 13
  • 31
  • 46
CactUs
  • 3
  • 1
  • This can get complicated. You need to either link to the target page or provide a [mcve]. But in general you usually must (1) identify the *real* click target (often an overlaying div or second canvas), and (2) send appropriate X,Y info in the click. – Brock Adams Oct 30 '18 at 03:30
  • right on the homepage of [link](https://agar.io/#ffa), to the middle left there is a 'Free Coins' button, which pulls up a dialogue box like thing in a canvas. It seems as if all buttons which open a dialogue open it in this canvas. (or under it) – CactUs Oct 30 '18 at 03:34

1 Answers1

1

here is one button I need to click which only appears after a first button has been clicked

regarding delayed button appearanse - you can search for your final button inside the setInverval() loop:

like this

const interval = setInterval(function(){
    var $wrapper = $('.buttonWrapperOrAnythingThatContainsYourButton');
    if ($wrapper.length > 0) {
        var $btn = $wrapper.find('[that-buttons-special-attribute]');
        if ($btn.length > 0){
            $btn.trigger('click'); // or something (if your button is a clickable DOM element), if not - see the comment blow
            clearInterval(interval);
        }
    }
}, 500);

such approach is pretty simple and would work only for clickable DOM elements. If your button is hidden somewhere inside the Canvas - you would have more complex "click" simulation, please refer to this answer to find out how to click Canvas at exact position: simulate a mouse down and up on a canvas html5 page

Roman86
  • 1,990
  • 23
  • 22
  • Thank you! But how do I find out what to put instead of '.quirkyButton'? It is possible that the button does not have an id. – CactUs Oct 30 '18 at 02:54
  • so the final button you're looking/waiting for - isn't a DOM element? The idea is to wait for some reliable element or wrapper (when your button 100% appears in DOM) and then search your button in it (by some attribute or index) – Roman86 Oct 30 '18 at 03:25
  • Alright, that makes more sense. Would the Canvas work as a wrapper? – CactUs Oct 30 '18 at 03:31
  • I've updated the answer, added the link for "clicking the canvas", I hope it helps – Roman86 Nov 01 '18 at 06:05