How would I make a fake signature with behat - php

Question

Picture of tested code / Picture of working signature Hello I am using behat with the selenium driver integrated with mink and I am trying to write a test that inputs a fake signature. We use the mouse to draw the signature on the screen so I want to be able to have selenium do that for me. I tried grabbing the Id of the field and using dragTo('another element on my page'), but it only clicks inside the signature box and doesnt do anything else.
The framework I am using is laravel for php.
$field = $this->getSession()->getPage()->findById('ctlSignature);
$field->dragTo('another id on my page');
This does not work.
If I can tell the mouse to click then move 10 pixels to the right then click again that would be perfect as I can use that to draw a signature.
Thank you for the response but when I run this code I get a error,
$script = "var c = document.querySelector('#ctlSignature'); var ctx = c.getContext('2d'); ctx.moveTo(20,20); ctx.lineTo(50,50); ctx.stroke()";
$this->getSession()->evaluateScript($script);
Sends a error back Unexpected token var. If i try to use inside the string it sends another error saying unexpected token

Answer 1

The solution would be to use a javascript that you can execute with evaluateScript or executeScript.
$this->getSession()->evaluateScript($script);
The $script variable is a string that could contain a script like:
var c = document.querySelector("canvas");
var ctx = c.getContext("2d");
ctx.moveTo(20,20);
ctx.lineTo(50,50);
ctx.stroke();
If needed you can change the values of the draw by using variables.
Tested in the browser so it works, what you need to make sure is to switch to the iframe that contains the canvas, if any.
Please see bellow step with same script but slightly changed to write text:
/**
* #Then /^signature test$/
*/
public function signatureTest(){
$script = 'var c = document.querySelector("canvas"); var ctx = c.getContext("2d"); ctx.fillStyle = "black"; ctx.font = "20px Georgia"; ctx.fillText("automation user",10,90);';
$this->getSession()->executeScript($script);
}
Make sure the selector used will select the canvas element type.
Second version, try mousedown event trigger.
/**
* #Then /^signature test$/
*/
public function signatureTest(){
$function = <<<JS
(function(){
var c = document.querySelector("canvas");
event = document.createEvent('MouseEvent');
event.initEvent('mousedown', true, true);
var ctx = c.getContext("2d");
ctx.fillStyle = "black";
ctx.font = "20px Georgia";
ctx.fillText("automation user",10,90);
c.dispatchEvent(event);
})()
JS;
$this->getSession()->executeScript($function);
}