Cross Browser Testing With Selenium Automation Tools 2023

What We Are Learn On This Post

The past few years have seen the rise of cross-browser testing as a necessity for web developers. While most developers may be familiar with how to test for browsers, it’s only recently that tools have emerged that allow you to easily test across a variety of browsers and platforms in real time.

Cross browser testing is a very important aspect of web development. It ensures that the website and its content works perfectly in all browsers. Even if the developers have knowledge about all browsers, they cannot always ensure that their website and its content will be displayed perfectly in all browsers. In this article, we will explain what cross browser testing is, why it is important, and how you can do it easily.

Readers, you should have heard the term Cross Browser Testing. In this article we will focus on understanding Cross Browser in all the aspects – What, Why, When, How, Who, etc.. 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.

So in this article, we are going to discuss:

What is Cross Browser Testing?
Why do you need Cross Browser testing?
How to perform Cross Browser testing?

What is Cross Browser Testing?

In the past, this could have been quite a difficult task as you needed to set up virtual machines for each browser, install each one separately, subsequently configure them individually, etc. Fortunately today with modern web development tools and web server software, cross-browser testing has become much easier.

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 do we need Cross Browser Testing?

The main reason that you need to perform cross-browser testing is for accuracy. Users of different browsers will experience your site differently, and often it’s these subtle differences in the user interface that make or break a conversion.

Cross-browser testing can be used to eliminate site-specific issues such as client-side JavaScript errors, layout issues, incompatibilities with specific browser add-ons, etc., and ensure that your site is compatible with the widest audience possible.

One example of a client-side JavaScript error: When performing cross-browser testing you may find that a certain piece of functionality in one browser isn’t working (ie: a popup). Upon further investigation, you could determine why this occurred. A common example of this is with IE6. In order to achieve cross-browser support, IE6 needed some specific client-side script fixups (in the form of JavaScript and VBScript) in order to make new functionality work correctly with the browser.

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:

Client components are built using like AJAX, JavaScript, Flex, Applets, etc., and hence they may behave differently on different browsers.
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:

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..).
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>

Who Performs Cross Browser Testing?

If you’re building your site using the typical waterfall process: design, development, and testing, then a tester will be responsible for cross-browser testing. The tester will be responsible for manually testing your site in a variety of browsers to ensure that it works correctly.

If you’re using an agile methodology then cross-browser testing is part of the development process and can be done by developers or testers.

Testing takes time, so if you want to make sure that your site works correctly in as many browsers as possible then a good approach is to perform testing during development. This way any issues can be addressed early on, so they don’t cause problems when it’s time for deployment. And since new bugs are less likely to be introduced into the codebase late in the project cycle, fixing these issues early will greatly improve your chances of a successful deployment.

Developers vs Testers

Some people question whether developers should be responsible for cross-browser testing. The answer depends on both your organizational structure (who owns QA), the complexity of your project, and how much budget you have available for testing.

Testing takes time, so if you’re in a situation where every QA cycle is critical (short deadlines) then a good approach is to outsource testing to an external party such as a vendor or consultant. This way your developers will be able to focus on development without worrying about setting up different browsers and performing manual cross-browser testing.

Cross Browser Testing Checklist

You should always start cross-browser testing with the basics: make sure your site renders correctly, that links work correctly, that form submission works and that your site works in all major browsers.

But it’s easy to overlook some of the more advanced items – you’ll need to think about how your website is used. For example, do you have any complex javascript? You’ll need to make sure that javascript functionality works correctly in the browsers that support it.

Here’s an example of a cross-browser testing checklist:

Open Page in Major browsers (IE, Firefox, Chrome)
Test all the basics:
Can I link to external pages?
Are my images showing up correctly?
Test any Flash elements that you have on the page?
Test any possible Browser add-ons that users may have installed (ie: firebug, jquerry).
Make sure that everything works correctly!
Client components: CSS, HTML, XHTML validations
Page validation – JavaScript enabled and disabled
SSL Certificate
Page layout for different screen resolutions
Page navigations
Page alignment – LHS, RHS, center-aligned and scrollbars
Text and image alignments within page
Spacing between elements in the page
Date format
Font size, color, style
Header and footer layouts
Tooltips, Mouse-hover text
Popups, Widgets, Flash
Page Zoom In / Zoom Out
Download and Upload Single / Multiple files
View files within browser
Add / Submit / Save / Edit / Delete buttons
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.

