If you’re a beginner, this post provides a comprehensive guide on how to do Cross Browser Testing.
Cross Browser Testing is a type of testing to verify if an application works across different browsers as expected and degrades effectively. It is the process to verify your application’s compatibility with different browsers.
Often, whenever I encounter an issue with a website and call technical support, they tell me to try with another browser. When it works, I end up feeling like a total idiot, since I earn my living working in the software industry.
I bet this has happened to all of you, hasn’t it? I always wonder ‘Why didn’t I think of that? As time went on, I gradually grasped the issue. As an end user, I have just found a bug because the website lacks extensive testing for cross-browser compatibility.
Table of Contents:
Techniques for Carrying Out Cross-Browser Testing
We might have noticed that some browsers do not properly display certain websites. We simply presumed the website was malfunctioning. However, as soon as you open it on a different browser, the website opens up just fine. Thus, this behavior explains the compatibility of a website with different browsers.
Recommended reading =>> Top 10 Browsers for PC
Each browser interprets the information on the website page differently. Thus, some browsers may lack the features that your website is trying to show and make your website look broken on that browser.
For example, as shown below, the errors in the signup forms are not the same on both browsers. Also, the text color, font, etc are different if you inspect.
With the advancement in technology, there are several options available for browsers, and it’s not just enough to make a website work on one browser.
Users should not be restricted from using any specific browser to access your application. Thus, it becomes necessary to test your website’s compatibility with different browsers. Some of the most commonly used browsers include Chrome, Safari, Firefox, Internet Explorer, etc.
I think you all have figured out the topic of today’s discussion – Cross Browser Testing.
As it is a general practice at STH, we are going to focus on the basics. We believe any concept will make sense when we ask the basic questions words around like- “What, why, how, who, when, where”.
Let’s do just that as we go ahead.
What is Cross Browser Testing
Cross-browser testing is simply what its name means, to test your website or application in multiple browsers and make sure that it works consistently as intended without any dependencies or compromise in quality. This applies to both web and mobile applications.
What kinds of applications undergo this? Customer-facing applications are the best choice. You might wonder “Aren’t all applications customer-facing?” Well, sure, they are. However, let us look at an example.
Application 1: An application developed for a company to internally keep track of its inventory.
Application 2: This is for the end-users to buy products from this company.
- The best idea would be to test Application 2 for browser compatibility testing since it is impossible to control what browsers/platforms/versions the end-user is going to use.
- If all computers internal to the company use Windows 8 machines with Chrome browser, then there is no need to look or test for anything else concerning Application 1.
Why is it Performed
For that matter, why is any kind of testing done? The following are some reasons:
- To know what is wrong and be able to fix it.
- Enhancing efficiency, user experience, and finally, business.
- Be informed of any pitfalls.
But if we think specifically about the intent of cross-browser testing–It is twofold. It can be a rendition or appearance of the page in different browsers. Is it the same? Is it different? If one is better than the other, etc. The other reason is the functionality and its working. (Of course!)
Who Performs This Testing
- Are you thinking, “There are a million browsers, versions, and platforms out there, which one to choose?”–This, thankfully, is a decision that is not the tester’s responsibility. The client, business analysis team, and marketing teams have a major role in this decision. Also, companies collect usage/traffic statistics to narrow down what browsers, environments, and devices are mostly in use.
- The entire project team should have an invested interest, time, money, and infrastructure to support this endeavor.
- The QA team can be involved in this process or it might be the design team who are keen on knowing how the application fares in multiple browsers.
- Whether QA or any other team performs it, the design and development teams interpret the results and make the relevant changes.
How to Perform Cross-Browser Testing
First things first- is it done manually or using a tool?
People can surely do this manually. However, there are several machines, OSs, browsers, and machines. This leads to a lot of problems, multiple investments, and challenges.
Manual Method
In this case, a business identifies the browsers that the application must support. Testers then re-run the same test cases using different browsers to observe the application’s behavior and report bugs, if any.
In this type of testing, it is not possible to cover many browsers and also, the application might not be tested on major browser versions. Also, performing cross-browser checks manually is costly and time-consuming.
Automated Method
Cross-browser testing is running the same set of test cases multiple times on different browsers. This kind of repeated task is best suited for automation. Thus, it’s more cost and time-effective to perform this testing by using tools.
Lots of tools are available in the market to make this easier.
These tools can help us with one or all of the following, depending on the tool and the licensing types:
- They provide a VPN (Virtual Private machine) using which you can connect to remote machines and check the working and rendition of your JAVA, AJAX, HTML, Flash, and other pages. Most of them are secure, but since you are submitting your information to a third party, some discretion is advised.
- Screenshots are provided for the pages, and links are submitted to how they appear in multiple browsers. This is, of course, static.
- Multiple browsers are synchronized regarding operations performed on one and the results are presented browser-wise.
- Show the rendition of the page at multiple screen resolutions.
- When encountering a problem, the team records a video or takes screenshots to transport the issue for further analysis.
- Support is available for both web and mobile apps.
- Private pages that require authentication to be accessed can also be tested.
- Local and within a private network/firewall page can be tested too.
Recommended Tools
#1) BitBar
BitBar ensures you are providing your customers with the best web and mobile experience on the latest and most popular browsers and devices with their cloud-based real device lab. Easily run manual and exploratory tests across a range of real browsers, desktop, and mobile.
Ditch the hassle and allow BitBar to reduce the burden of cross-platform testing by offloading the setup, ongoing maintenance, and browser/device upgrades.
Features:
- Automated testing across devices with unlimited users and testing.
- Test the application before it gets deployed to production.
- Execute tests on several real devices in parallel.
- Many of the popular browsers are accessible.
#2) TestGrid
TestGrid public cloud offers a combination of real devices & browsers to help users test their mobile app and website on the cloud while getting a 100% real user experience. Now engage your testing and business teams to build and execute test cases without any prerequisites of programming knowledge.
Using TestGrid’s cross-browser testing capabilities, you can ensure your end users get the best user experience. While manual cross-browser testing requires time, TestGrid’s automated cross-browser testing allows you to build tests in a scriptless manner and have them run automatically across browsers in either parallel or sequence.
Features:
- Run automated tests on a combination of hundreds of real devices & browsers.
- Support for all the latest and legacy devices available at the time you need.
- AI-based no-code automation generating selenium & appium-based code.
- Performance testing helps optimize and improve your website.
- Catch bugs and resolve them on the go with integrations like JIRA, Asana, Slack, and more.
- Integrate with your favorite CI/CD tool for continuous testing.
#3) Selenium
Selenium is well known for the automated testing of web-based applications. Just by changing the browser to be used to run the test cases, selenium makes it very easy to run the same test cases multiple times using different browsers.
#4) BrowserStack
BrowserStack is a cloud-based web and mobile testing platform that enables testing applications across on-demand browsers, operating systems, and real mobile devices.
#5) Browserling
This live interactive service provides effortless testing for web developers and web designers. There are several browsers and operating systems. Browserling provides quick access to all the most popular browsers on well-known operating systems.
Features:
- Live interactions with browsers.
- Running real browsers on real computers.
- Installation of the latest browsers.
- Safe and secure browsing.
- Flash, Java, and plugins are not required.
#6) LambdaTest
LambdaTest is a cloud-based cross-browser testing platform utilizing which user can perform automated & manual compatibility testing of their website or web app on a combination of over 2000 different browsers and operating systems.
Users can run Selenium automation tests on a scalable, secure, and reliable cloud-based Selenium grid and perform live interactive cross-browser testing of their public or locally hosted websites and web apps on the cloud.
=> Further Reading: Complete list of Cross Browser Testing tools
When to Start This Testing
The time to start the Cross-Browser test depends completely on your testing methodology and your testing timeline.
This test can be performed:
#1) As soon as possible, start testing when any one page is ready for testing.
Test that page on each browser. Once the next page is ready, verify its functionality on various browsers. While it may require additional effort, fixing errors early in the life cycle is crucial. Fixing errors is a more cost-effective approach in this scenario.
#2) Once the application is complete, start testing when the application development is complete.
This will test the application on different browsers. The cost-effectiveness of fixing the errors may not match the above case, but it will still be valuable to address them before releasing the application to users.
#3) Once the application is released this is the least favored time to perform a cross-browser test for your application. But it’s better to do it than to not do it and let the end-users have a bad experience.
After the application is released for the end-users, this testing can be performed and bugs can be fixed as a part of the change requests in the application. However, this is costly and requires multiple deployments, depending on the bug fixes.
Rigorous cross-browser testing can only be done when the testing team members who know the tools do this testing. Business users or even developers can also do high level or checking of specific browsers.
This testing involves testing the application thoroughly using different browsers. Testing thoroughly includes functional and non-functional testing of the application.
In most companies, a product team has separate teams for functional and non-functional testing. Thus, this testing needs to be performed by the team(s) who is (are) responsible for functional and non-functional testing of the application.
For this testing, a tester needs the browsers on which the application needs to be tested.
These browsers can either be provided to the tester as:
- Locally installed on the tester’s machine.
- Virtual or other different machines that a tester has access to.
- Tools that provide their browsers and their versions for testing.
- On cloud – so that multiple testers can use the browsers as and when required.
This testing is independent of the deployment environment. Thus, it can be done in dev, test, QA, or even production environments depending upon the availability of the application in each of these environments.
What to Test
- Base Functionality: Links, dialogues, menus etc.
- Graphical User Interface: Look and feel of the application.
- Response: How well the application responds to user actions.
- Performance: Loading of pages within the allowed time frame.
If your application works well on one browser, that doesn’t imply that it will work well on the other browsers too. Thus, this testing helps you to ensure that an application runs on different browsers without any errors.
To identify what breaks are on which browser and to fix the website accordingly we need to perform this testing. If a browser is not at all supported, then the users can easily be informed about it.
To Summarize “How” to Cross-Browser Test
#1) Traffic statistics help determine which browsers to test.
#2) A detailed analysis should be done on the AUT (Application under test) itself to determine if all or some parts of the application have to undergo this. All should be tested on multiple browsers after considering costs and time. A good strategy is to perform 100% testing on one browser per platform and for the other just test the most critical/widely used functionality.
#3) Once the decision of “What” to test and “Where (browsers)” is made, infrastructure decisions are to be made (do we acquire tools or perform this manually, etc), considering the costs. Viability, risks, security concerns, people to be involved, time, acceptance criteria, and issue/defect fixing schedules/processes, etc. have to be addressed.
#4) Perform testing. Regular functional testing test cases can be used when validating the efficiency of the system. For look-and-feel/rendition, test cases are not necessary.
The operation I was talking about at the beginning of this article that failed for me was an online bank transfer. I logged into my bank account, chose the amount (one lakh), and tried to perform the transfer but a servlet error was showing up no matter how many times I tried.
If the transfer operation is chosen for browser compatibility testing, this is what the test script is going to look like.
- Log in to your online bank account.
- Select the account from which the transfer is to be done.
- Enter the transfer amount: 100,000.
- Select a payee and click “Transfer”.
- Expected result: The transfer should be successful.
- This will simply run on all the browsers chosen.
Again, please note that this does not look different from a functional test case. Please check this non-functional testing article for further information on this.
#5) Report the results back to the design team if they are not involved in the testing process. Changes follow.
When is the Best Time to Do This
Any kind of testing reaps the best benefits when done early on. Therefore, the industry recommendation is to start with it as soon as the page designs are available. But it can also be performed when the site is fully integrated and functional.
If you have missed the bus on performing the cross-browser test during the design, development, and QA phases, it can still be done while the application is in production. However, this is the costliest of all and risky too.
Where is browser compatibility testing performed?
Usually, the answer to this question would be one of the Dev/QA/Production environments. But for cross-browser checking, this is not definite and irrelevant. It can be done in any one or all of them.
Conclusion
A few points to note to conclude,
- Having been a QA teacher for a while now, I can tell what’s coming next; the question is, is it functional and non-functional testing? I think it is neither and both.
- It should not be confused with Cross-Platform testing, which involves testing your application in multiple target environments like Windows, Linux, Mac, etc. However, sometimes the two have to integrate as some older browser versions might only be compatible with older versions of the platforms.
- It is also a continuous process, as software environments, browsers, and devices are evolving daily. To ensure there are no unpleasant surprises, this browser testing should be added to the repertoire of regression suites.
Each type of testing helps in improving the quality of the application and so does the cross-browser test too. Cross-browser testing ensures a consistent user experience across different browsers and operating systems, leaving a positive impression.
Fixing bugs is cost-effective during the early stages of the development lifecycle, and the same applies to the defects found as a part of this testing, too. This testing helps in improving your business which in turn results in Happy Customers as well as a Happy You!!
This is yet another testament to the concept that the QA field or software testing is a multi-dimensional field and there is something for everyone to excel in.
Please post your feedback and questions in the comments section below. We are always looking forward to hearing from you!
Useful Information
Hi,
I would like to know whether we need to create separate test cases for cross browser testing or not ?
Nice tips on cross browser testing. But I have one question that is, we are doing cross browser testing for checking the application functionality in different different browsers, so can we say that it is a functionality testing.
Something got to learn Thank you….
Need Some Help on Amazon S3 Browser ? Could Some one Post that
Hi ,
Thanks for the information.
Also, each browser has their own browser engine and they have their own concept of displaying/rendering the Web content/pages, to test these we are performing testing on different browsers. So that making sure all the functionality and CSS are correct.
Am i correct ?
@thnx swati mem…!!
@Surbhi: Often the boundaries between different types of testing are murky. One intertwines with the others. We can say that usability is also an aspect to be considered in cross browser testing…but they are not the same – in the sense that they have different targets. I hope this makes sense and also, its just my take 🙂
Hi swati,
Very nice informative article.
I just want to confirm, can we change the browser version as well?
Could you mention the possible scenarios to be perform while cross browser testing. Also provide negative scenarios for CBT.
how to make out in which browser to test when changes are made in the requirement?
i wanted to ask whether that
@swati
hello,
firstly thanks for this article.actually i have asked one question is that cross browser testing and compability testing are same or not??
because the purpose of both are same i think.
can we check the applications in the cross browser testing?
For example : In mobile we have a talkback application to read the pages similarly samething i want to use in the crossbrowser
can i use the applications in the cross browser?
@colleen : Sure. Thank you for posting your question. We will surely publish an article on that.
Please can you post the criteria to do cross browser testing
Very nice explanation
@Chetan: yes. Cross browser testing is also sometimes called Browser compatibility testing.
I have personally done cross browser testing a fair bit.
I think what’s important is whether the content renders properly e.g. will the text be bounded or will it go right across the page? This applies to all the elements including modals. Basically, will it look ‘right’?
As you probably know, different browsers and version would render the element differently.
I find requirements or story support testing cross browser but mostly ad hoc testing is required or even exploratory testing.
Hello Sir I just wanna know what is the difference Cross browser testing and GUI testing??? Really I am very much confused between these two 🙁
I went to have an interview in a media company few days ago. the lady who was doing the interview open a webpage which was multimedia rich and asked me what I would to do to test it. Could STH an article on this topic. Very appreciate 😉
Colleen
@all: Thank you for stopping by and your readership!
Great article..
But following statement needs further enhancement.
“Cross browser testing is simply what its name means- that is, to test your website or application in multiple browsers”
Cross browser testing: testing your application on different version of same browser.
i.e IE6, IE7 etc..
Multi browser testing: Testing your application on multiple browser i.e Firefox, Chrome, IE etc..
Let me know what others have to say on it..
Hi is cross browser testing a sub part of Usability testing?
Dear Swathi,
I am Manual QA-Tester in Networking Equipment manufacturing company.I want to learn HTML and Web Application testing and all the testing related with Web application and HTML,please give me some tips and guidance.
@Sharad: Yes. Perfectly put!
@sangharatna: Yes, functionality test also is an integral element in the cross browser tests
Nice tips on cross browser test.
Hi ,
Nice article.I want to know one thing that if we are testing one website on a browser ..do we have to test all the functionalities or some important ones on different browser ??
And also what is the relation of cross browser testing with load testing?
I have to do compatibility testing and i have 500 test cases then i have to test it on Browser,Operating system and Devices bot it should be done within 10 days what would be the approach for that.
Does Cross Browser Testing have any written Test cases ??
or just done Manual without Test case ?
what are Defect i may get in Cross Browser testing ?
if you have any sample Cross browser test case can you please mail the sheet to vikas.kalapur@gmail.com
Thanks for sharing this helpful stuff we need this information while doing crass browser testing