This week we found another subtle browser difference as we were running MVC Ajax tests. If you have been following the Asp.Net MVC project, you will know that we are currently working on adding an Ajax story to the framework. Basically, adding helper methods so that a developer can render links that do "partial view renderings" via XmlHttpRequests. For example:
<%= Ajax.ActionLink("Ajax.ActionLink in View Insert Before", "ResultView",
new AjaxOptions {
InsertionMode = InsertionMode.InsertBefore,
UpdateTargetId = "div1",
})%>
The result will be a link that when clicked will call the "ResultView" action on the controller, and append the response to the contents of a div with id="div1".
The test team uses an internal UI automation framework to write tests, and usually what we do is write the test for IE and then run it in all other supported browsers (Safari Mac, Safari Windows, Opera, FireFox Mac, FireFox Windows), and one of these tests ran into a difference between how innerHTML is handled between different browsers: In FireFox, innerHTML is the content of the element before whitespace normalization occurs; in IE, innerHTML is the content of the element after normalization.
The following page shows the difference:
<html>
<head>
</head>
<body>
<div id="foo">
bar
</div>
<input type="button" onclick='alert("\"" + document.getElementById("foo").innerHTML + "\"");' value="What's in the Div?" />
<input type="button" onclick='document.getElementById("foo").innerHTML = "Here is some HTML inserted by javascript." + document.getElementById("foo").innerHTML;'
value="Insert some HTML" />
</body>
</html>
When you click the first button, FireFox displays:
“
bar
“
However, in IE it displays:
“bar “
Now, when you click the second button it simulates the MVC Ajax code that appends the content of the response to the div. And what you will get is, in FireFox:
“Here is some HTML inserted by javascript.
This is div1
“
And in IE:
“Here is some HTML inserted by javascript.This is div1 “
It's a small difference in terms of visual rendering, but an extra space is shown on the browser. At the end, the MVC feature crew decided that consistency was better in this case and chose to fix our script code to handle this case. This is one case where having a good functional automation story can help to catch product issues.
Thanks to Andrew Nurse, the dev in MVC that investigated this problem.
Federico Silva Armas
Asp.NET QA Team