How to perform browser test of HTML5 webpage

How many times have you got a message saying your browser doesn't support what you are trying to access/ view. Say, it's a video element, an audio element, animation, JPEG image etc. which is embedded within the webpage and you cannot view one/ any of these. These days you don't need to install a flash player, provided the webpage code is written in HTML5.

Also see: How to perform website resolution test

All most all of us browse content and access internet using our PC, tablet, mobile device etc. We usually have more than one browser installed in our device. If you are using PC then by default internet explorer will be the browser, still we download and install Chrome browser. Same is the case with Android device. By default there is an Android browser over which we install chrome or other browsers. Again there are multiple versions of these browsers.

Let me give a simple example. Using Google Chrome you can play music without any music player installed. Check out - How to play music without any Music Player. These are some of the features of HTML5. All browsers or all versions may not support this and this is where you need to do browser test to check if it supports webpage code written using HTML5.

Also check: Perform Website Testing to check Compatibility across Browsers

There is a website named 'HTML5test' where you can perform browser test by selecting features and immediately see (score), how well it is supported by each of the browsers and different versions as well. This website will keep all it's test suit updated each time a new version of a browser is released. Basically what this online tool does is it has a set of rules/ test cases using which it will validate against the browser/version that is selected and test each of the HTML5 features. Each new browser and it's version supports HTML5 and whenever these specifications are updated, HTML5test will also update it's test cases. The maximun score that your browser can get after performing browser test is 555 for the latest version of browser. Older versions will have lower max score. Check out their website for more details on this.

[caption id="attachment_3122" align="aligncenter" width="549"] Image: HTML5test[/caption]

If you are a user and not a developer then just try installing the latest versions of the browser to fix the issue. If it still doesn't work then you can check it yourself in the below link by selecting the feature that you want, like video element etc. and then by selecting the browser and version. Maybe you can try with different browsers as well and perform browser test on your own.

Also see: How to test a responsive website

For a UI developer, there are just too many elements that you need to look into and this tool can be really useful if you want to perform browser test. It's a good practice if your code can support multiple versions / backward compatibility and also different browsers.

Usually developers just write the code and test that in their favorite browser or the browser that they commonly use. Its important to perform browser test [Link] and make necesaary changes to your HTML5 code so that its compatibe with different browsers and its versions.

You might be interested in reading: How to get newest of the new Chrome features

If you like this post then don’t forget to share it with your friends and follow us on Social Media or subscribe to our blog via email and be the first to get latest updates.