How to Run Cross Browser Testing Using LambdaTest

Cross browser testing is a vital part of checking websites and web applications. It allows businesses (and their developers) to verify whether their website is not only compatible with all browsers, but also the relevant versions, operating systems, and devices.

A user’s choice of browser might boil down to their place of work, the country they reside in, their connectivity, their approach to privacy, or even their ethics. As website owners, businesses have no say whatsoever in which browsers users access their websites on.

In this tutorial I will look deeper into cross browser testing, while showing you the process with LambdaTest at the end of the post.

What is Cross Browser Testing?

To make sure your website or app functions properly across different browsers and operating systems you need to check for browser compatibility. Doing so will help you understand where it’s lacking and what you need to improve it.

A Simple Scenario

To better understand the need for cross browser testing, let’s consider a simple scenario. You develop a simple website with three frontend technologies: HTML5, CSS3, and JavaScript. Though there are multiple languages and techniques that you can use during the backend development (such as Python, PHP, and Ruby) rendering the front-end only focuses on these three technologies.

However, every browser has its own rendering engine (though some share the same engine with others) so they compute these technologies differently. For example, Internet Explorer uses edge HTML and Chakra, Firefox uses Gecko, and Google Chrome uses Blink to render a website.

Now, let’s consider that your website goes live, and it starts getting high traffic in just a few days. You come to realize that the high amount of traffic is largely from mobile browsers, which you haven’t tested. And if your website doesn’t function properly on mobile browsers, then there will be a drastic loss in that traffic. So, what should you do?

You’re unlikely to buy multiple machines to install different browsers, operating systems, with all their versions because that’s inefficient. You could visit a device lab (if there’s one nearby) so as not to shoulder the costs yourself, but the simplest solution is web-based cross browser testing that will allow you to test your web app across all browsers.

How to Perform Cross Browser Testing

When it comes to executing cross browser testing, there are generally two ways to go about it: manually and automatically.

Manual Testing

Manual testing refers to testing your website manually on every browser separately. First, you’ll have to identify all the browsers your application must support, then install those browsers with their versions on your system, and then write test cases for testing your web app.

After writing the test cases, you’ll have to re-run the same test cases across different browsers, operating systems, and devices to check application behavior and find any bugs in it. With the manual method, however you do it, it’s unlikely to be cost effective.

Automated Testing

The best alternative to manual testing is automation, where you don’t have to install different browsers on your system to test your application. Cross browser testing requires running the same test cases again and again on different browsers, and automation is the best way to do that. To automate cross browser testing, you’ll need a platform that already has every browser and their versions installed on their servers so that you can test your web app on the targeted versions.

This will not only save you time but will also help in managing costs appropriately. You can run a virtual machine with your required specification, and the tool will run tests for you. With that said, let’s learn more about automated cross browser testing with LambdaTest.

Using LambdaTest for Cross Browser Testing

LambdaTest is an online selenium grid that allows you to perform free, live, interactive cross browser testing for your publicly or locally hosted web app, across a combination of more than 2,000 browsers, operating systems, and devices. It is integrated with extensive features and debugging tools that allow you to debug your web app on both mobile and desktop browsers.

It allows you to record or take screenshots of your testing process so that you can share it with your team while the testing is in process. In short, LambdaTest is a platform that will free you from all the stress of testing your website on multiple browsers and operating systems.

One great thing about LambdaTest is that it gives you the functionality to test your web app in both manual and automated ways. The manual method allows you to select specific browsers, operating systems, and devices from the list on the server, whereas the automated method tests your web app across all combinations automatically. Let’s find out more about these processes in detail.

Note: at the end of this tutorial, we will discuss LambdaTest’s WordPress Plugin and Chrome Extension.

Manual Web App Testing with LambdaTest

You can perform various types of manual cross browser testing with LambdaTest. Here’s each testing technique in detail:

Real-Time Cross Browser Testing

