使用 Selenium+Java 单击生成的按钮答案

【问题标题】：Click on generated button with Selenium+Java使用 Selenium+Java 单击生成的按钮
【发布时间】：2021-07-15 00:34:19
【问题描述】：

这是网站： https://play.alienworlds.io/

我需要点击登录按钮。在 HTML 中我找不到它...

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

【问题讨论】：

标签： java selenium selenium-webdriver canvas css-selectors

【解决方案1】：

这个问题很棘手。我已经在 Python 中添加了答案。它揭示了这个概念。如果你不能，我会把答案翻译成Java。处理此类任务的方法确实是您所需要的。我可以单击带有ActionChains 类的登录按钮。请注意，这不是很稳定的情况，原因如下：

1这取决于屏幕分辨率，所以你应该在打开浏览器后设置分辨率

2您需要添加等待（将 time.sleep() 替换为 Selenium 的等待）

3在执行测试时您不能移动鼠标，因为它会破坏您的操作

4 而我认为最大的问题是，点击按钮后，您将与 Captcha 打交道。

这是我在调试时使用的代码。您应该设置屏幕分辨率，因为您的坐标很可能会有所不同。进口时间

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()

我可以改进它，但这不是 5 分钟的任务。祝你好运！

附言move_by_offset 将光标从屏幕的左上角移动。

更新：

我添加了driver.set_window_size(1522, 754) 这是我检查画布元素时得到的画布分辨率。
我打印print(driver.get_window_size()) 以确保屏幕分辨率符合预期。
我尝试了一些测量浏览器窗口大小的工具，发现 Leann Pagac 的 My Ruler 扩展最适合画布。所有其他扩展，即使它们更常用，也无法正确测量画布上的坐标。

另外，查看这篇文章以获取有关如何使用画布How to perform Mouse Wheel scrolling over HTML5 Canvas in Selenium?的更多详细信息

【讨论】：

所以我刚刚取出了绑定异常。你怎么知道那个按钮的坐标
我为 Chrome 安装了页面标尺扩展，并使用默认分辨率定义了按钮位置。您可以通过driver.set_window_size(x,y) 自行设置分辨率，从左上角开始倒计时。
如果需要翻译成Java，我可以帮忙