Firefox bug - JS setAttributeNS() results in wrong outerHTML
23.03.2014 TYPO3

I was writing some Selenium tests for the TYPO3 CMS backend and had hard time preparing a xpath query for selecting a page in the page tree. I was trying to select an element based on it's attribute (e.g. qtip="id=2"). Sounds simple, doesn't it?

The funny thing was that this query worked perfectly fine, when I tested it in the Chrome console, but the selenium test was failing when executing it in Firefox 28.

My first idea was that there is sth wrong in the testing framework, or PHP Selenium driver. But after checking Selenium server log I found out that the correct request is done, so it was not it.

The next try was to make selenium query the parent element and then iterate over all child elements and query their "qtip" attribute. Unfortunatelly this also failed, despite the number of children was correct.

TYPO3 Page Tree

I started wondering if it's possible to get the full HTML of the element selected by Selenium, to check what exactly Selenium sees. After quick googling, I found out that there is a really useful and easy way to do it.
You just call for 'outerHtml' attribute.

Using Menta (PHP WebDriver in general) it would be sth like this:

/** @var $element WebDriver\Element */
 echo $element->attribute('outerHTML');

The content of outerHTML attribute for few elements was really surprising:

<spanqtip="id=51" id="ext-gen140" class="t3-icon t3-icon-apps t3-icon-apps-pagetree t3-icon-pagetree-page-default">&nbsp;</span>
<span id="ext-gen141"qtip="id=51" unselectable="on">About TYPO3</span>

There is a space missing before "qtip" attribute! No wonder Selenium couldn't find it. But the question remains, where the bug is. Is TYPO3 generating wrong markup? or is it Selenium not interpreting it correctly?

I started digging into Page Tree rendering in TYPO3 to verify that the markup is correctly generated. As the Page tree is a customized ExtJS component, so the whole HTML rendering is done by ExtJS in browser, based on json data returned by PHP controller. I debugged ExtJS code to find a place where it generates broken elements, and found the line which adds qtip attribute:

this.iconNode.setAttributeNS("ext", "qtip", tip);

But isn't setAttributeNS a JavaScript build in function? I've quickly set up a really simple test html file to confirm, that this is a browser issue and not something caused by our JS. The test confirmed wrong behavior of Firefox and worked correctly in Chrome 33.

You can test it yourself by running following JS code in Firefox. Just adapt the element ID name.

var element = document.getElementById('spanid'); 
console.log(element.outerHTML); 
element.setAttributeNS('ext', 'qtip', 'attributeValue');
console.log(element.outerHTML);

So I've filled the bug report for Firefox here https://bugzilla.mozilla.org/show_bug.cgi?id=986913 and switched my selenium tests to run in Chrome. However I'm thinking about a possible workaround for this issue.

Photo by stocklogos.com