Interaction with a canvas with selenium

Question

I participated a bit in this, but could not find anything specific. I have a canvas object that I need to interact with with Selenium. However, as we all know, canvas objects are like a closed box. I read that you can add “hooks” to the JS code that draws inside the canvas to allow Selenium to catch these hooks and work with certain things.

But I'm not sure how I can do this. Does anyone have experience or a small example that they would like to share?

Answer 1

I also studied the same problem, after some time searching, I realized that Selenium was accessing the canvas element. but it cannot access internal elements / child elements. Because selenium used the DOM model and canvas child elements that are not visible in the DOM. After examining one example mentioned here , we can interact with the canvas using coordinates. But this is absurd, in most cases we will dynamically draw elements, and how can we get the coordinates of the form in the form of percussion. If you have the coordinates of the pieces you can play with them using the link above.

Answer 2

try this, it worked for me. This will draw a circle on the canvas id.

public function testDraw() { try { $this->execute(array('script' => " var c = document.getElementById('canvas'); var ctx = c.getContext('2d'); ctx.beginPath(); ctx.arc(100, 75, 50, 0, 2 * Math.PI); ctx.stroke();", 'args' => array())); echo 'done'; sleep(10); } catch (Exception $ex) { echo 'not done'; }