Canvas automation

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

Note:

This integration provides assistance for certain user-specific use cases, but it is not officially supported. Compatibility with all user requirements is not guaranteed.

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 illustrate two different application with 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 application 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.