selenium can't drag Canvas elements

[YinChunGuang]

🐛 Bug Report

There are abnormalities in the functions such as click, double-click, drag and drop of Canvas used by Selenium to automate testing.
The specific reason is that Selenium cannot get the elements inside Canvas.

To Reproduce

Exercising a page's dragging and dropping functionailty used to be simple with
Seleniums's Action Builder, but sadly ,it won't work with HTML5 drag and drop .

We use the selenium function 'Actions.dragAndDrop(source,target)' to control the elements inside canvas,it dosen't work that way for selenium can't select the element .

Expected behavior

selenium can drap canvas elements

Test script or set of commands reproducing this issue

Actions actions = new Action(driver);
actions.dragAndDrop(source,target)；

The code dosen't work ,also no exception.

Environment

OS: Windows 10
Browser: Chrome
Browser version: 90.0.4430.24
Browser Driver version: 90.0.4430.24
Language Bindings version: Java 8 c

[diemol]

The only difference between the released docker 3.x images and the previous ones is the Chrome and ChromeDriver version, therefore, please submit Chrome/ChromeDriver issues to the Chromium team, either at https://bugs.chromium.org/p/chromium or https://bugs.chromium.org/p/chromedriver.

[diemol]

Apologies, I wrote my reply in the wrong issue, reopening.

[diemol]

@YinChunGuang, could you please provide a concise reproducible test case, that includes the page required to execute the scenario (a sample page or a public site).

[YinChunGuang]

test case :

@diemol

public class BaseModel {

    public static ChromeDriver driver;

    public static void main(String[] args) {
        initChromeDriver();
        driver.get("http://localhost:9528");
        WebElement source = driver.findElementByXPath("//*[@id=\"nodes\"]/li[1]");
        WebElement target = driver.findElementByXPath("//*[@id=\"canvas_1\"]");
        Actions actions = new Actions(driver);
        actions.dragAndDrop(source,target);

        driver.quit();
    }

    private static void initChromeDriver() {
        **System.setProperty("webdriver.chrome.driver", "D:\\java\\chromedriver.exe");**
        ChromeOptions options = new ChromeOptions();
        driver = new ChromeDriver(options);
        driver.manage().timeouts().implicitlyWait(10000, TimeUnit.MILLISECONDS);
        driver.manage().window().maximize();
    }
}

please set chrome driver for the test !

[diemol]

What is running in driver.get("http://localhost:9528");? We need to have access to the page.
What Selenium version are you using?

[YinChunGuang]

@diemol
code : https://github.com/YinChunGuang/selenium_test.git

[diemol]

Could you please add instructions, either here or at the README showing how to setup and execute everything?

[YinChunGuang]

#1 cd /selenium_test/vue_example
#2 npm i
#3 npm run dev
#4 open project "selenium_test\seleniumtest"
#5 update chromeDriverPath : BaseModel.DRIVER_PATH
#6 start "BaseModel.main()"

result selenium can't drag the element

@diemol