Using SOAtest to capture a signature on 'canvas pad' for an HTML form

staceyd

I am automating a signature in an HTML form using SOAtest. I use the mouse to click and drag the signature on a 'canvas' pad. How do I interact with a canvas pad in SOAtest? I click into the canvas pad and do the drag/drop but it is not recognized.

tony

SOAtest may not record drag-drop actions on canvas elements, but you can add a Browser Playback Tool to support your use case.

Dragdrop actions
1. Add a Browser Playback Tool (right-click the test suite, choose Add New... > Test > Browser Playback Tool)
2. From the Action drop down menu, choose Dragdrop
3. For the Value, enter how many pixels you would like the cursor to drag from the center of the element using the format X,Y such as 50,50
4. For the Element Locator, enter the criteria that uniquely identifies the canvas element. For example, you might choose Use XPath from the drop down menu and choose XPath and provide the XPath //canvas

When playing back this step, the cursor should drag and drop X,Y pixels from the center of the element.

Execute JavaScript
As an alternative, or if the above element does not work, you may use an Execute JavaScript Browser Playback Tool to emulate the dragdrop action to write on the canvas.
1. Add a Browser Playback Tool (right-click the test suite, choose Add New... > Test > Browser Playback Tool)
2. From the Action drop down menu, choose Execute JavaScript
3. For the JavaScript text field, enter the script included at the end of this post
4. Select drag() for the Method
5. For the Element Locator, enter the criteria that uniquely identifies the canvas element. For example, you might choose Use XPath from the drop down menu and choose XPath and provide the XPath //canvas

When playing back this step, the Browser Playback Tool will execute the JavaScript to emulate dragging the cursor across the element specified by the Element Locator criteria.

var startOffsetX = 0;
var startOffsetY = 0;
var endOffsetX = 100;
var endOffsetY = 100;

function trigger(type, x, y, element) {
    var ev = new MouseEvent(type, {
        view: window,
        bubbles: true,
        cancelable: true,
        clientX: x,
        clientY: y
    });
    element.dispatchEvent(ev);
}

function drag(element) {
    element.scrollIntoView(false);
    element.scrollIntoView(true);

    var rect = element.getBoundingClientRect();
    var startX = Math.floor((rect.left + rect.right)/2) + startOffsetX;
    var startY = Math.floor((rect.top + rect.bottom)/2) + startOffsetY;
    var endX = startX + endOffsetX;
    var endY = startY + endOffsetY;

    trigger("mousedown", startX, startY, element);
    move(startX, startY, endX, endY, element);
}

function move(startX, startY, endX, endY, element) {
    trigger("mousemove", startX, startY, element);

    startX += 5;
    startY += 5;
    if (startX < endX && startY < endY) {
        setTimeout(move, 10, startX, startY, endX, endY, element);
    }
}

staceyd

Thank you so very much Tony for the above info on how to draw signatures on a canvas. The script you provided worked and I am off and running and able to sign my forms. THANK YOU!!