The real-time interactive cross browser testing with LambdaTest allows you to test your web app across multiple combinations of browsers and operating systems on different desktop and mobile devices. Performing real-time testing with LambdaTest will make you feel like you’re working with a real machine and not a virtual machine.

To start with real-time cross browser testing, first, you’ll have to sign up and create an account on LambdaTest. If you already have an account, login to continue.

After signing in, go to the real-time menu on LambdaTest’s screen and enter the URL of the website that you want to test. Now, select the configuration for which you want to perform the real-time cross browser testing, and hit the Start button.

That’s it!

A new virtual machine will start running on your local machine, where you can test your application for cross browser compatibility.

As you’ve already set the configuration, while performing the testing process you can do the following things:

Find bugs and mark them, record video of the test session
Save screenshot to the LambdaTest’s gallery
Change resolution of the machine on the go
Move your test to a project and change basic settings

Once the testing process is complete, you can end the session. However, if you are willing to perform cross browser testing on a different configuration, then click the Switch button on the top-left menu bar. The Switch feature help users in modifying their current testing configuration without ending their current session and re-launching the virtual machine.

Apart from testing your web app on desktop and PCs, you can execute real-time testing on mobile devices as well. To do so, click the mobile icon under the real-time testing field.

Now, select the mobile devices on which you want to perform cross browser testing of your app, and then perform the same steps as you did for desktop device testing. Also, if you’re testing for iOS devices, then you can use the Clear Cache option that enables you to clear cache in your system while testing your web app.

Visual UI Testing with LambdaTest

It takes barely a few seconds for a user to judge a website when visiting it, and a big part of this is the user interface. You should definitely check your site for visual bugs, but as we’ve discussed manual visual testing of web apps is complicated and challenging. However, LambdaTest’s visual UI testing can help you find visual bugs easily.

With LambdaTest, you can perform visual testing of a web app in the following ways: Screenshot Testing, Responsive Testing, and Smart Visual Testing.

Screenshot Testing with LambdaTest

The screenshot testing feature of LambdaTest allows you to take multiple screenshots (up to 25) on different desktop and mobile configurations in a single session.

Select the configuration (up to 25), enter the URL of your website, and then click Generate. After clicking Generate, the screenshots will start appearing on your screen within a few seconds.

Once the screenshots appear on your screen, you can download them to your system. Also, you can mark the bugs that you find during testing, and then move them to the issue tracker tool, or save them to your desktop.

That’s all there is to it!

Responsive Testing With LambdaTest

To perform responsive testing of your website or app, you’ll select Responsive Testing under Visual UI Testing section.

With LambdaTest responsive testing, you can check how your website appears on different screen sizes and devices.

Enter the URL of your website under the responsive testing section and click Generate. The screenshots for selected devices will appear on your screen, helping you determine the responsiveness of your web app/website.

You can improve your responsive testing process by using features like defer time and localhost testing.

Smart Visual UI Testing

It often happens with developers that when they overlook some of the common bugs in newly developed websites, even after analyzing the code properly, they are unable to find the cause, and that’s where LambdaTest smart visual testing comes to the rescue.

LambdaTest smart visual testing helps you find common visual bugs like icon size, font style, padding, text size, images, etc. that are often awkward to find.

LambdaTest Smart visual testing will clarify the difference between two or more images at a time with color change, and then allow you to mark the bugs, move it to a bug management tool, or edit it and leverage it in many other ways.

However, if you want to avoid using a third-party bug management tool, then you can use LambdaTest’s inbuilt issue tracker.

Automated Cross Browser Testing with LambdaTest

There is no denying that most businesses prefer automation over manual methods when it comes to cross browser testing; it is less challenging, less time-consuming, and less expensive. However, choosing the right framework for automated testing is a challenge for most people.

Selenium is the most recommended and trusted framework for automation testing. Also, it supports almost every programming language and comes with four major tools:

Selenium IDE
RC
WebDriver
Selenium Grid

What makes LambdaTest ideal for automated cross browser testing is that it provides you with an online selenium grid that enables you to perform end-to-end automation tests on a reliable, scalable, and secure cloud infrastructure.

