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
- Demo: Automated Browser Testing On LambdaTest
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:
|Python||Behave, PyTest, Robot|
|Java||JUnit, TestNG, Selenide, Gauge, Geb|
|C#||NUnit, MSTest, SpecFlow|
|Ruby||RSpec, Test::Unit, Capybara, Cucumber|
|PHP||PHPUnit, Behat, Laravel Dusk, PHPUnit|
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.
>> Get started with automation tests on LamdaTest.
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).
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.
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 TestNG framework.
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
<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>org.example</groupId> <artifactId>org.selenium4.CrossBrowserTest</artifactId> <version>1.0-SNAPSHOT</version> <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> </properties> <dependencies> <!-- https://mvnrepository.com/artifact/com.github.lambdatest/lambdatest-tunnel-binary --> <dependency> <groupId>org.testng</groupId> <artifactId>testng</artifactId> <version>6.9.10</version> <scope>test</scope> </dependency> <dependency> <groupId>org.seleniumhq.selenium</groupId> <artifactId>selenium-java</artifactId> <version>4.0.0-alpha-6</version> </dependency> <dependency> <groupId>org.seleniumhq.selenium</groupId> <artifactId>selenium-chrome-driver</artifactId> <version>4.0.0-alpha-6</version> </dependency> <dependency> <groupId>io.github.bonigarcia</groupId> <artifactId>webdrivermanager</artifactId> <version>4.1.0</version> </dependency> <!-- https://mvnrepository.com/artifact/org.slf4j/slf4j-nop --> <dependency> <groupId>org.slf4j</groupId> <artifactId>slf4j-nop</artifactId> <version>1.7.28</version> <scope>test</scope> </dependency> <!-- https://mvnrepository.com/artifact/junit/junit --> <dependency> <groupId>junit</groupId> <artifactId>junit</artifactId> <version>4.13</version> <scope>test</scope> </dependency> <dependency> <groupId>com.github.lambdatest</groupId> <artifactId>lambdatest-tunnel-binary</artifactId> <version>1.0.4</version> </dependency> </dependencies> <build> <defaultGoal>install</defaultGoal> <plugins> <plugin> <artifactId>maven-compiler-plugin</artifactId> <version>3.0</version> <configuration> <source>1.8</source> <target>1.8</target> </configuration> </plugin> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-surefire-plugin</artifactId> <version>2.12.4</version> <configuration> <suiteXmlFiles> <!-- TestNG suite XML files --> <suiteXmlFile>testng.xml</suiteXmlFile> </suiteXmlFiles> </configuration> </plugin> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-surefire-report-plugin</artifactId> <version>3.0.0-M5</version> </plugin> </plugins> </build> </project>
Step #5: Copy the below code to GoogleSearchTest.java.
FileName – GoogleSearchTest.java
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 "http://testng.org/testng-1.0.dtd"> <suite name="Jenkins Maven Integration Tests" thread-count="5" parallel="tests"> <!-- Add the location where the project is stored in your machine --> <listeners> <listener class-name="org.selenium4.GoogleSearchTest"/> </listeners> <test name="Google Search Test - 1"> <parameter name="browser" value="Chrome"/> <parameter name="version" value="latest"/> <parameter name="platform" value="Windows 10"/> <parameter name="resolution" value="1600x1200"/> <classes> <class name="org.selenium4.GoogleSearchTest"/> </classes> </test> <test name="Google Search Test - 2"> <parameter name="browser" value="MicrosoftEdge"/> <parameter name="version" value="84.0"/> <parameter name="platform" value="Windows 10"/> <parameter name="resolution" value="1920x1080"/> <classes> <class name="org.selenium4.GoogleSearchTest"/> </classes> </test> <test name="Google Search Test - 3"> <parameter name="browser" value="Chrome"/> <parameter name="version" value="latest"/> <parameter name="platform" value="macOS Mojave"/> <parameter name="resolution" value="2048x1536"/> <classes> <class name="org.selenium4.GoogleSearchTest"/> </classes> </test> <test name="Google Search Test - 4"> <parameter name="browser" value="Firefox"/> <parameter name="version" value="latest"/> <parameter name="platform" value="OS X Mavericks"/> <parameter name="resolution" value="2560x1440"/> <classes> <class name="org.selenium4.GoogleSearchTest"/> </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("http://" + 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.
To check the execution status on LambdaTest, go to the Automation Dashboard on LambdaTest and select the test(s) whose status you want to monitor. The plan that we have, supports ‘5’ concurrent sessions and hence, all the 5 test scenarios are executed in Parallel on the LambdaTest Selenium Grid.
The Automation Dashboard UI is super sleek and provides a range of options like Search in Build, toggling build view & test view, and filtering tests at users and status level. The Analytics view in the Automation dashboard helps the test manager to keep a tab on how the resources on the LambdaTest are utilized.
In case the test team is not using LambdaTest to its truest potential, the test manager can upgrade (or downgrade) the LambdaTest plan accordingly.
As the test team in our case grew leaps & bounds, we upgraded our LambdaTest account so that test team members can run more concurrent sessions on the LambdaTest Selenium Grid.
For checking the actions performed in the test, select that particular test and have a look at the logs, exceptions, etc. You can also look at the “execution video” for checking how the test execution proceeded.
Here is the final execution snapshot from IntelliJ IDEA and LambdaTest which indicates that the tests were executed successfully:
We just demonstrated how the advantages offered by Parallel Testing in Selenium can be further exploited by moving the test execution to a cloud-based Selenium Grid by LambdaTest. As a developer, there is the flexibility to leverage the advantages using the programming language and test automation framework supported by LambdaTest.
Manual Testing With LambdaTest
Here are some ways in which manual cross-browser testing can be performed with LambdaTest:
#1) Real-Time Browser Testing
As the name indicates, real-time testing on LambdaTest is instrumental in testing your website or web app across different browsers, operating systems, and device emulators.
Along with popular browsers like Chrome, Firefox, Microsoft Edge; there is an option to test on browsers such as Internet Explorer, Opera, Yandex, and more. It offers exemplary performance in spite of the tests being executed on Virtual Machines (VMs).
To get started with real-time testing with LambdaTest, go to LambdaTest real-time test and select the configuration on which you wish to perform testing. Choose the device type (i.e. mobile or desktop), browser (e.g. Firefox, Internet Explorer, Chrome, etc.), browser version, and display resolution.
While in the midst of a real-time test, the platform also lets you switch the test configuration, save screenshots into the gallery, record video of the test, and more.
The ability to change these configurations on-the-go is a huge advantage as far as real-time testing is concerned.
#2) Visual User Interface (UI) Testing
Visual bugs can be a big turn-off for the customers or audience of a web product. There is a possibility where the UI looks perfectly fine on a couple of browsers and OS combinations but may look out of place for other combinations. Responsive design test is also an integral part of visual UI testing, as it helps you check the responsiveness of UI on different platforms, browsers, and screen sizes.
LambdaTest can be used to perform the following types of Visual UI testing:
a) Screenshot Testing
It lets you capture screenshots for multiple browsers and devices. Like real-time testing, enter the test URL and select the test configuration to perform the test. You can even test your website against outdated browsers like Internet Explorer.
You also get an email notification once the screenshots are generated so that the screenshots can be retained for future purposes.
b) Responsive Testing
Responsive Testing on LambdaTest is useful for checking the responsiveness of the UI on different devices and viewports. We can check the responsiveness in the Landscape and Portrait modes.
In case you are unable to find the DeviceName in the ‘device list’, you can also add a custom viewport size on which you wish to perform responsive testing. In case you come across any issue with your website’s responsiveness, mark the issue as Bug so that your team members are informed about the issue.
There is an option to mark a certain area as a Bug and enter comments so that the developers know about the issue upfront.
#3) Smart Testing
For the majority of the developers, product functionalities are always of a higher priority than the aesthetics of the product. Take the case where the product has awesome features, but the fonts chosen do not look sharp on certain devices, or images are not properly rendered on select devices (or viewports)?
These are just a few examples of visual issues with a web product that can cause a negative impact on the user experience.
With Smart Testing in LambdaTest, developers and testers can perform visual testing by comparing two or more images and mark issues as bugs. These bugs can be moved to a third-party management tool or the in-built issue tracker provided by LambdaTest.
As the visual comparison of images is done using sophisticated image processing and computer vision algorithms, the comparison is ‘much more accurate’ than manual comparison (of images).
Test execution on a local Selenium Grid can hit a roadblock if the intent is to test the code against a large number of browser and OS combinations. To evade the costs associated with the continual maintenance and up-gradation of Selenium Grid; a more feasible and economical option is to embrace cloud-based Selenium Grid.
LambdaTest provides a scalable and secure cloud-based Selenium Grid that supports a wide range of programming languages and test automation frameworks. Using LambdaTest, QA automation engineers can test their code against 2,000+ browser, platform, and device combinations.
Apart from scalability and performance; LambdaTest’s exceptional customer-support, growing LambdaTest community, and in-depth technical blogs on LambdaTest help you accelerate your testing efforts.
Eager to try LambdaTest? Use the Coupon Code to avail 10 percent discount on the platform – STH10 [Only for SoftwareTestingHelp.com readers!]