Software Testing

Automated Cross-Browser Testing With LambdaTest

Automate Browser Testing With LambdaTest

Here's a complete guide with a demo to LambdaTest, a cloud-based cross-browser testing tool for Manual Web App and Automated Browser testing:

Many web developers would have come across situations where their website or web application worked as expected 'only' on a couple of browsers (or browser versions).

Cross-browser testing is a magic wand that helps in ensuring that the website or application works fine across different browsers, platforms, and device combinations.

What You Will Learn:

LambdaTest for Cross Browser Testing

What Is Cross Browser Testing

Why Use LambdaTest for Cross Browser Testing

Major Features Of LambdaTest

Automated Cross-Browser Testing With LambdaTest

Mobile Testing Using Appium

Demo: Automated Browser Testing On LambdaTest

Manual Testing With LambdaTest

Conclusion

Recommended Reading

LambdaTest For Cross Browser Testing

Test Automation Engineers mostly prefer the Selenium framework for performing cross-browser testing. The real benefits of Selenium can be exploited by automating web application testing using a cloud-based Selenium Grid.

LambdaTest is one such platform that is used to expedite activities related to cross-browser testing. With this article, we intend to share the nuances of cross-browser testing while exploring the offerings of LambdaTest.

What Is Cross Browser Testing

Cross-browser testing is a form of functional testing to check whether your website or web application performs uniformly across different browsers and operating systems. Users can use any web browser (including Internet Explorer) to access the product.

What if they figure out that the website is not working properly on the browser that they are using? This could result in negative publicity for your product. This is where cross-browser testing can be of utmost help.

Cross-browser testing can be performed using a manual approach on a local Selenium Grid. To do this, you will have to manually test your website on each browser and operating system combination. However, it is not scalable and cannot be used for large-scale projects.

This is where LambdaTest, a platform that offers reliable, scalable, and secure cloud-based Selenium Grid, turned out to be a savior.

LambdaTest is a cloud-based cross-browser testing tool that lets you test your website against 2,000+ browsers, operating systems, and device emulators. It can be used to perform manual web app testing and automated browser testing.

Why Use LambdaTest for Cross Browser Testing

Let us understand this with an example.

For a couple of 'small' projects in our organization, we used the in-house Selenium Grid setup to perform cross-browser testing. So far things were looking rosy, as we could test the product features against a 'selected' set of browsers and platforms. However, many end-users used browsers like Internet Explorer (IE) to access our website. We did not factor-in IE for testing!

We later realized that scaling up an in-house Selenium Grid setup is not feasible, as it requires continuous maintenance. Also, we could not test our web product against 'N' number of devices (or device emulators) since it required massive investment. It was turning out to be a costly affair.

However, after coming across cloud-based Selenium Grid platforms like LambdaTest, we witnessed that it requires minimal effort to port the existing test implementation that uses a local Selenium Grid to cloud-based Selenium Grid by LambdaTest.

Major Features Of LambdaTest

Here are some major features of the LambdaTest platform:

It supports automated cross-browser testing across 2,000+ real browsers, platforms, and device emulators.

Tests are executed on a scalable, reliable, and secure cloud-based Selenium Grid.

Minimal effort is required in porting local Selenium Grid tests to the cloud-based Selenium Grid by LambdaTest.

Supports automation testing with Selenium 4, the latest release of the Selenium framework.

Parallel testing in LambdaTest helps in reducing the testing efforts, as automation tests can be executed concurrently across different browser and platform combinations. The extent of parallelism depends on the pricing plan with LambdaTest.

Test the locally hosted pages with the Lambda Tunnel-an SSH-based integration tunnel.

It lets you check the responsiveness of the website or web application across different devices (iOS and Android) and viewport sizes.

It can be used to perform visual cross-browser testing across different devices and OS combinations. During the test cycle(s), the platform auto-generates full-page screenshots of the web pages which is a useful resource for visual testing.

It supports integration with popular CI/CD tools like Jenkins, CircleCI, GitLab CI, Semaphore CI, AWS CodePipeline, TeamCity, and more.

LT Browser is useful for checking the responsiveness of your website on major devices and viewports. With LT Browser, you can test web pages that are behind login, capture screenshots, test your website on a new device with custom viewports, and debug using LT Browser's DevTools.

It supports integration with popular bug tracking/project management tools like Jira, Asana, Github, and more.

Even though we prefer extensively using automated testing on LambdaTest, manual testing offerings by the platform are equally useful. The choice majorly depends on the test requirements.

Let's explore automation and manual testing with LambdaTest in more detail. To get started with LambdaTest, create an account and make a note of the username & access-key available in the Profile section on LambdaTest.

Automated Cross-Browser Testing With LambdaTest

