How would I make a fake signature with behat

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 sig

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);
    }