Draw on a Canvas using Selenium WebDriver

Use Selenium WebDriver Advanced User Interactions API to draw and manoeuvre objects in a Canvas on a web page

This article is included in my “How to in Selenium WebDriver” series.

We can use Selenium WebDriver’s Advanced User Interactions API to drive mouse events to ‘draw’ on a canvas on a web page. In this article, I will show how to draw markers on a body chart (background image) in the WhenWise app, with the following operations:

• Drag a circle to the back neck.
• Draw a shape of “X” and move it to the right chest
• Change brush colour to blue
• Draw an arrow, rotate it and point to the left elbow
• Add text on canvas

Here it is.

Animated GIF showing the operations driven by Selenium WebDriver

1. Move the circle to the back neck.

The script:

driver.find_element(:id, "drawing-circle").click
elem = driver.find_element(:id, "service_chart")
driver.action.move_to(elem, 40, 40).click.click_and_hold.move_by(450, 60).release.perform

I will explain the above step by step.

• Draw a circle
  Click a button (which calls JS to draw a shape on the canvas), the standard Selenium way.

driver.find_element(:id, "drawing-circle").click

• Set the starting position (by the control)
  As we know, drawing is all about coordinates. Therefore, we need to set a starting point, i.e. 0,0 . Typically, we use the position of the Canvas control. The statement below stores the Canvas control to elem . Later on, we will pass this elem as the starting position.

elem = driver.find_element(:id, "service_chart")

• Move the circle
  Perform a chain of the following actions.