We use selenium for Test Automation. Where ever we have mxGraph in our application, we are not able to record the test cases, as Selenium expects a unique identifier (say id or name) for an element (say vertex, edge or overlay).

Currently, mxGraph does not assign an id for the svg element created for vertex, edge or overlay.

Requirement: To use selenium for test automation, we need an identifier (say id or name) for the svg element for selecting a vertex, egde or an overlay uniquely.

The identifier can be a running number for "id" or a known convention for "name".

Also, each time the canvas is created (with same nodes), the identifier should be the same for the node.

Can you kindly provide us with a solution for the above mentioned problem or let us know if we have missed anything from our side?

asked 14 Mar '12, 23:14

mxGraph%20Forum%20-%20Subex's gravatar image

mxGraph Forum - Subex
accept rate: 0%

edited 05 Jul '12, 04:08

David's gravatar image


The following will add an ID to the shape and label SVG nodes for vertices and edges (for overlays, mxCellRenderer.initializeOverlay can be overridden accordingly):

var mxCellRendererInitializeShape = mxCellRenderer.prototype.initializeShape;
mxCellRenderer.prototype.initializeShape = function(state)
  mxCellRendererInitializeShape.apply(this, arguments);

  if (state.shape.node != null && state.cell.id != null)
    state.shape.node.setAttribute('id', 'shape-' + state.cell.id);

var mxCellRendererInitializeLabel = mxCellRenderer.prototype.initializeLabel;
mxCellRenderer.prototype.initializeLabel = function(state)
  mxCellRendererInitializeLabel.apply(this, arguments);

  if (state.text.node != null && state.cell.id != null)
    state.text.node.setAttribute('id', 'label-' + state.cell.id);

Note that initializeOverlay takes an mxCellState and and mxImageShape as the second argument.

If you need to assign an ID to a child element of a shape for a cell, the following code can be used instead:

var mxCellRendererRedrawShape = mxCellRenderer.prototype.redrawShape;
mxCellRenderer.prototype.redrawShape = function(state)
  mxCellRendererRedrawShape.apply(this, arguments);

  if (state.shape != null && state.shape.node != null && state.cell.id != null)
    var rects = state.shape.node.getElementsByTagName('rect');

    if (rects != null && rects.length > 0)
      rects[0].setAttribute('id', 'rect-' + state.cell.id);

answered 15 Mar '12, 02:06

Gaudenz's gravatar image

accept rate: 39%

edited 02 Mar '15, 04:45

Thanks a lot for your super fast response, your solution helped us resolve the issue. The approach we are taking is to put this code in a .js file and include it after mxclient.js in the htm. This will override the initializeShape and initializeLabel.

(16 Mar '12, 21:05) mxGraph Forum - Subex
Your answer
toggle preview

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here



Answers and Comments

Markdown Basics

  • *italic* or _italic_
  • **bold** or __bold__
  • link:[text](http://url.com/ "title")
  • image?![alt text](/path/img.jpg "title")
  • numbered list: 1. Foo 2. Bar
  • to add a line break simply add two spaces to where you would like the new line to be.
  • basic HTML tags are also supported



Asked: 14 Mar '12, 23:14

Seen: 3,332 times

Last updated: 02 Mar '15, 04:45

Related questions