Cross Browser Testing With LambdaTest

Cross Browser Testing With LambdaTest

A short tutorial showing how LambdaTest can automate Cross Browser testing and make them interactive.

Introduction to LambdaTest:

LambdaTest is an online tool that is used to perform live interactive cross-browser testing for locally hosted websites and web apps on real mobile and desktop browsers running on real operating systems. It authorises you to test your web application on different browsers and their various versions.

What sets LambaTest apart from other platforms of its kind is its unique feature which allows for integration with third party apps. Using this tool, you can perform testing for web applications and then raise issues or bugs to another application like JIRA, Slack, GitHub etc.

LambdaTest also provides plenty of features including:

  • Selenium Automation Testing.
  • Automated screenshots and video recording of the tests.
  • Use of Tunnel to test local hosted pages.
  • Real time testing.

This is how it looks:

Screenshot 2021-03-03 at 6.44.44 PM.png

To use LambdaTest, start by registering your e-mail on https://www.lambdatest.com/.

You will be required to specify your username in the desired capabilities section. You can access this on your profile section present on the dashboard.

Let's explore how to automate web application testing using TestNG with Selenium on LambdaTest.

Prerequisites For Running TestNG with Selenium:

  • Eclipse IDE or Android studio.
  • Java development environment i.e. JDK 1.6 or higher.
  • Latest Selenium Client and it’s WebDriver bindings. You can download the latest Selenium client here.
  • Maven makes it easy to define Selenium dependencies on its project object model file or pom.xml file.

To start off, download the TestNG automation framework which is available on the Eclipse marketplace.

For your reference, this is the pom.xml file:

<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 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>lambdatest</groupId>
    <artifactId>LambdaTest</artifactId>
    <version>0.0.1-SNAPSHOT</version>

    <dependencies>
        <!-- https://mvnrepository.com/artifact/org.seleniumhq.selenium/selenium-java -->
        <dependency>
            <groupId>org.seleniumhq.selenium</groupId>
            <artifactId>selenium-java</artifactId>
            <version>3.141.59</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/org.testng/testng -->
        <dependency>
            <groupId>org.testng</groupId>
            <artifactId>testng</artifactId>
            <version>7.1.0</version>
            <scope>test</scope>
        </dependency>
    </dependencies>
</project>

Getting started on your First Test with TestNG Framework

To start with, you have to specify which browser environment you want to run the test on. You can do that by passing the browser environment details to LambdaTest Selenium grid through the desired capabilities class.

Next, you need to create a Maven project from scratch along with a file inside package within src/test/java:

package demo;

import java.net.MalformedURLException;
import java.net.URL;

//TestNG Todo : Sample App
import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.remote.DesiredCapabilities;
import org.openqa.selenium.remote.RemoteWebDriver;
import org.testng.annotations.AfterTest;
import org.testng.annotations.BeforeTest;
import org.testng.annotations.Test;


public class TestNGDemo {
   public String username = "pavithrak";
  public String accesskey = "EsNHGQYrz0w8dq022DV2kGdslvkuDs5ULgzqdr34uNMJy81eUs";
  public RemoteWebDriver driver = null;
  public String gridURL = "@hub.lambdatest.com/wd/hub";
  boolean status = false;

  @BeforeTest
  public void setUp() throws Exception {
      DesiredCapabilities capabilities = new DesiredCapabilities();
      capabilities.setCapability("platform", "MacOS Big sur");
         capabilities.setCapability("browserName", "Chrome");
         capabilities.setCapability("version", "88.0"); // If this cap isn't specified, it will just get the any available one
      capabilities.setCapability("resolution","1024x768");
      capabilities.setCapability("build", "First Test");
      capabilities.setCapability("name", "Sample Test");
      capabilities.setCapability("network", true); // To enable network logs
      capabilities.setCapability("visual", true); // To enable step by step screenshot
      capabilities.setCapability("video", true); // To enable video recording
      capabilities.setCapability("console", true); // To capture console logs

      try {       
            driver= new RemoteWebDriver(new URL("https://"+username+":"+accesskey+"@hub.lambdatest.com/wd/hub"), capabilities);            
      } catch (MalformedURLException e) {
          System.out.println("Invalid grid URL");
      }
  }

  @Test
  public void testSimple() throws Exception {
     try {
            //Change it to production page
          driver.get("https://lambdatest.github.io/sample-todo-app/");

            //Let's mark done first two items in the list.
            driver.findElement(By.name("li1")).click();
          driver.findElement(By.name("li2")).click();

           // Let's add an item in the list.
            driver.findElement(By.id("sampletodotext")).sendKeys("Yey, Let's add it to list");
          driver.findElement(By.id("addbutton")).click();

            // Let's check that the item we added is added in the list.
          String enteredText = driver.findElementByXPath("/html/body/div/div/div/ul/li[6]/span").getText();
          if (enteredText.equals("Yey, Let's add it to list")) {
              status = true;
          }
      } catch (Exception e) {
          System.out.println(e.getMessage());
      }
  }


  @AfterTest
  public void tearDown() throws Exception {
     if (driver != null) {
          ((JavascriptExecutor) driver).executeScript("lambda-status=" + status);
          driver.quit();
      }
  }
}

The above code snippet contains a sample positive testCase which runs on TestNG. After writing the case, you need to right click in order to select 'Run as TestNG'.

An example of the output is shown below:

Screenshot 2021-03-03 at 7.36.07 PM.png

You can check the test details and logs from your LambdaTest account which further provides you with a detailed description, video recording, screenshots, exception details and what not...

Check it out here! Screenshot 2021-03-05 at 2.51.22 PM.png

Browser testing is all about experimenting with your application on various browsers and their versions. These specifications must be specified within the desired capabilities which takes on a vital part in this process.

No worries! LambdaTest has special seat for desired capabilities, where you can set your capabilities easily.

Screenshot 2021-03-03 at 8.00.23 PM.png

The above image shows where you can view options to select OS, Resolution, Browser, Version etc.

Now, let's look at what happens when things go wrong...

In this scenario, the user is trying to login without login credentials:

@Test
  public void testLambdaNegative() throws Exception {
    driver.get("https://www.lambdatest.com/selenium-automation");
    driver.findElement(By.linkText("Log in")).click();
    driver.findElement(By.xpath("//button[@type='submit']")).click();
  }

You get to see the detailed error logs and exceptions on LambdaTest if a scenario fails.

Screenshot 2021-03-05 at 8.47.48 AM.png

Note: Katalon recorder would be very helpful to record the steps. You can further convert that into code in the required language for faster testing.

To Summarize:

Let's wrap up with a short summation of the above tutorial:

  • Clean UI and user friendly.
  • Supports selenium automation.
  • Supports multiple browsers.
  • Supports for local app testing.
  • Provides relative screenshots, video recording and detailed descriptions.
  • Integration with JIRA, GitHub etc.
  • Pocket friendly pricing.
  • Customer chat support.

To explore more about LambdaTesting, click here.

I hope this article has proved to be useful and thank you for your valuable time!!✌🏻