By A website starts from an idea. A mixture of hard-work, time and dedication finally gives birth to a website. But a website has never been for a single individual. It is a platform to give any kind of information to many people. Coming to the people, not all the individuals will be looking the same website on the same system on which it was developed. They have their own systems and their own browsers. It is not 1995 that only two browsers are available in the market. Times have changed and so the process of developing the website. A developer has to keep in mind about the browsers that are sailing today in the market. People are the strength of a website.
A website is worth nothing without its audience. There is no point in developing a website if no one is going to view it. So, viewers becomes an important asset. Of, course. Coming back to the people, they have different systems running on different OS and having different browsers with different version. It’s a lot to take in. Simple fact, your website should be viewed in a manner similar to how it appears on your system. This is something that a developer must keep in mind. This is known as a cross-browser compatibility issues.
In this post you will be introduced to this issue and exploring every angle of cross browser testing.
What is Cross Browser Testing?
Cross-Browser testing is a process of testing your website so that it looks similar in all the browsers. It helps you achieve a similar or consistent behaviour of your website no matter where your end user looks at the website. It is quite common that your website will topple on other browsers. Every browser renders the website differently because every browser is made by a different company. They add their own features and implement the existing features in a different way to attract the users. Every browser tries different things to attract the user and gain popularity.
Due to this feature, a browser may see one CSS class differently than what the other would see. Cross-Browser testing also help us reach a wider audience since some of the browsers provide functionalities for special audience such as blind people. We can target those aid assistive browsers to become popular in that part of the audience and increase our overall base. Cross-Browser testing is the best way to assure the quality standards of your website. A product’s quality is tested in different conditions, similarly a website quality is tested on its performance on different browsers. Cross-Browser testing requires to test your website on a range of devices, browser and operating systems. Emphasize on the word “range” as we are not talking about all the devices, browsers and OS. It is practically impossible to cover all the devices, browsers and their versions while testing your website. But, we try to achieve that target and cover as much range as possible.
Why Cross-Browser Testing?
Cross-Browser testing has become the backbone for the strategies used to make a website successful. Once a luxury, cross-browser testing is today used by almost everyone to be in the market. The fact is, your website is not something that is unique and only one existing. There are billions websites out there (1.6 billion to be exact). Out of these billions, there are a lot of chances that your website will be lost in the sea. You might argue that the idea you are proposing is new on the internet, but still, who will explore when there is nothing to view. So, this is something important. I guess. To mark your identity on the internet you need to take the most crucial step of cross-browser testing.
Following the W3C standards is a must. Nobody wants a doom like Internet Explorer suffered. So, every browser tries to be unique in its own way. As an example, Internet Explorer 6 does not support placeholder property of the image. The reason could be anything, but every browser takes a functionality in its own way and sometimes does not implement that functionality at all. So, you need to prepare your website in a way that it can be viewed correctly by the users no matter what browser they are using.
Other thing is, browser numbers have increased significantly in the last decade. Today, you have options. Options to opt any browser you want based on your interest. You like the UI of the browser? Pick it. You like the way it renders the web pages? Pick it. There could be any reason. This forces the developers to make their browser more and more unique to compete and stay in the market.
The other aspect or a reason to use cross-browser testing is because of the introduction and evolution of mobile devices into the market at such a surprising rate. Mobile has become the part and parcel of our lives today and supported by cheap internet has taken the world by storm. Mobile is so important today that a separate department is setup in the companies just to analyse the mobile users. Those days are gone when you would think and write about something that you would search on your desktop when you would go home. Even if I say to my friends that I have a personal blog, they won’t just nod. They will take their phones out and say let me see what it is. Everything has become accessible on the internet that mobile users are becoming the most important domain of the users today.
For almost everything you take out the mobile from your pocket and surf through internet. So, mobile has become a very important market for everyone. Ignoring the mobile platforms can be prove to be a major mistake for a developer. Responsiveness of the website is at its own place but since the users of mobiles are increasing, so does mobile browsers. Browser companies notice the rate of growth and are keen to improve the internet experience for these users. These browsers are developed and modified every day for the same purpose. All this makes cross-browser testing important more than ever.
If you are into business, cross-browser testing will definitely prove to be the most crucial step in taking your business forward. The funny thing is, sometimes cross-browser testing means a lot more than just seeing your website on different browsers. It has happened with me so many times that although I started testing on LambdaTest for cross-browser issues, I found so many general bugs in my website that I would have never thought. In a way, performing cross-browser testing improves your website.
Can I skip Cross Browser testing?
Since cross-browser testing is the testing of your website on various platforms, this statement is not 100% true. This is a fact that we will never cover 100% of the audience ever with our testing and ultimately through the website. With so many browsers in the market and so many versions of each browser, it is impossible to achieve that success rate. So, what do we do? We analyse.
Our website can be anything from general (NGO) to informative (Quora) to ecommerce (Amazon). The audience varies greatly on that. For example, a government examination website will not require to perform cross-browser testing. Whatever browser it is opened in, you can just mention that this website works best in Chrome 60 and above. Since it is hugely important to open the website, everyone will take the effort to install other browsers and open it. Some websites are like ecommerce. They want the customer at any cost and work according to the customer. If hypothetically a new browser called WEBSTACK gains popularity overnight, then you have to test your website on it. It works that way. So you have to analyse the customer base you are targeting and test accordingly.
Now that you have known the browsers, you need to know the versions.Not everyone is using the most latest versions.People update very slowly and the audience increases gradually. So, it is possible that even though the current version is 72, maximum percentage of people are using version 68. You need to keep this in mind. Grabbing maximum audience is the key reason to perform cross-browser testing and the other factors comes as a sub part.If you are assured, you must showcase your website across a wide range of browsers and versions. It is now time to perform cross-browser testing.
So much to test? Need Filters…
Once we have made sure that our website should not be published without proper testing, we need to move ahead to understand what we should test. As I mentioned in the first section that every browser takes the different elements of HTML and CSS differently. Maybe the shadow property, font property or styling issues. They are rendered differently on these browsers. So, even though you test your website on different browsers, you will not be adding the code to adjust these element for each and every browser and their versions. Maybe x version of a browser did not have that feature but it was implemented on x+5 version. You need to be prepared for x as well as x+5. The way you choose depends totally on you.
For implementing this, we make use of progressive enhancement. Even though we might not be able to cover the entire range of browsers and versions, we might make the basic structure to show it on different platforms. Testing needs to be done for the browsers in which our website will be possibly shown. Once we have selected those browsers, we will look on those browsers that our website is serving the purpose or not. Let me clear out. You don’t need to show your website exactly the same on these browsers. It does not matter if the shadow on an element is not shown on another browser. The meaning is still the same. You might not get the same font as you used, but it still looks good and it would still work. Go for it. But, if you are showing some offer on your website through modal and that is not shown on different browsers, you need to change the code. This is how you should select the elements you need to test on your website. It will help you serve the purpose with minimum code and minimum effort. So, do not just blindly try to make the website exactly similar in all the browsers and versions. It will just be a waste of time. The above said methods will work as filters in your process of cross-browser testing.
How can I get started with Cross Browser testing?
After clearing the air about Cross-Browser testing and getting familiar with the concept, you must obviously be thinking about how to perform cross-browser testing after all? Well, cross-browser testing performing methods are not so difficult and if you do not belong to some technical background, then maybe not so easy. This section can easily be confused by types of cross-browser testing. Types of cross-browser testing refers to the ways there are to perform cross-browser testing. A sub domain maybe. Whereas how to perform cross-browser testing is a wider domain, a generic concept. Think of this as the different engine technologies in the automobile industry like CVT or V8 etc. While types may include manual and automatic gear systems which are available in all the engine types.
Performing cross-browser testing is a heavy work, after all you are taking so many software with their versions. These need to be handled properly for a better testing and efficient use as time passes. For that we use the following methods:
Virtual Machine
Virtual machine setup can be done through tools like VM Ware. A virtual machine means a machine which does not exist as a primary machine on the system but can work as a secondary machine whenever required. I can run MacOS on Windows as a virtual machine and it would work exactly same as it would if I had installed MacOS on my system directly. We can use virtual machine and install different OS on one main operating system. The next step could be installing different browsers on that machine. This would translate to using those browsers on different operating systems. Virtual machine is used greatly to perform cross-browser testing even by online tools such as LambdaTest which will create a virtual machine once you start real-time testing on it.
Cloud Based
Cloud based cross-browser testing is done through the systems that are remotely present. You can opt for cloud based cross-browser testing if you do not have enough resources to perform the cross-browser testing on your system physically. Or you do not want to make so much effort when there are tools present on the cloud that can do the work for you. Cloud based tools take your website URL and perform cross-browser testing through the cloud on their systems. It is similar to sharing the screen through skype as you can see your website on the browser and version you wanted even though it is running on the cloud and not your system physically. There are numerous online solutions available, such as LambdaTest, that can perform fast cross-browser testing on the cloud.
Device Labs
This method is performed when a certain company or a group of people have bought the device lab to provide service for you. One such company is CrossBrowserTesting by SmartBear who have their device lab in Tennessee. These device labs perform cloud-based testing on your website either published or not published. This cannot be confused by the cloud based virtual machine method. LambdaTest performs cloud-based testing by creating the virtual machine with the required specs while SmartBear through device labs. It can be imagined as a venn diagram with some few areas in the integrations.
Types of Cross-Browser Testing
Now that we have decided that we need to test our website and finalised what we need to test, it is time to know how to test it. Cross-browser can be performed in two ways:
-
Manual Method (Live)
-
Automated Method
Manual Method
Manual method is also called as live method and it is the conventional method used for cross-browser testing. Earlier when the need for cross-browser testing arose, people had only one choice: Install each browser in their system. That was the time when the count of browsers were few and the need for cross-browser testing minimal. Today, browser number has increased and cross-browser testing has become important. Manual method is the same method. It means to install every browser on your machine (with every version of course) and test your website on them accordingly. This method is time consuming and takes a lot of effort. This is not followed today due to obvious reasons.
Automated Method
Automated method is manual method but automated. Now, by automated I do not mean that those browsers will be installed by themselves on your system. The process of testing has become automatic. This has been made possible by the online tools available today in the market such as LambdaTest. These tools let you perform test automation on your website across 3000+ browsers and OS without actually installing them. All you need is to enter the URL of your website (if published) or test it locally. Automated tools create a virtual machine on their physical system with the browser that you selected. Your website is then run on these browsers and you are able to see your website like screen sharing.
Since it has been some time that these tools have been in the market, automated method has become much more than just looking at your website. They have brought so many features to their tools that you can be confident enough that your website will land as perfect as you have made it. These features range from screenshot capturing to even testing your website at regular intervals without your manual intervention.
Building Browser Compatibility Matrix
The number of browsers and versions permutations is so huge that you can never test each of them completely. Well, theoretically you can but till the time you will complete every browser, version and operating system, new versions will popup. Yes, that much time it would take to test everything. To escape this much effort and wastage of time, you need a strategy. Strategizing your future steps will pave the path to a smooth ride towards an efficient cross-browser testing. Taking the same thing in account, a browser compatibility matrix is preferred instead of just start testing your website. Browser compatibility matrix is a list of browsers (including versions) that are the most preferred browsers for your website. For example, you know if nobody is using Internet Explorer 5 (let’s suppose) then what is the point of testing your website on that? It will just exploit your resources. So, building a browser compatibility matrix is a must for a person who wish to see his website. The point is how to build the matrix that favours your website and gives you the best results. For this, we use certain key points:
Analytics Report: If you have already published your website and getting certain satisfactory number of views, then you can see the google analytics reports for your website. This report will tell you from where you are getting the maximum views, what browser, what OS etc. You can even get the geographical report and the website through which you are getting these views. You can analyse this and create a list of browsers as most important since they are interested in your website.
Similar Websites Data Report: If your website is not yet published or is recently published, Google Analytics report might not help you achieving the matrix you desire. For this, you can analyse the data of different websites which are similar to yours. For example if you have a story-telling website, then the similar websites where stories are published might help you.
You can go for any analytics tools such as SE Ranking to analyse your website. Whatever you choose, there are a few parameters that you should keep in mind. The analysis should be done on platform, desktop browser usage and mobile browser usage. Through this analysis you will get to know which operating system is fetching you the most views, which platform on that operating system and which browser on that platform. Once all this is done, you can build a list of browsers (with adding few on your own) and perform testing on the same.
Do’s and Dont’s of Cross-Browser Testing
Cross-browser testing looks like a very smooth process. You must be thinking that you start with the audience, build browser-matrix, choose a method, an online tool and then start testing it. But it is not so easy. While performing cross-browser testing, there are many issues which are faced by the developers in order to perform smooth testing. Now, one might say that these issues arise because of lack of expertise or not following good practicing while coding the website. Actually, these both things are true. Issues in cross-browser testing appears mainly because of not following the standards intentionally or unintentionally. If you are working according to the standards, issues might not diminish but will surely come to a very low margin. Try to code keeping in mind these issues that are discussed below:
Doctype
Doctype standard has been made compulsory since the introduction of HTML5. DOCTYPE or Document Type has come into picture to specify to the browser that what the browser is about. While starting the HTML code into the document, the first line is normally specified as <!DOCTYPE HTML>. Since it has been made as a standard, it raises an error whenever the parser does not find this on the first line. A good practice includes mentioning this in the first line of the document.
Missing CSS Standards
CSS standards are fixed by W3C. These standards are now strictly necessary to follow. The thing is, you can get the result even after not following correct standards. Due to this, you might think that you are designing the layout correctly. Sometimes, it is fine to not strictly go with the standards, but sometimes it is not. While performing cross-browser testing, you might face these errors on different browsers.
Working Against Browser Standards
Throughout this post I have mentioned that every browser renders the HTML and CSS differently. They work according to their own standards keeping in mind W3C standards. So, one thing in Google Chrome might work as some other thing in Internet Explorer and some other thing in Opera. These things need to be mentioned beforehand in the HTML document to let the browser grab the code which is written for it. Sometimes there are few things that are not even implemented in other browsers. Progressive enhancement must be kept in mind when such cases arises.
Outdated browser detection
Due to development of so many browsers with so many versions, it is impossible to project your website perfectly on each of them. You might go for progressive enhancement but some of them will still be left. The reason is simple. They are too outdated as compared to today’s technology. The feature that are compulsory for your website might not have come into picture during the tenure of those browsers. So, the only option is, leave them. But, we cannot leave them as ignoring them. The reason being even though they are outdated, they might be used by many people. Therefore, we need to detect the browser and if it is outdated according to our website, mention a note that this browser is outdated and need an upgradation. It is a good practice if you could even mention the exact minimum browser version which will support the website.
Responsiveness
One of the most important aspect and demand of today’s website is its responsiveness. A responsive website adjusts to the different aspect ratio and screen sizes accordingly. You might have seen some of the website not able to render properly when opened on a mobile platform (which by the way has a huge audience base). Now with so many gadgets with so different screen sizes, responsiveness becomes a huge responsibility of the driver. The developers should always keep in mind the responsiveness property of the website.
Tool Framework For Cross-Browser Testing
Cross-Browser testing requires frameworks that can automate the use cases and run scripts to imitate the browser’s behaviour. This is not required for those who are using online tools such as LambdaTest to test their websites. Tool framework’s knowledge requires pre-requisites from the user such as test executions and browser automation basics in a clear form. In this post we will discuss a few tools that are used majorly for cross-browser testing today:
Selenium
Selenium is an open source tool for performing automation testing on the web applications. The main power of Selenium comes from its open source nature and the fact that you have the option to use so many programming languages like Java, Python, JavaScript etc. Are you wondering about the browser on which you can perform the testing? Mozilla? Firefox? Chrome? You name it, and you’ve got it. You can use Selenium on major browsers and can integrate with popular tools such as TestNG and Junit to generate the reports. You just need the knowledge of programming languages to perform testing on the web application using Selenium.
Appium
Like Selenium, Appium is also used for automation testing but on the mobile platform. Although Appium can be used for testing the applications developed for the mobile, it can be used for web applications too. Appium can be used cross-platform i.e. on different platforms using the same API. You can test your mobile web apps and hybrid applications to perform cross-browser testing on the mobile. Not wrapped in any mobile device operating system dependency, Appium supports all the languages which are supported in Selenium like Java, C#, PHP, Ruby, Python etc.
Capybara
Capybara is a software written in Ruby for web application testing. This software imitates an actual user and can even fill the forms to perform perfect testing for the websites. Capybara works as a middleman between you and the actual web driver you are using. This web driver should be supported by Capybara though and the great news is, Selenium is supported by this software.
Watir
Watir is another web application testing framework that uses Selenium as tests on a website. The most amazing thing is that it can test the browser in a way that a human would do. It would be much faster though, of course. Watir makes use of Ruby libraries to perform these tests. This automated process makes this testing process very smooth. This web driver is compatible with W3C specs and since it kind of emerged from Selenium 2.0, it is very easy to use.
WebdriverIO
WebdriverIO is a modified implementation of the Selenium API that is used as a web driver. It is very simple to learn and perform testing on your web applications. Fortunately, it can automate both web application and native mobile applications. WebdriverIO is written in JavaScript and runs on Node.js. With webdriverIO you can write your own functional tests and even execute them using Appium.
Karma
Karma is a testing framework built in JavaScript that has recently acquired popularity among developers. Karma has become one of the primary choices for testing websites written in JavaScript and Angular JS. Karma works on “productive testing” which technically means that the developer does not have write loads of configurations while setting up the environment. Just go on with the tests and get instant feedbacks.
Jest
Jest is a JavaScript testing framework developed by Facebook’s engineers. Jest is considered the best testing framework if your website has used React. Jest is powerful enough to run the tests in parallel. Jest requires very little configuration setup and allows you to write tests with quick results. The power of Jest comes from the bundle it packs within it. If you are not using Jest for your Unit testing of JavaScript, then you have to work along with a test runner, an assertion library, mocks and mocking library. If you are using Jest this all comes within Jest.
Conclusion
So, it was a long post but worth a read for the knowledge of cross-browser testing. Cross-Browser testing has become a must if you are developing a web application. The technical revolution has created so many options for the people that we need to keep in mind that everyone is able to see the website as the developer wanted. Cross-Browser testing can change the game between two web applications (one tested and one not tested). You can perform cross-browser testing in any way you like but you should definitely perform it.
The most recommended way is to use the online tools such as LambdaTest which are fast, reliable and cheap. You can go ahead and try your hands on the cross-browser testing without taking help from online tools but it is more hectic and time consuming. There are loads of tools and testing framework available on the internet today. Majority of them are open source and free to use. This will make you a great tester and improve your overall skills in the technical field. But it is totally up to you. Whatever you choose, you will have a downside. But, whatever you choose, you have to go with cross-browser testing.
Comments