TestProject Forum

How to mouse hover on canvas element and also how to fetch value from canvas object [SOLVED]

Hi,

I have a scenario where I need to read values from doughnut chart which is a canvas element and verify the values. I need to fetch below values

Mouse Hover Issue
The tooltip values are inside div element, but it is displayed only when I mouse hover on the canvas element. I tried Move mouse to element and Click but it does not work
image

Fetching value from Canvas Element Issue
I tried fetching value from canvas element but it returns [Object][Object] instead of actual value
image

Could you please help me resolve this issue

Thanks,
Nirupama

Hello @nvelagapudi
You can try to use Canvas Addon - Draw On Canvas
image
It can give the ability to show the value on the canvas element.
In your second step, you need to take a Screenshot of the canvas element to get value from it.

Unfortunately, at the moment, there is no ability to extract text from an image, but I have a workaround.
Use the following website during your test to achieve this.

  1. Take a screenshot from your app.

  2. Navigate to the site Extract Text From an Image | Online Text Extractor | Brandfolder

  3. Upload the image.

  4. get text from the field

You can use my test for example:

https://app.testproject.io/#/shared-tests/with-me?s_token=QbdAS5TqKU6cwCWXsiAgGQ

You can add a validation to the get text action (if contains text)

Thank you @kfir.yosef for quick response

I tried the Draw on Canvas but it is throwing below error

Failed drawing on canvas due to: move target out of bounds
(Session info: chrome=92.0.4515.107)
Build info: version: '3.141.59', revision: 'e82be7d358', time: '2018-11-14T08:17:03'
System info: host: 'LAPTOP-2QB11PTS', ip: '127.0.0.1', os.name: 'Windows 10', os.arch: 'amd64', os.version: '10.0', java.version: '13.0.1'
Driver info: io.testproject.java.sdk.v2.drivers.WebDriver
Capabilities {acceptInsecureCerts: false, browserName: chrome, browserVersion: 92.0.4515.107, chrome: {chromedriverVersion=92.0.4..., goog:chromeOptions: {debuggerAddress=localhost:..., javascriptEnabled: true, networkConnectionEnabled: false, pageLoadStrategy: normal, platform: WINDOWS, platformName: WINDOWS, proxy: {proxyType=UNSPECIFIED, aut..., setWindowRect: true, strictFileInteractability: false, timeouts: {implicit=0.0, pageLoad=300..., unhandledPromptBehavior: dismiss and notify, webauthn:extension:credBlob: true, webauthn:extension:largeBlob: true, webauthn:virtualAuthenticators: true, webdriver.remote.sessionid: b248307dce5542911a51a38ba61...}
Session ID: b248307dce5542911a51a38ba61f8550

I tried using different co-ordinates but every time I am getting same error. Could you please help me understand how to provide the x and y offset values

Please write me via TestProject chat so we can sort out this issue