Canvas automation

This article demonstrates how Katalon Studio helps users to automate Canvas applications' test cases.

Note: Please note that the use case presented here is a suggestion only and should be implemented with caution. It has not undergone quality assurance testing and is not officially supported by our platform.

A canvas is a rectangular area on an HTML page, and it is specified with the elements in HTML 5. All objects inside the canvas can not be accessible via DOM (by Xpath, CSS, or Property). Because of the limited access to DOM, users have to find the coordinates for objects before performing the actions.

Use case

We have two different application which we have used for our sample project

• Online calculator.

• Kitchen application.

Test steps

• Perform calculations (1+8=9) on the calculator.

• Open the Web application with Canvas.

• Capture the Canvas Object.

• Find the Coordinates for the Targeted Object inside the Canvas.

• Perform the action.

Automate Canvas applications test case with Katalon Studio

• Sample Git repository for this project.

• You can refer to this video demonstration of the steps below.

1. Canvas application is completely working on coordinates.
2. Find the coordinates for the object.
3. Write a test script by using object coordinates.
4. Run the test script on the browser.
5. Verify the test result.