如何使用 Selenium 和 Java 在 Mapbox 中选择区域？

Question

我正在致力于使用 Selenium 和 Java 自动选择 Mapbox 地图上的区域。我尝试了多种方法，包括使用 Action 类和 JavaScript，但到目前为止都没有奏效。

以下是我尝试过的方法：

方法一：使用JavaScriptExecutor

clickOnCanvasMethod1(WebElement canvas, int x, int y) {  
    JavascriptExecutor js = (JavascriptExecutor) driver;  
    String script = "var canvas = arguments[0];"  
            + "var rect = canvas.getBoundingClientRect();"  
            + "var x = arguments[1];"  
            + "var y = arguments[2];"  
            + "canvas.dispatchEvent(new MouseEvent('click', {"  
            + "    clientX: rect.left + x,"  
            + "    clientY: rect.top + y,"  
            + "    bubbles: true"  
            + "}));";  
    js.executeScript(script, canvas, x, y);  
}

方法二：使用Action类

clickOnCanvasMethod2(WebElement canvas) {  
    Actions actions = new Actions(driver);  
    actions.moveToElement(canvas, 200, 200)  
            .clickAndHold()  
            .moveByOffset(100, 100)  
            .release()  
            .perform();  
}

方法3：使用JavaScript处理鼠标事件

clickOnCanvasMethod3(WebElement canvas) {  
    JavascriptExecutor js = (JavascriptExecutor) driver;  
    String script = "var canvas = arguments[0];"  
            + "var rect = canvas.getBoundingClientRect();"  
            + "canvas.dispatchEvent(new MouseEvent('mousedown', {"  
            + "    clientX: rect.left + 200,"  
            + "    clientY: rect.top + 200,"  
            + "    bubbles: true"  
            + "}));"  
            + "canvas.dispatchEvent(new MouseEvent('mousemove', {"  
            + "    clientX: rect.left + 300,"  
            + "    clientY: rect.top + 300,"  
            + "    bubbles: true"  
            + "}));"  
            + "canvas.dispatchEvent(new MouseEvent('mouseup', {"  
            + "    clientX: rect.left + 300,"  
            + "    clientY: rect.top + 300,"  
            + "    bubbles: true"  
            + "}));";  
    js.executeScript(script, canvas);  
}  

这些方法似乎都没有达到预期的效果。

参考网址： Mapbox 绘制示例

有人可以帮我找出问题或建议另一种方法来选择地图上的区域吗？

谢谢您的帮助！

Answer 1

这是一个使用

ActionChains()

的简单示例。

在这种情况下，您首先必须切换到包含 CANVAS 的 IFRAME。到达那里后，我们抓住 CANVAS 元素，然后开始单击。

move_to_element_with_offset()

移动到元素的中心，因此我选择 -50 和 50 作为我的 x,y 选项，形成一个正方形。第五次单击起点以闭合正方形。您可以在

print()

行放置断点来查看最终状态。

from selenium import webdriver
from selenium.webdriver.common.by import By

url = 'https://docs.mapbox.com/mapbox-gl-js/example/mapbox-gl-draw/'
driver = webdriver.Chrome()
driver.maximize_window()
driver.get(url)

driver.switch_to.frame("demo")
canvas = driver.find_element(By.CSS_SELECTOR, "canvas")
action = webdriver.ActionChains(driver)
action.move_to_element_with_offset(canvas, -50, -50).click().perform()
action.move_to_element_with_offset(canvas, -50, 50).click().perform()
action.move_to_element_with_offset(canvas, 50, 50).click().perform()
action.move_to_element_with_offset(canvas, 50, -50).click().perform()
action.move_to_element_with_offset(canvas, -50, -50).click().perform()
print("Done")