A Sample SVG Application
For this test we'll use the SVG Dragging Sample provided by Peter Collingridge. This application contains a simple SVG canvas that contains two rectangles: one blue, one green that can be dragged around the drawing area:
The objective of our test will be to drag one of the rectangles around the area using Rapise. Since the SVG canvas is visible to Rapise as a single object we'll need to use a combination of HTML library commands and Simulated Object mouse operations.
Step 1: Learning the SVG Object
The first step is to Learn the SVG canvas object. Unlike HTML objects, Rapise sees the entire SVG canvas as a single object, so the easiest thing is to open up the Web Spy (by clicking on Spy > Web Object) and view the DOM tree of the webpage:
Navigate to the <object type="image/svg+xml" /> object that matches the canvas you are interested in (you can use the right-click and Highlight option to ensure you have the correct canvas). Then double-click on the <object> tag to add it to the Learn menu of the Web Spy. Click the Learn button next to the XPATH that was recorded:
and then click Finish to end the Spy session. You now have a learned object that refers to the entire SVG canvas.
Step 2: Simulating the Mouse Operations
If you look in the Object Tree inside Rapise you will see your new Learned object together with its XPATH:
You can now use the SeSSimulated library to record mouse operations relative to that canvas. In the example above we are doing the following:
- Clicking on the blue rectangle which is 50 pixels to the right and 50 pixels down from the top-left of the canvas.
- Simulating someone clicking and holding down the left mouse button
- Moving the mouse 100 pixels to the right and down
- Releasing the left mouse button
When you then run this test:
You will see that Rapise simulates a user clicking and dragging the blue rectangle around the canvas. You can use the standard Rapise click, double-click, mouse move, etc. operations to interact with the SVG objects.
We have attached a copy of the script for your reference.