In a recent project testing HTML5 web sites, we encountered a problem where we could not verify the feature of dragging a picture inside a web page with an IE browser. But it works perfectly with other browsers like Chrome and FireFox. This reminds us that testing an HTML5 based web site is a little different than testing an HTML4 based site since HTML5 has more features and different browsers support them in separate ways.

The first step to test a HTML4 based web site is to get well-defined scope of features and the testing environment, i.e. OS information and browser information. Testing HTML5 based web sites requires the same, but with an additional requirement of checking the compatibility of the target feature and the browser.

But before that, you need to verify that you are working with an HTML5 web site. There is no way to recognize an HTML5 site solely from the UI. The only way is to check the source code of the page. If the first line of the codes looks like:

HTML_Header

, without any other word, it definitely is an HTML5 web site. After this, you can start to check the compatibility as follows:

First, you need to check whether the browsers you are going to use support HTML5. Below is a matrix showing current popular browsers, like IE, Chrome, FireFox and some others on mobile, supporting HTML5 in percentages. The green background means that release of the browser supports HTML5 well. Otherwise it will be in orange background. You can use it to determine which browsers to test in different situations. For example, IE 8.0 only supports 24% of HTML5 features as shown in the first column of IE. Therefore, it is not a good choice to verify an HTML5 web site. In this case, FireFox or Chrome will be the better choices. But when you need to verify the compatibility of a web site which is designed based on HTML5, IE 8 may be a good choice to explore what will happen if the browser does not support those HTML5 features.

Testing HTML5 – Browser Support Matrix

Html_SUpport_status

Testing HTML5 – Percent feature support for different browsers

Although all browsers are announcing support HTML5, none of them fully support all the features of HTML5. To ascertain whether the browser supports the specific feature you are testing, like using a Web SQL Database, you may need to check http://html5test.com which is a web site that has a feature list per individual browser or you can check all browsers associated to a specific feature.

Browser_score

For example, sometimes you may be required to test an HTML5 web feature with several browsers, but one of them does not support the feature. For example, IE8 does not support ‘geolocation’ but IE9 does. In this case, there should be a compatibility checkpoint of verifying what happens when exercising this feature with IE8, which should be specified in the design specifications. In this way, you can know how to test a specific feature with a specific browser.

Although HTML5 brings some changes designed for improving the user experience, generally, testing HTML5 web sites is not much different from to testing an HTML4 one. As with HTML4, you need to define the test scope carefully. In addition, you have to gather the information of each feature of the web site and whether it is related to a feature that HTML4 does not support. Then, you use the above matrix to choose the browser to verify them. This surely will save your time in wondering why the feature is not behaving as expected, when you use an inappropriate browser.