• +(91) 8750050183
  • info@helpingtesters.com
  • helpingtesters

Cross Browser Testing – HelpingTesters

November 23, 2017

Readers, have you encountered problems in accessing website or applications? Maybe, something like below: 

Case 1: Something is not working in the browser even after many tries. End up calling customer support to get the issue resolved. The response that got is to try on another browser. Wow!! It’s working absolutely correct now. 

Case 2: The entire website page messy in one browser. Refresh it/try after some time thinking maybe some rendering issues. No luck. Then give a try to open the same web page in another browser. Goodness… It’s an awesome web page with great visual.

These are just a few cases where everyone would have faced issues with. So, what do all these mean now? It all means to say, the particular website has not undergone thorough Cross Browser Testing (CBT) i.e., the website is not extensively tested in different browsers. So, focusing on the topic Cross Browser Testing, we will go ahead with the blog.

What is Cross Browser Testing

Cross Browser Testing is a practice, to say, to assess the website/application across multiple web browsers and to ensure it works correctly in all of them. When we say multiple web browsers, it means:

  • Not just the browsers that are commonly used, include some more. Maybe end user is likely to use Firefox and Chrome, but include IE, Safari, Opera, etc (which are extensively used by wide range of end users)
  • Consider different versions of each of the browsers (Current, few slightly older, pre-release versions (if available))
  • Each browser with limitations: with and without add-ons / flash turned ON and OFF / Pop-ups allowed and blocked / etc.
  • Each browser with cookies cleared/enabled/disabled

It also makes sense to test on different devices as well – Desktop, Laptop, Phones, Tablets, etc.. Again, for each device type, select different models where an application to be tested on. In short, testing in different browsers across a wide variety of devices.

Why Cross Browser Testing (Technically)

There are many reasons to perform Cross Browser Testing (for technical reasons). Few of them are as detailed:

⇒ Browser Bugs

Sometimes, it is possible that few versions of the browsers may have bugs and could result in failure of the application being tested on them.

⇒ Browser Limitations / Settings

Few browsers need some specific features of it to be turned ON or OFF for the application to be accessed and used on it successfully. This can be ensured when the application is tested on the browser by analyzing the settings of the required features of the browsers. This has to go in the technical specification / User Manual of the application which reaches the end user, so that end user can make necessary settings as mentioned in it. – Ideally, the application should be independent of browser settings.

⇒ Browser Support

Few features of the application may not be supported by older versions of the browser, may be due to the advanced technology used. In this case, it helps developers to analyze and make application compatible with old versions of browsers too by converting code to old-fashioned syntax

⇒ Client-Server application behavior

As on today, we have a wide range of web browsers available and end users can choose any of them to access the application. Considering the trend of Client-Server application: 1) Client components are built using like AJAX, JavaScript, Flex, Applets, etc., and hence they may behave differently on different browsers. 2) Servers handle the client requests coming from different browsers in different ways.

Based on the above points, testing the application in one browser is not at all sufficient. Non-practice of Cross Browser Testing will have a huge impact on Business and leads to excessive Maintenance and Operational Costs.

Categories of Cross Browser Testing

Since the website/web applications have to undergo Cross Browser Testing and it is all with Client-Server structure, we can categorize Cross Browser Testing into two straight forwardly:

  1. Client-Side Cross-Browser Testing: Website is launched and tested on different browsers for functionality (Perform regression / exploratory) and UI issues (Page rendering / Layouts / Overlaps / Widgets / Fields / Color, etc..).
  2. Server-Side Cross-Browser Testing: Here response of the application is tested when being tested from different browsers. What happens, in this case, is clearly explained below in simpler terms:
    • Each browser is considered as Client and given “User-Agent” value
    • When User access the application from browser, the assigned User-Agent value is passed in Client HTTP request (in header of HTTP request)
    • The server once recognizes the User-Agent in the HTTP request, it renders and displays the page to the user as to fit the browser with proper design (this is handled in the coding: depending upon the User-Agent, page design is adjusted to display correctly in the browser).

One thing to notice here is that Web page may be designed differently for Mobile Users and PC users (Desktop / Laptop). In this case, Server has to respond by rendering correct page design based on User-Agent that is received either by Mobile or PC.

When and Where Cross Browser Testing

Cross Browser Testing can be done at various phases in Software Development Life Cycle (SDLC):

  • As soon as the Page designs are completed and available (individual pages) – Preferred
  • Once the application is ready with all the components integrated and functioning – Still OK
  • After Production launch – Risky in terms of costs but acceptable sometimes.

Best environment to perform Cross Browser Testing is Testing / QA environment. Also, stakeholders may choose it to be performed on Dev, UAT, and/or Production environment as well. Good Practice here is assigned/distribute the browsers within the team members, so that browser coverage can be achieved along with functional test coverage.

