Forum Discussion
Hi,
Thanks for your response.
Yes, as you mentioned, the application provides APIs that return the coordinates of elements inside the Canvas. We are able to retrieve these coordinates using the API and use them to perform click actions.
However, before performing the click, we would like to ensure that we are interacting with the correct element. Could you please suggest how we can validate or confirm that the coordinates correspond to the intended element before clicking?
Your guidance on this would be very helpful.
That’s a thoughtful question — and you're right to be cautious about clicking within the canvas without confirming the element underneath.
Since Canvas content is not part of the DOM, TestComplete can’t directly inspect it. However, here are two approaches you can consider to validate that you're targeting the correct element:
🔹 Option 1: Visual Validation Using Image Comparison
If your application gives a visual indication (like a highlight or color change) when hovering over a Canvas element, you can simulate a hover on the coordinates and visually compare that region to a known reference.
This uses TestComplete’s built-in image comparison features, such as:
- Picture – to capture a snapshot of a region on the canvas.
- Region.Check – to compare it against a stored baseline image.
📘 Relevant Documentation:
This option is useful when you cannot programmatically confirm what's at the coordinates but you can detect visual changes.
🔹 Option 2: JavaScript Validation (If Your App Provides API)
If your app includes a JavaScript method such as getElementAt(x, y), you can call that directly from your TestComplete script using the Evaluate method.
This allows you to validate what element is at the given coordinates before clicking, using your application’s own internal logic.
📘 Relevant Documentation:
Example (conceptual):
isCorrect = page.Evaluate("return getElementAt(150, 100) === 'SaveButton';")
if isCorrect:
canvas.Click(150, 100)
This approach depends on your application exposing such APIs.
🤖 AI-assisted response
👍 Found it helpful? Click Like
✅ Issue resolved? Click Mark as Solution
- Hassan_Ballan2 months ago
Champion Level 3
Another avenue you might consider is using TestComplete’s VisualTest integration.
This feature is designed for scenarios like yours where traditional object recognition isn’t possible — such as Canvas-based UIs. Visual Testing allows you to:
- Validate that specific areas of the application look exactly as expected.
- Detect any unexpected visual changes in the rendered canvas content.
- Use full-screen or region-level comparisons (including AI-assisted visual diffs).
🔹 Note: Visual Testing is for validation only — it can serve as a reliable pre-check to confirm the correct element is displayed before interacting through other means.
For more details:
📘 VisualTest Integration – Official Docs🤖 AI-assisted response
👍 Found it helpful? Click Like
✅ Issue resolved? Click Mark as Solution