An engineer who dabbles with the Selenium framework on a daily basis would always be concerned about the gravity of changes when migrating the tests from a local Selenium Grid to a cloud-based Selenium Grid.

Automation engineers face the same concern while evaluating tools to accelerate Selenium Testing. This concern is shooed away with LambdaTest, as only 'infrastructural changes' have to be made in the source code. The concurrency calculator in LambdaTest is an ideal starting point to calculate the number of parallel sessions that you would need to attain 'best' test coverage.

Here is the exhaustive list of programming languages and test automation frameworks supported by the LambdaTest Selenium Grid:

It supports a range of browsers, browser versions, desktop devices; including mobile devices for Appium Testing. Creating an account on LambdaTest is super-easy, post which you have to generate the required browser and platform capabilities using the LambdaTest Capabilities Generator.

Automation test results are available in the Automation Dashboard of LambdaTest. Each test execution consists of an overall test summary, exceptions encountered, console logs, network traffic, and overall test metadata. The video recording of the testing process is also available in the Automation Dashboard.

The Lambda Tunnel

Testing locally-hosted pages are extremely important for any kind of web project. While managing a team, we come across engineers who want a solution where they could test locally hosted pages. Earlier we used to do testing of locally hosted pages on a local Selenium Grid but it ended up being a big 'investment' blunder.

Scaling up the Grid and keeping up with the project demands was extremely difficult with the local Grid. This is where Lambda Tunnel turned out to be super effective. The Lambda Tunnel App helped in testing the privately hosted pages by connecting to the LambdaTest servers via an SSH-based integration tunnel.

Team engineers used the shared Lambda Tunnel when working with other teammates. This helped in avoiding the unnecessary hassle of creating new tunnels for each test scenario.

We have come across very few cross-browser testing solutions that are so effective and efficient when it comes to testing locally hosted pages. The best part about the Lambda Tunnel is that it can be used for corporate firewalls (or enterprise restricted environments).

Network Throttling

For web products built for a global audience, we realized that testing the product against different network conditions is critical. In many emerging nations, 2G & 3G is still in use and we used to test product features in good (or ideal) network conditions. We eventually realized that testing against varying network conditions is important. This also includes the offline mode!

LambdaTest provides Network Throttling capability that is helpful in checking the functionalities of our client's website on low latency networks like 2G, 3G. We were able to test how the product behaves under no-network (or offline) conditions. We set custom profiles (download speed, upload speed, and latency) for testing the features in different network conditions.

If you want to ship a global web product, Network Throttling is a must-have feature in test automation tools.

Geolocation Testing

For starters, Geolocation Testing is testing of the website from a set of IPs that belong to different countries across the globe. We should perform it for products that are targeted towards a global audience.

For example: One of the web products that we developed for our client was targeted towards the select market - New Zealand and the UK. We could make geolocation testing a part of our automation testing strategy by leveraging the 'geolocations capability' in the LambdaTest capabilities generator.

All we had to do is set the geoLocation capability to NL (for New Zealand) and GB (for the UK) in our automation test scripts.

Configuring tests to run from a specific country was a super breeze with LambdaTest. If not LambdaTest, we would have been setting the necessary locales in the browser to perform geolocation testing L. Ultimately, it would have ended up like a mini-project J.

When it comes to geolocation testing, LambdaTest's Grid saved crucial man-hours, thereby resulting in a more stable web product!

Headless Browser Testing

Using LamdaTest, we could seamlessly run headless browser tests against different browser and OS combinations. We took the headless browser testing route for 'not-so-complicated' test scenarios.

The execution was super quick, which eventually helped in using the non-headless mode for testing more complicated test scenarios.

Capture Network Logs

Collecting network events using the Selenium WebDriver helps in logging the performance, capturing page events, and more. It is different from the network throttling capability in LambdaTest, as the network capability enables capturing the network logs for the test.

Analyzing the network logs is useful for checking what went wrong in the test cases at the network level. Network logging could hamper the test performance a wee bit hence, we only enabled network logging only when necessary.

Testing at Different Time Zones

During the process of web automation testing, we came across many test scenarios where we wanted to test on a custom time zone. This was necessary for testing features in our product that were largely dependent on the end user's time zone.

LambdaTest helped in testing the product features on different time zones like UTC, Algiers, Abidjan, Accra, and more. Geolocation testing and configuring tests to run on a custom time zone was possible by configuring the necessary capabilities - 'geoLocation' and 'timezone' in the Desired Capabilities Generator.

This helped in accelerating the overall test automation process for web products that we built for the global market.

Mobile Testing Using Appium

The majority of the features that we have discussed earlier are also applicable for testing on mobile devices. Rather than investing in a costly device farm, testing teams use mobile automation testing in LambdaTest. It is easy to get started with this activity, as the Appium Desired Capabilities are to be populated for the target mobile devices emulators.