Cross Browser Testing tools

There are a variety of tools that can be used for cross-browser testing.

A popular option is the use of virtual machines (VMs). There are both free and commercially available VMs for most common browsers. Examples include Apples Safari Technology Preview, Microsoft’s IE Development Platform, and Mozilla’s Waterfox project.

Another option is to use a general-purpose browser testing tool such as Selenium or Watir-WebDriver. These tools allow you to interface with the browser in order to test various functionality – fill out forms, click buttons, etc. But before you start building this type of system you should have a good understanding of the test automation pyramid. This approach can be useful for automating repetitive tasks and as part of an initial build of automated regression tests prior to moving onto more advanced testing tools such as SoapUI.

Another popular option is to use a site-specific testing tool such as SauceLabs, BrowserStack, or TestingWhiz. These tools allow you to test your website in a variety of browsers within the cloud. This means that you don’t have to install additional software or run multiple operating systems on your local machine – it also provides access to a greater range of devices including mobile devices and tablets. But like all automated testing tools, these options can be expensive for small teams or projects and the test reporting can have a “waterfall” feel to it.

How to perform Cross Browser Testing?

If we are using Selenium webDriver to automate test cases for Internet Explorer, Firefox, Chrome, Safari browsers then we can integrate the TestNG framework with Selenium WebDriver.

Sample Class Code:

package crossBrowserTests;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.ie.InternetExplorerDriver;
import org.testng.annotations.AfterMethod;
import org.testng.annotations.BeforeMethod;
import org.testng.annotations.Parameters;
public class CrossBrowserTestFromTestNG 
{
   WebDriver driver;

   @Parameters(“browser”)
   @BeforeMethod
   public void lanuchBrowser(String browser)
   {

      if (browser.equalsIgnoreCase(“firefox”))
      {

         driver = new FirefoxDriver();
         System.out.println(“Browser selected for testing is : Firefox”);

      }
      else if (browser.equalsIgnoreCase(“chrome”))
      {
         System.setProperty(“webdriver.chrome.driver”, “C:chromedriver.exe”);

         driver = new ChromeDriver();
         System.out.println(“Browser selected for testing is : Google Chrome”);

      }
      else if (browser.equalsIgnoreCase(“ie”))
      {
         System.setProperty(“webdriver.ie.driver”, “C:IEDriverServer.exe”);
         driver = new InternetExplorerDriver();
         System.out.println(“Browser selected for testing is : IE”);
      }
   }

   @org.testng.annotations.Test
   public void Test()
   {

      driver.navigate().to(“https://learnaboutsoftwaretesting.blogspot.in”);
         System.out.println(“Title of the webpage is: “+driver.getTitle());
   }

   @AfterMethod
   public void closeBrowser()
   {
      driver.close();
   }

}

TestNG.XML

<?xml version="1.0" encoding="UTF-8"?>
<suite name="Default suite">
    <test verbose="2" name="FireFox Test">
        <parameter name="browser" value="firefox"></parameter>
        <classes>
            <class name="crossBrowserTests.CrossBrowserTestFromTestNG" />
        </classes>
    </test>
    <!-- Default test -->
    <test verbose="2" name="Chrome Test">
        <parameter name="browser" value="chrome"></parameter>
        <classes>
            <class name="crossBrowserTests.CrossBrowserTestFromTestNG" />
        </classes>
    </test>
    <!-- Default test -->
    <test verbose="2" name="Internet Explorer Test">
        <parameter name="browser" value="ie"></parameter>
        <classes>
            <class name="crossBrowserTests.CrossBrowserTestFromTestNG" />
        </classes>
    </test>
    <!-- Default test -->
</suite>
<!-- Default suite -->

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.