I want to draw a signature in the canvas in katalon but don't know how to do can anyone please help

Product Forums Katalon Studio
,
1

i tried to draw a signature in the canvas element using the katalon but when we run the TC the signature is not performed ..

1 Like
2

When you “tried to draw a signature”, were you using Java code or Groovy code? If you were using Java code, see if there is a Groovy equivalent. The below is Java, so see if you can find a Groovy programming site that does something equivalent, or start with the below and see what-if.

3

I don’t quite understand what you want to achieve, but let me write some…

If you want to write a text in a Canvas, you must write a JavaScrit code, inject it into the target HTML, and run it.

See HTML Canvas Text for a sample.

I don’t quite understand why katalon is involved here, but let me write some…

See [WebUI] Execute JavaScript | Katalon Docs

In Katalon Studio, you can do the following

  1. launch a web browser (Chrome, for example)
  2. navigate to URL of the target page
  3. inject a JavaScript source into the target HTML, let it run in the browser.

you may be able to see a text is drawn in the Canvas by the injected script.

4

Let me show you an example.

I made a HTML page.html that has an <canvas> element.

<!DOCTYPE html>
<html>
<body style="background-color: #eee">
    <h3>writing a text in Canvas ...</h3>
    <canvas id="myCanvas" width="360" height="100"
            style="border:1px solid #d3d3d3; background-color:white;">
        Your browser does not support the HTML canvas tag.</canvas>
</body>
</html>

When opened in a browser, the html looks like:

initial

I wrote a Test Case script TC1 as follows

import com.kms.katalon.core.testobject.ConditionType
import com.kms.katalon.core.testobject.TestObject
import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI

TestObject makeTestObject(String id, String xpath) {
	TestObject to = new TestObject(id)
	to.addProperty("xpath", ConditionType.EQUALS, xpath)
	return to
}

WebUI.openBrowser('')
WebUI.setViewPortSize(800, 400)
File html = new File("./page.html")
WebUI.navigateToUrl(html.toURI().toURL().toExternalForm())
TestObject tObj = makeTestObject("myCanvas", "//canvas[@id='myCanvas']")
WebUI.verifyElementPresent(tObj, 10)

String script = '''
	let c = document.getElementById("myCanvas");
	let ctx = c.getContext("2d");
	ctx.font = "45px Georgia, serif";
	ctx.fillText("Hello World", 30, 60);
'''
WebUI.executeJavaScript(script, [])

WebUI.delay(3)
WebUI.closeBrowser()

The TC1 injects a JavaScript code into the page open on a browser, and run the script.

Then the page turned to be as follows:

text drawn

Conclusion

This demonstrates how to draw a text in a canvas element on a HTML page using Katalon Studio.

@amitkumar.das

Is this what you want? … maybe not

How about this?

1 Like