All we need to do is to specify the mobile device and target browser (and version) & we will be all set to run cross-browser tests on different mobile emulators. For checking the performance of the client website on mobile devices, check with the LambdaTest support team on the availability of testing on real devices.

As per the support team, testing on real devices and native app development is expected to be there soon on their platform!

Overall, a shorter learning curve and the ability to test the product functionalities across different browser and device (or mobile) combinations helped in accelerating the mobile testing process.

Demo: Automated Browser Testing On LambdaTest

For demonstrating the capabilities of the LambdaTest Selenium Grid, we will execute the following test scenario using Java and the TestNG framework.

Test Scenario

1. Go to Google
2. Search for 'SoftwareTestingHelp'
3. Click on the first search result
4. Check whether the current web page is SoftwareTestingHelp

The test scenario is executed in four different browser and OS combinations. The five test combinations are executed in Parallel on the LambdaTest Selenium Grid.

Pre-requisites for executing the tests include:

Account on LambdaTest
Java Development Kit (1.6 or higher)
Selenium Jars
TestNG Jars

For project creation, we have used the IntelliJ IDEA IDE.

Perform the following steps for creating a Maven project in IntelliJ IDEA:

Step #1: Go to File->New Project->Maven. Select the Project SDK as the JDK installed in your machine.

Step #2: Enter the required Artifact coordinates as shown below:

Step #3: Now that the project is created, we create a .class file named GoogleSearchTest under the package named org.selenium4. This is how the project structure will look after the file is created:

Step #4: Enter the necessary project dependencies in pom.xml

FileName - pom.xml

Step #4: Enter the necessary project dependencies in pom.xml

FileName - pom.xml

<?xml version="1.0" encoding="UTF-8"?>

<project xmlns="https://maven.apache.org/POM/4.0.0"

xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="https://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">

<groupId>org.example</groupId>

<artifactId>org.selenium4.CrossBrowserTest</artifactId>

<version>1.0-SNAPSHOT</version>

<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>

</properties>

<groupId>org.testng</groupId>

<artifactId>testng</artifactId>

</dependency>

<groupId>org.seleniumhq.selenium</groupId>

<artifactId>selenium-java</artifactId>

<version>4.0.0-alpha-6</version>

</dependency>

<groupId>org.seleniumhq.selenium</groupId>

<artifactId>selenium-chrome-driver</artifactId>

<version>4.0.0-alpha-6</version>

</dependency>

<groupId>io.github.bonigarcia</groupId>

<artifactId>webdrivermanager</artifactId>

</dependency>

</dependency>

<groupId>junit</groupId>

<artifactId>junit</artifactId>

</dependency>

<groupId>com.github.lambdatest</groupId>

<artifactId>lambdatest-tunnel-binary</artifactId>

</dependency>

</dependencies>

<build>

<defaultGoal>install</defaultGoal>

<artifactId>maven-compiler-plugin</artifactId>

</configuration>

</plugin>

<groupId>org.apache.maven.plugins</groupId>

<artifactId>maven-surefire-plugin</artifactId>

<suiteXmlFile>testng.xml</suiteXmlFile>

</suiteXmlFiles>

</configuration>

</plugin>

<groupId>org.apache.maven.plugins</groupId>

<artifactId>maven-surefire-report-plugin</artifactId>

</plugin>

</plugins>

</build>

</project>

Step #5: Copy the below code to GoogleSearchTest.java.

FileName - GoogleSearchTest.java

package org.selenium4; import org.junit.Assert;import org.openqa.selenium.By;import org.openqa.selenium.JavascriptExecutor;import org.openqa.selenium.WebDriver;import org.openqa.selenium.WebElement;import org.openqa.selenium.remote.DesiredCapabilities;import org.openqa.selenium.remote.RemoteWebDriver;import org.testng.IExecutionListener;import org.testng.annotations.AfterTest;import org.testng.annotations.BeforeTest;import org.testng.annotations.Parameters;import org.testng.annotations.Test;import java.net.MalformedURLException; import java.net.URL; public class GoogleSearchTest implements IExecutionListener {

String URL = "https://www.google.com/";

String search_string = "softwaretestinghelp";

WebDriver driver = null;

WebElement search_box;

String exp_title = "Software Testing Help - Free Software Testing & Development Courses";

public static String status = "passed";

// Update the username and access-key values with your fetched username and access key

String username = "user-name";

String access_key = "access-key";

// You can also store them in your System variables and fetch them from there using below command

// String username = System.getenv("LT_USERNAME");

// String authkey = System.getenv("LT_ACCESS_KEY");

@Override

public void onExecutionStart() {

System.out.println("onExecutionStart");

}

@BeforeTest

@Parameters(value={"browser","version","platform"

, "resolution"})

DesiredCapabilities capabilities = new DesiredCapabilities(); capabilities.setCapability("build", "Google Search - SoftwareTestingHelp using LambdaTest"); capabilities.setCapability("name", "Google Search - SoftwareTestingHelp using LambdaTest"); capabilities.setCapability("platform", platform); capabilities.setCapability("browserName", browser); capabilities.setCapability("version",version); capabilities.setCapability("tunnel",false); capabilities.setCapability("network",true); capabilities.setCapability("console",true); capabilities.setCapability("visual",true);

try {

driver = new RemoteWebDriver(new URL("https://" + username + ":" + access_key + "@hub.lambdatest.com/wd/hub"), capabilities);

} catch (MalformedURLException e) {

System.out.println("Invalid grid URL");

}

System.out.println("Started session");

}

