How draw signature (click, hold and move mouse) using javascript?

Question

I am writing tests for front-end part of rails application. I use selenium and capybara for testing some front-end features.

Now I need to test online signature on html page. So, I have and element with .signature css class. I know that I can run javascript in browser when tests is running:

page.evaluate_script "some js code goes here"

Question: How can I do this things with pure javascript or jQuery:

1. calculate size of .signature element
2. Then move mouse into this element
3. Then draw a signature (then click and hold mouse button and move mouse inside of element borders)

Thanks!

Answer 1

I found myself in your situation and run into your question :)

I don't know how deep do you want to test. In my case, I am using this plugin: signature_pad

I have a box with a default text when the user has not signed yet, then when he signs I show the option to delete the signature. So I check for those texts to know if there is a signature at all.

I could click on the signature pad and the app recognised the clicks!

find('#signature-box').click
find('#signature-box').click
find('#signature-box').click

(They are basic capybara finders and instructions) This worked for me. It might or might not work for you because you have a different signature system, because you want to see a real signature, but this could help someone.