I am working on automating the selection of an area on a Mapbox map using Selenium with Java. I’ve tried multiple approaches, including using the Action class and JavaScript, but none of them have worked so far.
Below are the methods I have attempted:
Method 1: Using 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); }
Method 2: Using Action Class
clickOnCanvasMethod2(WebElement canvas) { Actions actions = new Actions(driver); actions.moveToElement(canvas, 200, 200) .clickAndHold() .moveByOffset(100, 100) .release() .perform(); }
Method 3: Using JavaScript for Mouse Events
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); }
None of these methods seem to work as expected.
Reference URL:Mapbox Draw Example
Could someone please help me identify the issue or suggest an alternative approach to select an area on the map?
Thank you for your help!