@Test

public void test_Selenium4_GoogleSearch() throws InterruptedException {

driver.navigate().to(URL);

driver.manage().window().maximize();

try {

/* Enter the search term in the Google Search Box */

search_box = driver.findElement(By.xpath("//input[@name='q']"));

search_box.sendKeys(search_string);

search_box.submit();

/* driver.manage().timeouts().implicitlyWait(3, TimeUnit.SECONDS); */

/* Not a good programming practice, added for demonstration */

Thread.sleep(3000);

/* Click on the first result which will open up the LambdaTest homepage */

WebElement lt_link = driver.findElement(By.xpath("//span[.='Software Testing Help - Free Software Testing & Development ...']"));

lt_link.click();

/* driver.manage().timeouts().implicitlyWait(3, TimeUnit.SECONDS); */

/* Not a good programming practice, added for demonstration */

Thread.sleep(5000);

String curr_window_title = driver.getTitle();

Assert.assertEquals(curr_window_title, exp_title);

} catch (Exception e) {

System.out.println(e.getMessage());

}

@AfterTest

public void tearDown() {

if (driver != null) {

((JavascriptExecutor) driver).executeScript("lambda-status=" + status);

driver.quit();

}

@Override

public void onExecutionFinish() {

System.out.println("onExecutionFinish");

}

Step #7: As we are using the TestNG framework, testng.xml is used for organizing the tests. We have used the same for creating test suites and tests.

The details of Browser and OS combinations against which we have to perform Google Search for 'SoftwareTestingHelp' are added in testng.xml

FileName - testng.xml

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE suite SYSTEM "https://testng.org/testng-1.0.dtd">

<suite thread-count="5" parallel="tests">

<listeners>

<listener class-name="org.selenium4.GoogleSearchTest"/>

</listeners>

<test>

<parameter value="Chrome"/>

<parameter value="latest"/>

<parameter value="Windows 10"/>

<parameter value="1600x1200"/>

<classes>

<class/>

</classes>

</test>

<test>

<parameter value="MicrosoftEdge"/>

<parameter value="84.0"/>

<parameter value="Windows 10"/>

<parameter value="1920x1080"/>

<classes>

<class/>

</classes>

</test>

<test>

<parameter value="Chrome"/>

<parameter value="latest"/>

<parameter value="macOS Mojave"/>

<parameter value="2048x1536"/>

<classes>

<class/>

</classes>

</test>

<test>

<parameter value="Firefox"/>

<parameter value="latest"/>

<parameter value="OS X Mavericks"/>

<parameter value="2560x1440"/>

<classes>

<class/>

</classes>

</test>

</suite>

The Thread Count in testng.xml is set to '5'. This means that we can run a maximum of 5 tests in parallel on the Selenium Grid. However, it is important to note that the number of concurrent sessions on LambdaTest depends on the selected plan.

Step #8: The browser capabilities are generated using the LambdaTest capabilities generator. We have to select the language as 'Java' when creating the browser capabilities. As we want to record the entire test execution, the "visual" field of browser capabilities is set to "True".

Instead of the local Selenium WebDriver, we have to use Remote Selenium WebDriver since the tests will be executed on a remote Grid. The combination of username and access-key (which are available in LambdaTest's profile section) is used for accessing the LambdaTest Selenium Grid.

driver = new RemoteWebDriver(new URL("https://" + username + ":" + access_key + "@hub.lambdatest.com/wd/hub"), capabilities);

................................

driver.navigate().to(URL);

driver.manage().window().maximize();

With all things in place, we are all set to execute the tests on the Selenium Grid. For running the tests, right-click on testng.xml and select "Run ...\testng.xml" as shown in the image below.

This Article Source is From : https://www.softwaretestinghelp.com/browser-testing-with-lambdatest/