Click on generated button with Selenium+Java

Question

This is site: https://play.alienworlds.io/

I need to click on the login button. In HTML I can't find it...

<body>
   <div class="webgl-content">
      <div id="unityContainer" style="width: 1528px; height: 355px; padding: 0px; margin: 0px; border: 0px; position: relative; background: url(&quot;Build/fff2a664dc06d7254246c6bb8d5d0e21.jpg&quot;) center center / cover;">
         <canvas id="#canvas" style="width: 100%; height: 100%; cursor: default;" width="1528" height="355"></canvas>
         <div class="logo " style="display: none;"></div>
         <div class="progress Dark" style="display: none;">
            <div class="empty" style="width: 0%;"></div>
            <div class="full" style="width: 100%;"></div>
         </div>
      </div>
   </div>
   <script src="Build/061f463856577255fb5eefaf73e67127.js" type="text/javascript"></script>
   <script src="bundle.js" type="text/javascript"></script>
   <script src="hashes.js" type="text/javascript"></script>
   <script src="message_handler.js" type="text/javascript"></script>
   <script type="text/javascript">
      // Initial screen setup
      unityContainer.style.height = window.innerHeight + "px";
      unityInstance = UnityLoader.instantiate(
        "unityContainer",
        "Build/bd2a2f07495f744fece3ee93c4a56908.json",
        { onProgress: UnityProgress }
      );
      
      function Resize() {
        document.getElementById('unityContainer').style.width =
            window.innerWidth + 'px';
          document.getElementById('unityContainer').style.height =
            window.innerHeight + 'px';
      
      
         if (UnityLoader.SystemInfo.mobile) {
          if (navigator.userAgent.indexOf('Android') != -1)
          {
            if (screen.width > screen.height) {
              unityInstance.SendMessage("Canvas", "SetScreenModePanel", "false");
            }
            else
            {
              unityInstance.SendMessage("Canvas", "SetScreenModePanel", "true");
            }
          }
          else
          {
            switch (window.orientation) {
            case -90:
            case 90:
              unityInstance.SendMessage('Canvas', 'SetScreenModePanel', 'false');
              break;
            default:
              unityInstance.SendMessage('Canvas', 'SetScreenModePanel', 'true');
      
              break;
            }
          }
        } 
      }
      
      /*function Fullscreen() {
        unityInstance.SetFullscreen(1);
        if (navigator.userAgent.indexOf('Android') != -1)
          window.screen.orientation.lock('landscape');
      }*/
      
      window.addEventListener('orientationchange', Resize);
      
      // Initial execution if needed
      //Resize();
   </script>
   <script src="blob:https://play.alienworlds.io/9ffeac95-ddb2-480b-a75f-a20043229a5b" id="0941210686ad38c201cd5aecd353ebd4"></script>
</body>

vitaliis · Accepted Answer · 2021-04-24T20:42:33.400

The question is tricky. I've added the answer in Python. It uncovers the concept. If you can't, I will translate the answer to Java. The approach to such tasks is really what you need. I could click login button with ActionChains class. Please not that this is not very stable case for few reasons:

1 It depends on screen resolution, so you should set the resolution after your browser is opened

2 You will need to add waits (replace time.sleep() with Selenium's waits)

3 You cannot move your mouse while test is executing because it will break your actions

4 And the biggest problem on my opinion is that after you click the button, you will be dealing with Captcha.

This is my code which I used while debugging. You should set screen resolution because most probably your coordinates will be different. import time

from selenium import webdriver
from selenium.webdriver import ActionChains

driver = webdriver.Chrome(executable_path='/snap/bin/chromium.chromedriver')
url = "https://play.alienworlds.io/"
driver.get(url)
driver.set_window_size(1522, 754)  # setting window size to be sure what resolution you work with
time.sleep(20)
driver.implicitly_wait(25)
canvas = driver.find_element_by_css_selector("canvas[id='#canvas']")
print(driver.get_window_size()) # print to make sure window size is correct
drawing = ActionChains(driver)
print("moving by offset")
drawing.move_by_offset(450, 511)
print("clicking")
drawing.click()
print("clicked")
drawing.perform()
print("performed")
time.sleep(5)  # just to check that a new window is opened
driver.close()
driver.quit()

I could improve it, but it is not 5 minutes task. Good luck!

p.s. move_by_offset moves the cursor from the upper left corner of your screen.

Update:

I've added driver.set_window_size(1522, 754) This is the canvas resolution I get when I inspect canvas element.
I print print(driver.get_window_size()) to make sure the screen resolution is as expected.
I've tried few tools to measure browser window size and found out that My Ruler extension by Leann Pagac works the best for canvas. All other extensions, even they are more commonly used could not measure coordinates on the canvas correctly.

Also, check this post to get more details on how to work with canvas How to perform Mouse Wheel scrolling over HTML5 Canvas in Selenium?

So i just taken out of bound exception. How did you know coordinates of that button — Dilitand, Apr 24 '21 at 11:26
I installed page ruler extension for Chrome and defined button position with default resolution. You can set resolution by yourself with `driver.set_window_size(x,y)` Countdown is from upper left. — vitaliis, Apr 24 '21 at 14:21

Click on generated button with Selenium+Java

1 Answers1

Linked