Knowledge Base Article

Home Page > Knowledge Base > Rapise

Home Page > Knowledge Base > Rapise > Rapise Web

Article Testing Web Applications that use SVG

by Adam S on Monday, July 25, 2016

One of the more challenging types of web application is that with uses embedded SVG (Scaleable Vector Graphics) in additional to HTML DOM elements. This article describes how to use Rapise to write automated testing scripts for such applications.

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:

  1. Clicking on the blue rectangle which is 50 pixels to the right and 50 pixels down from the top-left of the canvas.
  2. Simulating someone clicking and holding down the left mouse button
  3. Moving the mouse 100 pixels to the right and down
  4. 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.
Article Info
Last Updated: 7/25/2016
Article ID: KB209
# Views: 241
Powered by KronoDesk v1.1.0.15 | © Copyright Inflectra Corporation 2011-2016 | Licensed to Inflectra Corporation.