With LambdaTest Selenium Grid, you are allowed to test your web app with 2,000+ browsers and operating systems, providing you with higher test coverage and helping you better understand how your website renders across different browsers.

To start with LambdaTest Selenium Grid for automation testing, first, you need to understand its capabilities. LambdaTest uses remote WebDriver instead of Selenium client browser drivers. Therefore, if you want to transfer from locally hosted selenium, then you’ll have to use LambdaTest Selenium remote WebDriver.

Also, you’ll have to specify the browser, browser versions, OS, and screen resolution in your code on which you want to test your website or application. You can get help from LambdaTest’s Capability Generator to define different browser environments.

Once you understand the capabilities, you’re ready to run your test on LambdaTest. Begin by furnishing your code with the required functionality and run it over Selenium Grid. Upon executing the code, the test results will appear on the test console and LambdaTest Dashboard. You can check the screenshots, text logs, and video recording of the testing process in the dashboard. To better understand automated cross browser testing with a step-by-step process check out the example below.

Automated Testing Example

Here we will show how to run Java-based automation test scripts with multiple versions of browsers on LambdaTest Selenium cloud platform for automated cross browser testing. Before performing the automation testing with LambdaTest, make sure you have access to the following things:

A LambdaTest account
Username and Access Key for the account
Java Development Kit - At Least 1.6 or higher version
Selenium Jars
TestNG Jars

Apart from those, you need to know how to write automation test scripts, and have a good understanding of LambdaTest Selenium Grid capabilities as mentioned earlier.

Step 1

Download and install Maven on your system. (You can download it from the Eclipse Marketplace).

Step 2

After installing Maven, restart Eclipse to make the new changes effective.

Step 3

Create a Maven project:

Go to File > New > Other > Maven > Project.
Enter the Group ID and artifact ID and click Finish; your Maven project is created.
Now, create a Java class and give it a name, let’s say CrossbrowserTest, and then click Finish.

Step 4

After creating the class, install the drivers for browsers that you’ll use in your script. Here, we will be using three browsers in the script: Chrome, Firefox, and Opera.

Step 5

Now, add dependency files that are necessary for every framework that you’re using for testing. Here we have used pom.xml dependency file for Selenium.

Step 6

Copy the code below to the workplace of your Java class (Crossbrowsertest.java). After pasting the code, convert it to “testing.xml”.

