Cross browser testing: reasons and executors to perform

Applications and sites can behave differently. It is regarding the fact that each browser has its own extensions, plug-ins and also differences in the desktop and mobile versions. Cross browser testing is performed in order to decrease these differences, making the development more or less universal. 

Why do cross browser errors appear:

1. Sometimes a browser itself has a bug or the functions are implemented differently. Often such a thing takes place through attempts to gain a competitive advantage.
2. Some browsers can have different levels of the technical functions support for other browsers. JavaScript features, most likely will not work on outdated browsers.
3. Some devices may contain restrictions that may cause the website to run slower or display incorrectly. For example, if the site was designed for the desktop, it is likely that its content will be difficult to read on a mobile device. 
4. Testing in popular browsers must be performed after testing the site for defects by other types of testing. Only in this case, we can say that the detected incorrect scripts are related to the features of the browser and were not omitted at other stages. It is clear that the error should not be detected in all browsers. You should also pay attention to the combination of operating system and browser, choosing the most common of them.

Cross-browser testing begins with the choice of browsers. As a rule, the customer determines with which web browsers his software will work. However, the task of the developer and tester is to tell the client which browser will be the main one; studying the statistics of events in such applications is necessary to determine which browsers are used by such an audience.

Nevertheless, there is a possibility to choose the worldwide statistics of usage of browsers (http://gs.statcounter.com):

• Google Chrome (the least version is suitable for testing), with 65,89% users worldwide;
• Safari, 16,65% users (The USA – 35,4%);
• Mozilla Firefox(latest version), 4,26% users;
• Microsoft Edge, 16,74% users;
• Opera 2,05% users.

The once popular Opera has slipped to the rating of «other browsers» and, except in Eastern Europe, is rarely used. According to statistics, the most popular is Google Chrome, so it is usually considered the main browser for testing.

Once the bugs found in the pre-test process have been fixed, testers should expand the list of browsers tested to reach the entire target audience, and try to focus on resolving cross-browser issues, such as:

• try to test the latest changes of all modern desktop browsers (on Mac, Windows, and ideally Linux);
• check the system on the most common phone and tablet browsers (for example, iOS Safari on iPhone/iPad, Chrome and Firefox on iPhone/iPad/Android);
• also run tests in any browser that is not required by the project.

If you do not have the ability or means to test all combinations of browsers, operating systems and devices on physical equipment, you can always use emulators (simulate the device using a special tool/software on your PC) or virtual machines that allow you to simulate many OS/software combinations on the desktop computer).

It is also very useful to test the system on «pre-release» versions of browsers (Firefox Developer Edition, Edge Insider Preview, Safari Technology Preview, Chrome Canary, Opera Developer). This is a popular procedure if the site is developed using the latest technologies and you need to check its functionality for compliance with the latest innovations.

First of all, the cross-browser analysis of the POS checks the characteristics of the layout – fonts, the location of individual elements, the functionality of the buttons, i.e. what is noticeable to the naked eye. Cross-browser testing then involves analyzing the JavaScript script, which also behaves differently in different browsers.

Nowadays, in modern browsers, we can create various effects and things that previously could not be done with HTML and CSS due to it being difficult to implement generally. Recently, it has become popular to use the new features of HTML and CSS to create various effects and elements that we can see on the page. The big advantage of using HTML and CSS is almost instantaneous testing and a wide range of features. Everything works well and quickly. Even if a person has JavaScript disabled, this is not an obstacle to displaying the same effects and elements. But there is one big disadvantage of HTML5 and CSS3 usage – their cross-browser ability, as HTML5 and CSS3 are not generally accepted standards and not all of their capabilities work without special browser IDs or the use of filters. The essence of this shortcoming can be understood if you work with foreign customers whose customers still use different versions of Internet Explorer. It is in this browser that a large number of defects are reproduced, which you will never find in other popular browsers.

Advantages of the cross browser testing

The site, which has passed cross-browser testing and is suitable for use on a wide range of devices, has a longer life cycle and quickly reaches the desired consumer niche.

After testing, the site will be displayed correctly:

• in all necessary special client configurations;
• on screens with any existing resolution;
• regardless of machine and server configuration.

Tools for effective cross-browser testing

Just a year ago, there were no good tools for testing cross-browser compatibility. The tools usually had serious drawbacks - high cost, modest capabilities or time spent. However, recently in the world of browser testing there are many newcomers and some of them are excellent services.

1. Ghostlab

Ghostlab provides synchronized testing of scrolls, clicks, updates on any of your devices, i.e., you can check the entire user experience, not just the appearance of the page.

2. BrowserStack

BrowserStack provides live web browser testing with instant access to every desktop and mobile browser (currently over 300), allowing you to test local and internal servers while providing a secure installation. It can be used in the cloud, so it does not require any installation, and built-in tools for developers (including Firebug Lite, Microsoft Script Debugger and many others) allow you to perform the cross browser test and debugging.

3. Sauce Labs

Sauce Labs allows users to test more than 260 different browsers and devices in the cloud, providing a comprehensive test, including Selenium, JavaScript, Mobile and Manual. There are no VM installation or maintenance requirements, during the tests the tester has the opportunity to take and investigate the problem manually. Sauce Labs displays the performed tests in chronological order, with information about the testing of the platform, execution time, build and its passage.

4. Browsershots

Browsershots is a web service that takes screenshots of your site in various operating systems and browsers (there are a total of 65 browsers). This is a convenient, albeit rather slow, way to test your site in many browsers at once. When you enter your site's address in the verification bar, it is queued for testing. After that, screenshots will appear on the final page in turn. This can take from 5 minutes to 2 hours. In the free version, everything is performed quite slowly. In addition, one session (request) can last only 30 minutes.

It is worth saying that this site has a multilingual interface (including – Russian and Ukrainian).

However, although this service is declared free, it also has paid functionality.

5. BrowserСam

BrowserCam is a very powerful paid online service for testing sites under any browser and any platform. One of the main «features» of this service is that it provides remote access (via VNC) to computers with pre-installed OS and browsers in which you can test your site. In addition, there is such an important option as testing for iPhone OS, Android, Blackberry, Windows Mobile. You can also test emails on different devices, which is very important for mailing companies.

Testing sites on mobile devices using emulators

A possible way to solve the problem of lack of real devices is to use special tools that emulate or simulate its functionality. Using such tools gives the tester the opportunity to detect problems with the website and allows them to take action to make the site attractive and functional on mobile devices.

Opera Mobile Emulator is a live demonstration of the Opera mobile phone browser that works in the same way as if installed on a phone. Additional debugging tools are also available, such as keyboard shortcuts, a profile selector, and various command line flags.

Advantages of Opera Mobile Emulator:

• It is easy to install and easy to use. You don't need to install any complicated SDK or anything like that;
• three input modes are available: touch, keyboard and tablet;
• it comes with a pre-configured set of phone and tablet profiles;
• all modes can be activated and controlled by links and controls;
• remote debugging using real devices.

Disadvantages of Opera Mobile Emulator:

• you can check how the pages look only in Opera browser;
• less media support.

Examples of the bugs:

1. In Microsoft Edge, the layout of the site does not change when exiting full screen mode.
2. The scroll bar list does NOT scroll in Microsoft Edge.
3. There is no error message that fewer required characters have been entered in the Password field.
4. Images or page elements are cropped in a specific browser.
5. Different display of fonts in browsers.
6. Checkbox names are not displayed vertically.