Escolar Documentos
Profissional Documentos
Cultura Documentos
Scalable Vector Graphics (SVG) is an XML markup language for describing two -
dimensional vector graphics, both static and animated, and either declarative or
scripted. It is an open standard created by the World Wide Web Consortium.
SVG allows three types of graphic objects:
Vector graphic shapes (e.g. paths consisting of straight lines and curves, and
areas bounded by them)
Raster graphics images / digital images
Text
Graphical objects can be grouped, styled, transformed and composited into
previously rendered objects. Text can be in any XML namespace suitable to the
application, which enhances searchability and accessibility of the SVG graphics.
The feature set includes nested transformations, clipping paths, alpha masks, filter
effects, template objects and extensibility.
SVG drawings can be dynamic and interactive. The Document Object Model
(DOM) for SVG, which includes the full XML DOM, allows straightforward and
efficient vector graphics rich set of event handlers such as onmouseover and
onclick can be assigned to any SVG graphical object. Because of its compatibility
and leveraging of other Web standards, features like scripting can be done on SVG
elements and other XML elements from different namespaces simultaneously
within the same web page.
If storage space is an issue, SVG images can be saved with gzip compression, in
which case they may be called "SVGZ files". Because XML contains verbose text, it
tends to compress very well and these files can be much smaller. Often however
the original vector-file (SVG) is already smaller than the rasterised version.
Development history
SVG was developed by the W3C SVG Working Group starting in 1998, after
Macromedia and Microsoft introduced Vector Markup Language (VML) whereas
Adobe Systems and Sun Microsystems submitted a competing format known as
PGML. The working group was chaired by Chris Lilley of the W3C.
SVG 1.0 became a W3C Recommendation on 2001-09-04.
SVG 1.1 became a W3C Recommendation on 2003-01-14. The SVG 1.1
specification is modularized in order to allow subsets to be defined as profiles.
Apart from this, there is very little difference between SVG 1.1 and SVG 1.0.
SVG Tiny and SVG Basic (the Mobile SVG Profiles) became W3C
Recommendations on 2003-01-14. These are described as profiles of SVG 1.1.
SVG Tiny 1.2 and SVG Full 1.2 are both currently W3C Working Drafts. SVG
Tiny 1.2 was initially released as a profile, and later refactored to be a complete
specification, including all needed parts of SVG 1.1 and SVG 1.2. On 2006-07-
21 a new draft of the SVG Tiny 1.2 specification was released. A similarly
refactored draft for SVG 1.2 Full has not yet been released.
Features of SVG
SVG offers a palette of 16 million colors and supports ICC color profiles, sRGB,
gradients, and masking.
Zooming
Text-based files
An SVG file is text-based, not binary. It is a "human readable" format much like
HTML. Even a beginner can look at SVG source code and immediately make sense
of the descriptive content relative to the graphic representation.
SVG Pre-Conditions
To practice the examples on this chapter you first must download the Adobe SVG
Viewer. In QuickTest you must check the ActiveX and Web addin.
You can download the Adobe SVG Viewer plugin from the following address:
http://www.adobe.com/svg/viewer/install/main.html
To practice the Visual Building Search demo please download the demo from the
following address: http://www.adobe.com/svg/demos/vbs/html/frameset.html
The SVG is an ActiveX element, so, when starting QuickTest on your computer,
don’t forget to check the Web and ActiveX options, in the add-in manager.
To accomplish a fast view on the object please click the QuickTest Object Spy
button on the QuickTest toolbar or select Tools > Object Spy; then select to point
finger button and indicate one of the SVG panels.
Problematic issues
There are a few methods to retrieve information from the SVG document.
There are hundreds of properties, complex hierarchies and a lot of research
work.
This is a Java technology and QuickTest uses VBScript, is difficult to watch
some object properties and methods at run-time.
Run-time methods are good for application developers, as automation
developers, activating the run-time method can cause damage or unexpected
results to the current application session.
As automation developers we want to be as close as possible, to human users,
by simulating all user operation (mouse and keyboard).
I found that by using run-time methods to set values and change the SVG,
does not update the XML file (SVGDocument) attached to the application.
2. getWindow()
The getSVGdocument Returns the SVGDocument object for the referenced SVG
document. It means that it return the attached XML file of the SVG technology.
We don’t want to test the SVG technology; we want to test our application that
uses the SVG technology.
So the method should not be used by automation developers.
Please add the SVG ActiveX to your object repository, note that are to frames.
The left frame is the navigation frame, and the right one is the main frame.
You can change the logical names of the objects, to be more familiar with the
objects types.
Each SVG embedded in HTML has its own ECMAScript "window" (global) object
which can be accessed using getWindow() call. All functions and variables
defined on global level in SVG can be accessed through this object. This is very
similar to accessing objects in different HTML frames. Vise versa, HTML "window"
(global) object can be accessed through parent variable from SVG scripts.
Option Explicit
Dim oSvgWin, oSVG
'--- Return the ActiveX object
Set oSVG = Browser("VBSearch").Page("VBSearch").Frame("main").ActiveX("SVGDoc").Object
'--- Return the SVG window
Set oSvgWin = oSVG.getWindow()
Stop
Run the above code, and add to the Watch expressions in QuickTest debugger
the variable oSvgWin
Perform a right-click on the Navigator SVG panel and select Copy SVG as shown
above in figure
Note the follow id’s floorTxt, buildingTxt, under buttons tag b18, b17 etc.
Those represent the button objects; so how do I retrieve the button b17 object?
With Browser("VBSearch").Page("VBSearch").Frame("nav")
Set b17 =.ActiveX("SVGDoc").Object.getSVGDocument().getElementById("b17")
End With
Since that we already know the id name of the tag, use the method
getElementById from the SVG document as shown above. Run the above code,
add a break point and add the b17 object to the Quicktest Watch Expression
panel
nY = b17.getBBox().y
nW = b17.getBBox().width
nH = b17.getBBox().height
'--- Calculating the middle coordinates to perform click
nPosX = Round(nX + (nW / 2), 0)
nPosY = Round(nY + (nH / 2), 0)
'--- Using the Click method
With Browser("VBSearch").Page("VBSearch").Frame("nav")
.ActiveX("SVGDoc").Click nPosX, nPosY, micLeftBtn
End With
Retrieving Data
<g style="fill-rule:nonzero;clip-rule:nonzero;fill:#FF0000;stroke:#FFFFFF;stroke-width:0;stroke-miterlimit:4;">
<text id="floorTxt" transform="matrix(1 0 0 1 22.6074 40.1719)" startOffset="0"><tspan x="0" y="0"
style="stroke:none; font-family:'RussellSquare-Oblique'; font-size:26;">E-14</tspan></text>
<text id="buildingTxt" transform="matrix(1 0 0 1 26.1318 54.0337)" startOffset="0"><tspan x="0" y="0"
style="stroke:none; font-family:'RussellSquare-Oblique'; font-size:12;">San Jose</tspan></text>
</g>
We want to retrieve at run-time of course the values E-14 and San Jose.
Between the “g” tags there’s 2 additional children tags; text id=floorTxt and
text id=buildingTxt
With Browser("VBSearch").Page("VBSearch").Frame("nav").ActiveX("SVGDoc")
Set oTxt = .Object.getSVGDocument().getElementById("buildingTxt")
End With
In the XML tag we see that, the text San Jose is not an attribute of tspan But, is
another child of tspan, the number of tspan children is 1 as shown in Figure 15
Example1
In the following example code we click the West Tower button The expected
result is W San Jose then click the East Tower button and then the floor 13
button, the expected result now is E-13 San Jose To calculate the center
coordinates I wrote a private local Sub, it is possible to put that function is an
external vbs resource file.
With Browser("VBSearch").Page("VBSearch").Frame("nav").ActiveX("SVGDoc")
Set oBtn =.Object.getSVGDocument().getElementById("WestTower")
Set oBuildTxt = .Object.getSVGDocument().getElementById("buildingTxt")
Set oFloorTxt = .Object.getSVGDocument().getElementById("floorTxt")
GetMiddle oBtn, nPosX, nPosY
'--- Clicking the West tower button - expected result "W San Jose"
.Click nPosX, nPosY, micLeftBtn : Wait 3
sData = oBuildTxt.getFirstChild().getFirstChild().data
If StrComp(sData, "San Jose") = 0 Then
Reporter.ReportEvent micPass, "Bld. Text", sData
Else
Reporter.ReportEvent micFail, "Bld. Text", "Exp: San Jose; Act: " & sData
End If
sData = oFloorTxt.getFirstChild().getFirstChild().data
If StrComp(sData, "W") = 0 Then
Reporter.ReportEvent micPass, "Floor Text", "W"
Else
Reporter.ReportEvent micFail, "Floor Text", "Exp: 'W'; Act: " & sData
End If
'--- Clicking East Tower Floor 13 - Expected result "E-13 San Jose"
'--- Clicking building east
Set oBtn = Object.getSVGDocument().getElementById("EastTower")
GetMiddle oBtn, nPosX, nPosY
.Click nPosX, nPosY, micLeftBtn : Wait 1
'--- Clicking button foloor 13
Set oBtn =.Object.getSVGDocument().getElementById("b11")
GetMiddle oBtn, nPosX, nPosY, 0
.Click nPosX, nPosY, micLeftBtn : Wait 3
sData = oFloorTxt.getFirstChild().getFirstChild().data
If StrComp(sData, "E-11") = 0 Then
Reporter.ReportEvent micPass, "Floor Text", "E-11"
Else
Reporter.ReportEvent micFail, "Floor Text", "Exp: 'E-11'; Act: " & sData
End If
Set oFloorTxt = Nothing : Set oBuildTxt = Nothing : Set oBtn = Nothing
End With
Example2
In the following example code we click the East Tower button and then the floor
13 button, the expected result now is E-13 San Jose To calculate the center
coordinates I wrote a private local Sub, the bOffset flag = True returns the x
and y coordinates only, it is possible to put that function is an external vbs
resource file. The Program collects information about all the employees in the
current floor between room number 200 and 260, the result report will be
exported to an external MS-Excel file.
Option Explicit
Dim PosX, PosY, iLoop, nLoop, nRow, nFromRoomNo, nToRoomNo
Dim oBtn, oRoom, oInfo
Dim sData
Private Sub GetMiddle (ByVal oItem, ByRef nClickX, ByRef nClickY, ByVal bOffset)
Dim nW, nH, nX, nY
nX = oItem.getBBox.x
nY = oItem.getBBox.y
nW = oItem.getBBox.width
nH = oItem.getBBox.height
If bOffset Then
nClickX = Round(nX + (nW/2), 0)
nClickY = Round(nY + (nH/2), 0)
Else
nClickX = Round(nX,0)
nClickY = Round(nY,0)
End If
End Sub
With Browser("VBSearch").Page("VBSearch").Frame("nav").ActiveX("SVGDoc")
'--- Clicking East Tower Floor 13