How to automate a signature in HTML form using SOAtest

staceyd

I have some HTML forms that are signed by using the mouse for a signature. How can I automate this signing with SOAtest? Thanks for any help!!

benken_parasoft

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

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

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