[FIXED] Python Selenium ActionChains not working with canvas

Issue

I am trying to test a canvas element with selenium in python: in the canvas there's a custom video editor in which I can drag elements. I'm using Selenium ActionChains, but it doesn't seem to work in the canvas to drag and drop different elements. Here's a code extract:

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

driver = webdriver.Chrome()

canvas = driver.find_element(By.CSS_SELECTOR, "canvas")

# Get the position of the canvas element on the page
canvas_x, canvas_y = canvas.location["x"], canvas.location["y"]

initial_x = 0
initial_y = 180

offset_x = 0
offset_y = -180

# Perform the move and drag action
ActionChains(driver).move_to_element_with_offset(
    canvas, initial_x, initial_y
).click_and_hold().move_by_offset(offset_x, offset_y).release().perform()

In this code, I am trying to drag an element positioned at 180px down the center of the canvas and move it to the center. It looks like the canvas doesn't detect the mouse click and hold at all and I don't know how to do this.

Solution

Turns out the problem was the canvas element, having attributes of width and height different from real width and height in page, since they were responsive. Solved the issue by targeting the canvas container, a div element that had the same real width and height of the canvas instead of the canvas element itself.

Answered By - Alexxino