Storing generated SVG during system test

GoJS
#1

We use GoJS to create a diagram by means of a GraphLinksModel.
Now we want to add the possibility to generate the svg information based on the currently shown diagram.
We call the diagram.makeSvg() function to do this, and use the outerHTML attribute of the returned svg object. So far so good.
We now would like to create a system test using phantomjs (and casperjs) to test if the generated svg is correct. But to my surprise the outerHTML attribute of the returned object stays “undefined”, and I do not see a way to get to the svg output. The other attributes of the returned object seems to be ok.

Pseudo Example code:

diagram.addNodeData({...});
var svg = diagram.makeSvg({
scale: 1
});
console.log(svg.outerHTML);
//The above statement will correctly log the svg code that got generated (during normal usage)
//But it will log "undefined" when run from system test (in headless browser)

Is there anything that I’m overlooking? Anyone has a suggestion to do this correctly?

#2

Is there a reason that you are trying to convert the SVG DOM into a string? If you are doing this for testing, wouldn’t it be easier to test the SVG by traversing that DOM to find particular elements in it?

#3

Hi Walter,

Thanks for the quick response.
I see now I was not very clear in my question.

The issue is that during system test we generate a diagram containing several GoJS nodes. This diagram is then saved as XML on our server storage, and after that we also store the svg information of that same diagram on the server storage. We use the diagram.makeSvg() function to create the svg variable. The information that we store on the server is in the outerHTML attribute of that variable.

So, it is not really to verify if the generated SVG is correct (but on the other hand: at a later stage we want to test the svg content after it has been gotten from the server storage).

#4

So that’s why you want a string. Alas, outerHTML is not part of any SVG standard. But http://stackoverflow.com/questions/12592417/outerhtml-of-an-svg-element shows an alternative that I have not tested.

#5

Walter,

Excellent comment!

I was not aware that Chrome just ‘gave’ me the option to use the outerHTML attribute. I was assuming that it was part of the spec, and therefore supported by all major browsers.
With the code example in the link provided I am now able to generate the string svg output cross browser (including phantomjs).

Many thanks for the great help!