package com.browsers.Cross_Browser;

    import org.testng.annotations.Test;
	import org.testng.AssertJUnit;
	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.openqa.selenium.opera.OperaDriver;
	//comment the above line and uncomment below line to use Chrome
	//import org.openqa.selenium.chrome.ChromeDriver;
	public class BrowserTest {
		WebDriver driver;
	
		@Test
		public void AmazonTitleTest() {
		// declaration and instantiation of objects/variables
		System.setProperty("webdriver.gecko.driver","C:\\Users\\Admin\\Downloads\\geckodriver.exe");
		driver = new FirefoxDriver();
		//comment the above 2 lines and uncomment below 2 lines to use Chrome
		//System.setProperty("webdriver.chrome.driver","G:\\chromedriver.exe");
		//WebDriver driver = new ChromeDriver();s
		
		String baseUrl = "https://www.amazon.com/";
		String expectedTitle = "Amazon.com: Online Shopping for Electronics, Apparel, Computers, Books, DVDs &amp; more";
		String actualTitle = "";
		// launch Chrome and direct it to the Base URL
		driver.get(baseUrl);
		// get the actual value of the title
		actualTitle = driver.getTitle();
		/*
		* compare the actual title of the page with the expected one and print
		* the result as "Passed" or "Failed"
		*/
		AssertJUnit.assertEquals(expectedTitle, actualTitle);
		//close Fire fox
		driver.close();
		}
		@Test
		public void AmazonTitleTest1() {
		// declaration and instantiation of objects/variables
		//comment the above 2 lines and uncomment below 2 lines to use Chrome
		System.setProperty("webdriver.chrome.driver","C:\\Users\\Admin\\Downloads\\chromedriver_win32\\chromedriver.exe");
		WebDriver driver = new ChromeDriver();
		String baseUrl = "https://www.amazon.com/";
		String expectedTitle = "Amazon.com: Online Shopping for Electronics, Apparel, Computers, Books, DVDs &amp; more";
		String actualTitle = "";
		// launch Chrome and direct it to the Base URL
		driver.get(baseUrl);
		// get the actual value of the title
		actualTitle = driver.getTitle();
		/*
		* compare the actual title of the page with the expected one and print
		* the result as "Passed" or "Failed"
		*/
		AssertJUnit.assertEquals(expectedTitle, actualTitle);
		//close Fire fox
		driver.close();
		}
		@Test
		public void AmazonTitleTest2() {
		// declaration and instantiation of objects/variables
		//comment the above 2 lines and uncomment below 2 lines to use Chrome
		 System.setProperty("webdriver.ie.driver", "C:/Users/Admin/Downloads/IEDriverServer.exe");
		 driver = new InternetExplorerDriver();
		String baseUrl = "https://www.amazon.com/";
		String expectedTitle = "Amazon.com: Online Shopping for Electronics, Apparel, Computers, Books, DVDs &amp; more";
		String actualTitle = "";
		// launch Chrome and direct it to the Base URL
		driver.get(baseUrl);
		// get the actual value of the title
		actualTitle = driver.getTitle();
		/*
		* compare the actual title of the page with the expected one and print
		* the result as "Passed" or "Failed"
		*/
		AssertJUnit.assertEquals(expectedTitle, actualTitle);
		//close Fire fox
		driver.close();
		}

Step 7

Run this testing.xml file as a testing suite and you’re ready to perform automated cross browser tests!

This code will test amazon.com on Mozilla, Chrome, and Opera browser. If the website opens, it will show the test as a pass, otherwise it will show fail. Similarly, you can test more browsers and change the website for testing.

Using the LambdaTest WordPress Plugin

The WordPress plugin from LambdaTest allows you to take complete screenshots of your web app across different browsers directly from your WordPress admin panel. To install and use the LambdaTest WordPress Plugin, follow the below steps:

Visit WordPress and login with your account. Now, select the Plugin option from the menu tab and click Add New Plugin.

In the search bar, write LambdaTest to find the plugin, and when it appears on the screen, click Install.

Once the plugin is installed, click the Activate button on it, and LambdaTest Screenshot option will appear in your Plugin section. Add LambdaTest profile account details to the plugin, click Activate, and you’re all set with WordPress Plugin.

Now, to generate automated screenshots of your website with LambdaTest plugin, click All Posts and select the LambdaTest icon that you’ll find at the section below. Enter the details related to the browser, version, and device, and then hit the Start button. Screenshots will start generating for your website.

Using the LambdaTest Chrome Extension

Another excellent feature offered by LambdaTest is the Chrome Extension.Adding this extension to your browser will allow you to generate automated screenshots of web pages directly from the browser. Here’s how you can use LambdaTest Chrome Extension.

Open Google Chrome and go to Chrome web store. Search LambdaTest in the search bar, and then click Add to Chrome. A pop-up will appear on the screen, click Add Extension on it.

The LambdaTest Chrome extension will be added to your browser.Now, to activate the Chrome Extension, you’ll have to add LambdaTest profile details. Click the LambdaTest icon in the top right-hand side of the browser. Enter the email address and access key, and then click Activate.

Once it is activated, you can take screenshots from your browser by clicking the LambdaTest icon on your website. Select the specific browsers that you want to test for your web application and click the Capture button. Screenshots will start generating, so you can save them on your local system.

Using the chrome extension is that simple!

Conclusion

LambdaTest is a well recognized platform used by many developers around the world to test their web apps and websites. It helps in analyzing the functionality and performance of web pages on multiple browsers, operating systems, and devices. So, if you want to test your web application for cross browser compatibility, visit LambdaTest.