Some of the basis point which people consider that there website works well or looks good in one browser doesn’t mean it will do the same job on other browsers and/or platforms. If anyone ask me to find or identify one annoyance with web application development, then the possible answers would be the abundance of browser inconsistencies. It is important to test website pages or designs with different browsers since if we omit it, there might be chances that a part of the audience might see something totally different than what we have envisioned or it may leads to create problem for users who access the website and he/she may come across several problems like the website images may load well in few browsers but not in all browsers" or they encounters issues when page is loading, resulting in a broken interface that cannot be used etc. In the long run it best suited to develop website on the basis of the W3C recommendations and then follow up with extensive cross-browser testing, cross-platform testing. Mostly importantly we need to stay tunned about any latest version releases of any new or updated browsers and operating systems so that testing is performed on latest versions.
Some of the few points that we can consider while performing cross browser/cross platform tests can be;
1. Figure out what browsers & platform are out there - Initially we need to find or define in which browsers and platform we need to perform our test i.e. by knowing what are the major browsers out there, this should direct our efforts in terms of how much time we can focus or dedicate to ensure that our site is compatible with browser X or Y.
A list of the popular operating systems & browsers which can help to perform cross browsers check/test are;
Operating systems
- Macintosh OS X
- Windows XP
- Window Vista
- Windows 2000
- Windows 98
- Linux
Browsers for Windows XP/2000/98/Vista, Linux & Macintosh OS X
- Internet Explorer (Not available for Macintosh OS X)
- Mozilla Firefox
- Chrome
- Safari
- Netscape (Not available for Macintosh OS X)
- Opera
- Lynx browser
Note: Macintosh OS 9 supports Internet explorer 5.
2. Defining test approach - Define the test strategy/process that you want to include while performing a full browser compatibility test across different platform as well. Few points which we can include in our test or may be we can consider are;
Testing web page optimization on every update - Optimizing site pages from the beginning can help us ensure that the web page design and images supports fast page load times. On other hand, this also help to make the website development smooth and efficient. Say for example when we add a feature/item to our website like any images, content or web pages then it would be helpful if we can go for content’s optimization which in turn helps to keep the website streamlined.
Validate the markup and CSS of every individual web page - This is most important to validate the markup for all website page to make sure that it uses structural markup with no errors. This test would basically allow us to confirm where correct markup is used for the specified DOCTYPE and also may help to fix any typo error or resolve any syntax errors. Similarily we need to ensure all the CSS that are used on the site are validated and that they including each external style sheet plus all embedded and inline CSS.
Find all errors in web pages - Try to enter incorrect URL to check whether it shows appropriate error pages (i.e. 404 errors etc.) or not. Sometimes some users by mistake may type in incorrect domain name or slightly mis-spell a url. So in such case, we need to make sure that it predict domain name errors by provide suggestion to them for redirecting to proper pages like accepting common spell errors or typo's, incorrect case sensitivity or different terminology for the same items.
Test all Search features, all download functionalities that the website allows in each browsers - Test to make sure that the search functionality work properly and return correct results based on the search criteria that we have entered. On other hand, we need to also ensure that all the download or export functionality that the website allows function porperly and that it points to correct files instead of showing alert/error message like the file doesn't exist.
Check the forms and form controls - Test to verify that all the forms are submitted correctly (Make sure the forms are not submitted incase when no data or values are specified/entered in any required field, etc). Also make sure to verify all the validation error message that come up for fields are helpful and provide info within the context of the form itself.
Check the website navigation works properly acorss browsers - Say for example if the website uses some images (including sitemap images) for navigational purpose then we need to make sure that text hyperlinks should appear in their places or incase may be if website uses java appletsor flash for navigation then it should include alternative text navigation links to help ensure the accessibility. Beside this we need to perform a overall check/test to ensure all website pages mavigation work well across all supported browser versions.
Check all links including navigation and functionality of external/embedded scripts & functions - There may be possibility that some function/scripts might work well in one browser but they may not in others. So in such case, some minor tweaking may resolve cross browser or platform functionality issues. There may be case where some older browsers may not support some functions so in such scenario an alternative method would allow users to access those capabilities. Similarily we also need to make sure that all links in the website work properly across all supported browsers and that it point to correct location. There are also some link checker or link validator tools in market which can be used to perform this task.
Check web pages on different screen resolution - Few HTML editors allow users to check web pages in different screen resolution and with a wide range of color settings, for example - Web Developer Toolbar extension for Firefox. In general on an 800×600 display, a browser that has a side panel and a couple of custom toolbars across its top would display only 500×400 pixels of a web page i.e. less if the browser window isn’t maximized. So make sure you conduct testing that accounts for wide range of variability and not just the standard maximum screen resolutions.
Check web pages on a variety of displays (optional but if we can) - It would be really helpful if we check our design in variety of display like LCD monitor, CRT monitor and other alternative devices etc since you may find some page design looking good in LCD monitor but it may not be possible to read the same on a CRT monitor and may completely unusable on any alternative devices etc.
3. Identity and use tools (Inorder to save time): Try to use tools and products that already exist in market which in turn can help or ensure that the test is performed thoroughly spending less amount of time. This are few tools that we can use;
a) Spoon.net - This tool provides a good solutions for performing cross browser checks. The Spoon Browser Sandbox allows to use almost all web browsers without installing on your machine. You can run all popular browsers including Internet Explorer, Firefox, Chrome, and Opera on your machine directly from the web. To view more details click [here]
b) Browsershots - Browsershots allow to test website in any browser and operating system. This is widely used cross browser testing tool because of its features and available customizations. Basicially we can run cross browser compatibility tests with great customization options like browser type, operating system, screen size, color depth, JavaScript status and Flash enable/disable settings. Just put your website url, select compatibility test parameters and submit the test request. To view more details click [here]
c) Browsera - Browsera provides automated compatibility testing. It automatically highlights differences in the way browsers render your design, thus simplifying the testing process. It also detects JavaScript errors, and the commercial version can test pages behind subscription or log-in walls. It can also test dynamic pages. To view more details click [here]
The importance of checking the website throughout every phase of its development and long-term maintenance is very important. There are also checklists that are available which can help to test/check the website designs, content, markup/CSS, forms, navigation etc.. i.e. this checklist basically can help in describing a procedures on how and what to pointsto consider while performing cross-browser/cross-platform testing.