Who does What in Cross Browser Testing

  • It’s the Client, Business Analysts, and Marketing team who takes the decision of Cross Browser Testing and what browsers to test upon.
  • QA / Testing team actually performs Cross Browser Testing on identified and decided browsers
  • Development team is the one who analyzes the issues coming out from Cross Browser Testing and make necessary changes in code to handle browser–specific issues (if possible)

How is Cross Browser Testing Performed

  • Identify and decide the Browsers and versions of it where application has to be tested (study market value and usage statistics of browsers before deciding)
  • Decide whether the entire application or major parts of the application has to undergo Cross Browser Testing. Ideally it is good to choose entire application on one browser in each platform (Laptop and Mobile / Operating System / Browser – Example: HP/Windows 7/Firefox, Acer/Windows 8/Chrome, Dell/Windows 10/Edge, Lenovo K6 Power/Android 7/Chrome, etc..) and only major functionalities on other browsers and each platform (Example: HP/Windows 7/Firefox, HP/Windows 7/IE 11, HP/Windows 7/IE 10, etc..)
  • Start testing with detailed tracking of coverage. Maintain template to track the testing performed:

  • Any bugs encountered should follow the same bug life cycle being used in the project. Set standards for the bugs to easily identify that it was found during Cross Browser Testing. Example: <Model> <OS> <Browser_Version> : <Module> : <Summary>

Cross Browser Testing Checklist

So far, we got an idea on what to test during Cross Browser Testing. Expanding this, we will see what are the actual items that need to be tested as part of this testing. Below is the Checklist of testable items for any application’s Cross-Browser Testing:

  1. Client components: CSS, HTML, XHTML validations
  2. Page validation – JavaScript enabled and disabled
  3. SSL Certificate
  4. Page layout for different screen resolutions
  5. Page navigations
  6. Page alignment – LHS, RHS, center-aligned and scrollbars
  7. Text and image alignments within page
  8. Spacing between elements in the page
  9. Date format
  10. Font size, color, style
  11. Header and footer layouts
  12. Tooltips, Mouse-hover text
  13. Popups, Widgets, Flash
  14. Page Zoom In / Zoom Out
  15. Download and Upload Single / Multiple files
  16. View files within browser
  17. Add / Submit / Save / Edit / Delete buttons
  18. Cancel / Close links

Manually or Tool

Cross Browser Testing can be performed either manually or by using tools. Manually covering the entire application over multiple devices, multiple Operating Systems, multiple Browsers is quite difficult and time-consuming as well, which in turn increases investment as well. To overcome this situation, tools can be used for the purpose, which is now readily available in the market (Open-source as well as paid ones). Choosing the right one for the project depends on various factors:

  • Technology-supportive? Are the client components used in the application supported by the tool?
  • Is the tool secured? Does it ensure Security of data? As the tool is considered third-party and is accessing the information passed in the application, data should not be leaked through the tool at any point of time and under any circumstances.
  • How does the tool synchronize with multiple browsers? Perform complete testing on one browser and record the result, then run the recorded test on other browsers.
  • How efficient is the tool in identifying issues and passing it for further analysis: Is it taking a screenshot at the point of issue or records the flow from certain period till the issue encountered?
  • Does the tool support Web and Mobile applications
  • Is it capable enough to handle sensitive information (Login credentials, etc)?

Few tools to mention: BrowserStack, CrossBrowserTesting, WebShot, Browser Sandbox, Browsera, BroswerShots, Spoon Browser Sandbox, BrowserCam, BrowserSeal, etc.

Conclusion

So, Cross Browser Testing is needed in almost all the Web application projects, so as to ensure:

  • Website/application is consistent and compatible with all the browsers (works the same under alternative conditions – browsers and their versions)
  • There are no dependencies with respect to browsers
  • Quality is not compromised in any of the browsers
  • Enhance user experience across browsers

Cross Browser Testing and Cross-Platform Testing are often mistaken to be same. Cross Browser is always on different browsers in any considered platform (Device / OS), and Cross-Platform is different devices, different Operating Systems, different Browsers. Terms are supposed to be used with great care as they mean a lot in terms of testing, effort, investment, etc.

It is a good Strategy to practice Cross Browser Testing in the projects for all the releases (or main releases at least).

Leave a Reply

Your email address will not be published.

Broaden Your Knowledge. Enroll Today.

Our tutoring services on software testing courses online offer information on a wide variety of courses, ranging from Web Security and Software Testing courses to selenium online training to Mobile Automation Testing. Whatever criterion you need help with concerning advanced technological functions and operations, we’ve got you covered. We also use real world examples and scenarios for solving examples and projects, enhancing your knowledge and broadening your horizon.