Forem: HaritaLT

How To Download Files Using JavaScript and Selenium

HaritaLT — Fri, 30 Sep 2022 08:10:26 +0000

Downloading files is one of the most popular features utilized by Internet users worldwide. Almost all web applications provide a feature that allows users to download a file from the web page. It has many use cases, from downloading your favorite music or video files to invoices and bank statements.

If you are an automation tester fixated on Selenium automation testing, the chances are that you might run into a requirement of testing a feature around downloading files. While being a powerful tool for performing automated browser testing, Selenium natively doesn’t support download functionality. However, we can easily use Selenium to deal with file download, and this blog explores the exact scenario!

In this Selenium JavaScript tutorial, you will learn how to download files using JavaScript and Selenium WebDriver.

Let’s get started!

Challenges and Solutions in downloading files with Selenium

Selenium is a popular open-source tool that is used to automate web browsers. Selenium WebDriver comes with an exhaustive list of native functions that allows automation testers to effortlessly execute a wide variety of user interactions on the web application like click, type, drag and drop, etc. But when it comes to automating a feature like downloading files, things are not quite straightforward.

One obstacle that testers face while downloading files with Selenium is that every web browser offers a different UI when downloading a file. Even though there is no easy way to control the browser’s native dialogs by JavaScript, there is a workaround for it.

The solution is to trick the browser profile. By leveraging the browser profile setting, you can download files in Selenium WebDriver without interacting with the download window pop-up.

In this blog on how to download files using JavaScript, let us learn how to write automation test code to download a file using JavaScript and Selenium.

How to download files using JavaScript and Selenium?

We will be automating the following test scenario to download files using JavaScript and Selenium:

Step 1: Go to the website File Download Demo for Automation.
Step 2: Enter data in the textarea.
Step 3: Click the “Generate File” button to generate the text file.
Step 4: Click the “Download” link to download the file.

Prerequisites to download files using JavaScript

Before getting started with coding, ensure that you have the following prerequisites installed in your system to download files using JavaScript and Selenium:

Install Node.js and NPM.
Install Eclipse and IntelliJ (or any IDE of your choice).

Installation and basic project setup

In this section of this article on how to download files using JavaScript, I will be explaining briefly how to do a basic project setup for automation testing with Selenium JavaScript. Feel free to skip this section if you already have a working project.

Step 1: Create a project folder in the desired location in your system. Open the folder in your IDE.

Step 2: Initialize the project in this folder. Run the following command.

npm init -y

Step 3: Install the project dependencies. We need to install Selenium WebDriver and browser drivers. Here, I am installing the driver for the Chrome browser.

npm install --save selenium-webdriver chromedriver

With this, the project setup is now completed, and the package.json file is generated in the root folder.

Step 4: To maintain the test cases, create a new folder called tests. We will be storing our test files inside this folder.

My project folder structure now looks like this:

Accelerate JavaScript Automation with Parallel testing. Try LambdaTest Now!

Writing test case to download files using JavaScript

Now, it is time to write the code! For downloading a file using Selenium, we will be making use of the click() method. The automation steps are detailed below:

Step 1: Create a test file testOne.js inside the tests folder.

Step 2: Inside testOne.js, pull all the required functions from node_modules.

const { By, Key, Builder } = require("selenium-webdriver");
require("chromedriver");

Step 3: Create a function example(), which will be containing your test script. Feel free to provide any function name of your choice.

async function example() {

}

Step 4: Inside the function, let us write our test script using Selenium and JavaScript.

async function example() {
  //To wait for browser to build and launch properly
  let driver = await new Builder().forBrowser("chrome").build();

  try {
    //To go to the test website from the browser with our code.
    await driver.get("[http://demo.automationtesting.in/FileDownload.html](http://demo.automationtesting.in/FileDownload.html)");

    //To enter data inside the text area
    await driver
      .findElement(By.id("textbox"))
      .sendKeys("I love testing!", Key.RETURN);

    //To click on "Generate File" button
    await driver.findElement(By.id("createTxt")).click();

    //To click on "Download" link
    await driver.findElement(By.id("link-to-download")).click();

    //Wait for 5s till download is completed
    await driver.sleep(5000);
  } catch (e) {
    console.log("Error Occured:", e.name);
  }
  //It is always a safe practice to quit the browser after execution
  await driver.quit();
}

To locate the Web Elements, I have made use of the Chrome Developer Tools.

Step 5: Now simply add the function call. The full implementation is given below

const { By, Key, Builder } = require("selenium-webdriver");
require("chromedriver");

async function example() {
  //To wait for browser to build and launch properly
  let driver = await new Builder().forBrowser("chrome").build();

  try {
    //To go to the test website from the browser with our code.
    await driver.get("http://demo.automationtesting.in/FileDownload.html");

    //To enter data inside the text area
    await driver
      .findElement(By.id("textbox"))
      .sendKeys("I love testing!", Key.RETURN);

    //To click on "Generate File" button
    await driver.findElement(By.id("createTxt")).click();

    //To click on "Download" link
    await driver.findElement(By.id("link-to-download")).click();

    //Wait for 5s till download is completed
    await driver.sleep(5000);
  } catch (e) {
    console.log("Error Occured:", e.name);
  }
  //It is always a safe practice to quit the browser after execution
  await driver.quit();
}

example();

Step 6: Run the code. Make sure that the IDE terminal is pointed towards the tests folder location and execute the following command in the terminal.

node testOne.js

The test starts running and an instance of Chrome browser is instantiated.

The test gets executed successfully and the file is downloaded to your default Downloads folder location.

Pace-up your releases and ship quality products faster. Try LambdaTest Now!

Do you want to learn more about the exciting world of JavaScript automation testing? Deep dive into how Selenium WebDriver with JavaScript can be used for automated testing of web applications with this video tutorial:

Check out this blog, Emulator vs Simulator vs Real Device Testing: Key Differences

How to download files to a specific folder using JavaScript and Selenium?

Rather than downloading into the default Downloads folder, sometimes you might need to download the files to a specific folder location for storing and verifying all the downloads. In this section of this article on how to download files using JavaScript, let us learn how to configure the code to set the browser file Download directory for Chrome driver using Selenium and JavaScript.

Step 1: Make the following two additional imports in our previous code.

const chromeDriver = require("selenium-webdriver/chrome");
const webdriver = require("selenium-webdriver");

Step 2: Define Chrome options. Inside setUserPreferences, set your custom download path.

var options = new chromeDriver.Options();
  options.setUserPreferences({
    "download.default_directory": "your\download\folder\path",
  });

For example,

"download.default_directory": "D:\\Test",

Step 3: Redefine your driver instance.

var driver = new webdriver.Builder()
    .withCapabilities(webdriver.Capabilities.chrome())
    .forBrowser("chrome")
    .setChromeOptions(options)
    .build();

The full implementation is as shown below.

const { By, Key, Builder } = require("selenium-webdriver");
require("chromedriver");

const chromeDriver = require("selenium-webdriver/chrome");
const webdriver = require("selenium-webdriver");

async function example() {
  //To set chromeOptions
  var options = new chromeDriver.Options();
  options.setUserPreferences({
    "download.default_directory": "D:\\Test",
  });

  //To wait for browser to build and launch properly
  var driver = new webdriver.Builder()
    .withCapabilities(webdriver.Capabilities.chrome())
    .forBrowser("chrome")
    .setChromeOptions(options)
    .build();

  try {
    //To go to the test website from the browser with our code.
    await driver.get("http://demo.automationtesting.in/FileDownload.html");

    //To enter data inside the text area
    await driver
      .findElement(By.id("textbox"))
      .sendKeys("I love testing!", Key.RETURN);

    //To click on "Generate File" button
    await driver.findElement(By.id("createTxt")).click();

    //To click on "Download" link

    await driver.findElement(By.id("link-to-download")).click();

    //Wait for 5s till download is completed
    await driver.sleep(5000);
  } catch (e) {
    console.log("Error Occured:", e.name);
  }
  //It is always a safe practice to quit the browser after execution
  await driver.quit();
}

example();

Step 4: Run the code.

node testTwo.js

The test gets executed successfully, and the file is downloaded to the specific path mentioned.

If you are a JavaScript developer, this certification will certify your competence as an in-depth, hands-on JavaScript automation pro.

Here’s a short glimpse of the Selenium JavaScript 101 certification from LambdaTest:

Check this out: Dev Tools for Safari

How to download files using JavaScript and cloud Selenium Grid?

In the above demo test scenarios, we learned how to download files using JavaScript and Selenium WebDriver to our local systems and execute our tests in the Chrome browser.

However, most Selenium testing projects use online Selenium Grid to achieve cross browser testing and better test coverage to ensure that the test is working fine in all major browser-OS-device combinations.

In this section of this article on how to download files using JavaScript, let us learn how to execute our code in the cloud-based Selenium Grid provided by LambdaTest.

LambdaTest is a cross browser testing platform that provides an online browser farm of 3000+ browser and OS combinations and an online Selenium Grid that you can integrate with your current test project via minimum code changes. LambdaTest scalable cloud infrastructure helps you perform web testing and web application testing across real desktop and mobile browsers. You can execute your JavaScript automation tests instantly on LambdaTest cloud, without worrying about building or maintaining an in-house device lab.

Subscribe to the LambdaTest YouTube channel when you want to catch up with the latest news on automated browser testing, automated UI testing, etc.

Follow along to learn how!

Step 1: Create a free account on LambdaTest and secure your unique username and access key.

Step 2: Inside the test file, define all the required variables for connecting with the Remote Grid like your unique username, access key, grid host, remote grid URL etc.

const USERNAME = "YOUR_USERNAME"; //replace with your username
const KEY = "YOUR_ACCESSKEY"; //replace with your accesskey

const GRID_HOST = "hub.lambdatest.com/wd/hub";

const gridUrl = "https://" + USERNAME + ":" + KEY + "@" + GRID_HOST;

Step 3: Pass the browser capabilities. You can generate your custom desired capabilities using LambdaTest Capabilities Generator.

var capabilities = {
    "LT:Options": {
      user: USERNAME,
      accessKey: KEY,
      build: "JavaScript and Selenium Testing",
      name: "Download File",
      platformName: "Windows 11",
      selenium_version: "4.1.0",
      driver_version: "99.0",
    },
    browserName: "Chrome",
    browserVersion: "99.0",
  };

Here, I am configuring my test to run in Chrome Browser version 99.0 with Windows 11 OS using the latest Selenium 4.

Step 4: The configuration is completed. Our final code now looks like this.

const USERNAME = "YOUR_USERNAME"; //replace with your username
const KEY = "YOUR_ACCESSKEY"; //replace with your accesskey

const GRID_HOST = "hub.lambdatest.com/wd/hub";

const { By, Key, Builder } = require("selenium-webdriver");

async function example() {

  var capabilities = {
    "LT:Options": {
      user: USERNAME,
      accessKey: KEY,
      build: "JavaScript and Selenium Testing",
      name: "Download File",
      platformName: "Windows 11",
      selenium_version: "4.1.0",
      driver_version: "99.0",
    },
    browserName: "Chrome",
    browserVersion: "99.0",
  };

  const gridUrl = "https://" + USERNAME + ":" + KEY + "@" + GRID_HOST;

  //To wait for browser to build and launch properly
  let driver = await new Builder()
    .usingServer(gridUrl)
    .withCapabilities(capabilities)
    .build();

  try {
    //To go to the test website from the browser with our code.
    await driver.get("http://demo.automationtesting.in/FileDownload.html");

    //To enter data inside the text area
    await driver
      .findElement(By.id("textbox"))
      .sendKeys("I love testing!", Key.RETURN);

    //To click on "Generate File" button
    await driver.findElement(By.id("createTxt")).click();

    //To click on "Download" link

    await driver.findElement(By.id("link-to-download")).click();

    //Wait for 5s till download is completed
    await driver.sleep(5000);
  } catch (e) {
    console.log("Error Occured:", e.name);
  }
  //It is always a safe practice to quit the browser after execution
  await driver.quit();
}

example();

Step 5: Run the code.

node testThree.js

The test starts running. Go to the LambdaTest Dashboard to observe the live running status.

Our test got executed successfully. You can analyze the detailed report containing video and logs.

Moreover, you can navigate to the LambdaTest Analytics Dashboard to see test performance metrics. You can see the total number of tests passed or failed from the Test Summary section. You can also see the snapshot of consistent tests from the Test Overview section.

Check this out: Developer Tools for Safari

Conclusion

File Download is a common feature offered by most web applications. In this tutorial on how to download files using JavaScript and Selenium, we explored how to write an automation test case for downloading a file using JavaScript and Selenium WebDriver.

Additionally, we explored edge cases like how to download files using JavaScript to a specific folder and how to run our tests using an online Selenium Grid for better test coverage and cross browser testing. I hope this tutorial turned out to be beneficial!

Happy Testing!

Running Your First Test With NightWatchJS

HaritaLT — Tue, 07 Jun 2022 17:52:21 +0000

In the world of automation testing, Selenium continues to be the most sought after tool. With shorter development cycles and faster releases backed by Agile and DevOps, companies are keen on adopting the right automation testing strategy on par with the development and ensure a high-quality end product. Speeding up automation testing means choosing a plan that aids in handling repetitive work and optimizing tasks with minimal maintenance and effort. And herein lies the importance of implementing the right test automation framework.

Various test automation frameworks are available in the market to choose from. Nightwatch.js is one such well-favored JavaScript-based framework since its release in 2014. This blog will be your guide to everything you need to know to kickstart your journey in Nightwatch.js for Selenium automation testing.

Starting with a brief overview, our primary focus in this Nightwatch.js tutorial would be setting up and configuration of Nightwatch.js into your system. And by the end, you will be able to write your first test in Nightwatch.js Selenium.

Let’s get started!

What Is Nightwatch.js?

Nightwatch.js is an open-source automated testing framework for browser-based web applications and websites. It is written in Node.js runtime and uses the W3C WebDriver API (formerly Selenium WebDriver) for interacting with various browsers to perform commands and assertions on DOM elements.

Why Is Nightwatch.js So Popular?

The reason behind Nightwatch.js popularity is its out of the box features. Some of the noteworthy features that make Nightwatch.js so popular are:

Easy To Use— with a clean and simple syntax, code can be written swiftly and efficiently.
In-Built Test Runner— comes with an inbuilt command-line test runner suite with Grunt support for executing Selenium automated tests.
Page Object Model— supports CSS and XPath locators making browser automation more manageable.
Flexibility— enables unit, integration as well as end-to-end testing.
Selenium Server Support— it can automatically control the standalone Selenium server or various browser web drivers.
Integrations— provides a single integrated solution for application testing, eliminating the dependency on third-party software.
Support For Cloud Services— compatible with cloud-based testing platforms like LambdaTest.
Continuous Integration— supports software like Jenkins, TeamCity, etc., assisting developers in continuously building and testing software.

Nightwatch.js Installation & Local Set Up

It is time to proceed with the installation and environment set-up for Nightwatch.js automation. We will be going step by step from the beginning. But, before installing Nightwatch.js, make sure your system is pre-equipped with the following.

Prerequisites:

a) Java

Check whether Java is already installed in your system using the following command:

If not, install the latest JDK appropriate to your machine from here.

b) Node.js & NPM

Check whether Node.js is already installed in your system using the following command:

If not, install the latest LTS version from here.

Note: NPM will be installed along with Node.js. So no need for separate installation.
After installation, verify the version of Node.js and npm using these commands:

c) Visual Studio Code

Here, we are using Visual Studio Code as the IDE. You can choose any other IDE of your choice.

If not already installed, you may download VSC from here.

Installing Nightwatch.js & Project Setup

Now let’s proceed with Nightwatch.js installation and basic project configuration. As promised, we will go step by step.

Step 1: Create a folder for your project in the desired location in your system. Open the folder in your IDE.

Step 2: Now, let us initialize our project with the package.json file.

Open the terminal in Visual Studio Code.
Verify that it is pointing to the project folder location.
Give the command:

npm init

You will be asked to fill in project details. You may fill them or leave them blank as of now.

You will also notice the package.json file is created in your project folder, containing all the project configuration details.

Tip: Save some time by using the following command in order to generate a default package.json file without any questions being asked.

npm init -y

Here y stands for “yes”.

We have successfully created the package.json file.

Step 3: Let’s install Nightwatch.js to our project.

npm install --save-dev nightwatch

This command will add the “node_modules” folder in your directory and download Nightwatch.js to save it as devDependency in package.json.

You will also notice that the “package-lock.json” file has been created as well. This file is used to lock all the dependencies with the version number so that it will be easier to set up the code in another system.

Tip: You may also install Nightwatch.js globally so that it is accessible for all the projects located anywhere within the system.

npm install --save-dev nightwatch -g

Here g stands for “global”.

Step 4: Now let us install our browser web driver.

a) ChromeDriver

npm install --save-dev chromedriver

b) GeckoDriver (Firefox)

npm install — save-dev geckodriver

Or why not install them all in one go?

$ npm i nightwatch geckodriver chromedriver — save-dev

Tip: Alternatively, we can combine steps 4 and 5 into a single step. Use the command:

npm install — save-dev nightwatch chromedriver

It is to be noted that, while the Selenium Server was required with older Nightwatch versions (v0.9 and prior), starting with version 1.0 Selenium is no longer necessary.

The setup is now completed! Let’s run some demo tests now!

Running A Demo Test

Do you know Nightwatch.js comes with some sample tests? Shall we try running that? That’s what this section of our Nightwatch.js tutorial is all about.

Let us begin-

Step 1: Go to the folder “node_modules/nightwatch/examples/tests/”.

Step 2: Under the ‘tests’ folder, you can find some sample tests.

Step 3: Let us run the first sample test “ecosia.js”.

This is a simple, straightforward program which-

Launches the default browser
Opens the search engine “Ecosia”
Inputs “nightwatch” in search field
Verifies the search result.

Let’s go for it!

Step 4: In the terminal run the command:

./node_modules/.bin/nightwatch node_modules/nightwatch/examples/tests/ecosia.js

Here, “./node_modules/.bin/nightwatch” represents the path of nightwatch.js executable.

“node_modules/nightwatch/examples/tests/ecosia.js” gives the path of the test file.

Step 5: The code gets executed, and the test starts running. Default browser will get launched, and the test gets executed successfully.

Step 6: Observe the test run result in your terminal.

Congrats! Nightwatch is now successfully configured in your system.

Nightwatch.js Tutorial For Test Automation Beginners — With Examples

Writing Your First Nightwatch.js Automation Test Script

In the previous section, we were able to run a demo test successfully. But we need to write our own scripts, don’t we?

Now that we have got a basic hand-on, it’s time to get our hands dirty. In this session, we will be writing and running our very first test file using Nightwatch.js automation. Let’s check out the configurations that need to be done.

Configurations

Our goal is to run our test files using the “npm test” command from the project’s base directory. Also, we are setting Chrome as our default browser in the example. But feel free to use the browser of your choice.

Now let’s start step by step.

Step 1: Let us create two folders in our root directory — “tests” for keeping test files and “reports” where reports will get stored after each test run.

(You can provide any folder name of your choice. However, it should be properly mapped in the nightwatch.json file about which we will discuss in step 3.)

Step 2: In your package.json file, replace “scripts — test” to “nightwatch”.

“scripts”: {
  “test”: “nightwatch”
}

Step 3: In root, create a “nightwatch.json” file. Paste the following snippet.

{
    "src_folders" : "tests",
    "output_folder" : "reports",

    "webdriver" : {
        "start_process": true,
        "server_path": "node_modules/chromedriver/lib/chromedriver/chromedriver.exe",
        "host": "localhost",
        "port": 4444
      },
      "test_settings" : {
        "default" : {
            "desiredCapabilities" : {
                "browserName" : "chrome"            
              }           
          }
      }
}

The “nightwatch.json” is the configuration file which the nightwatch test runner binary expects.

Let’s have a close look into the above code structure of “nightwatch.json”.

**src_folders:* indicates the location that contains the test suites. You can also give an array of folders. If not specified, we should pass the test location inline as the second argument to the test runner, as we did in our demo test.

**output_folder:* indicates the location where test reports get saved, i.e., JUnit report files, XML reports, test logs, selenium log, screenshots, video logs, network logs, etc.

**webdriver:* an object containing WebDriver related configuration options.

**start_process:* a boolean value that indicates that, once we start our test, the nightwatch will automatically start/stop the webdriver instance in the background as a child process.

**server_path:* Here, we are giving the path of the chrome driver executable. Only useful if start_process is enabled.

**host:* We are using localhost for running our test. Mainly needed when the WebDriver service is running on a different machine.

**port:* The port number on which the WebDriver service will listen and/or on which Nightwatch will attempt to connect.

**test-settings:* Defines the browser we want to use.

You may also create “nightwatch.conf.js” for configuration. If both these files are present in the project, the nightwatch.conf.js file will be given more precedence over nightwatch.json.

Step 4: Configurations are done. Now let us write our first test.

Writing Nightwatch.js Automation Tests?

We have already created a “tests” folder. Now we will be creating test files inside this folder. Each file inside it will be loaded as a test suite by the Nightwatch test runner. Let’s start!

Step 1: Create a test file and name it as — testfile1.js

Step 2: Let’s create the test structure.

module.exports = {

}

Step 3: Inside each file, the test runner will look for different keys that are exported. The key is basically the test case name. Each key is mapped to a function in which the browser instance will be passed as an argument.

module.exports = {
"Get URL and title" : function(browser) {
}

Step 4: Inside this function, we write our test code. Let’s see the snippet below:

module.exports = {
    "Get URL and title" : function(browser) {
     browser
     .url("[http://www.google.com](http://www.google.com)")
     .assert.urlContains("google")
     .assert.title("Google")
     .pause(3000);
       }
}

Here we are trying to launch Google and verify that the title and URL of the output page match the expected result. Simple and straightforward.

Let’s understand the code now.

**url() *— navigate to a specific URL.

**urlContains() *— checks if the current URL contains the given value.

**title() *— checks if the page title equals the given value.

**pause() *— suspends the test for the given time in milliseconds.

**assert *— when an assertion fails, the test ends, skipping all other assertions.

Step 5: Now it’s time to run the code. Go to the terminal. Verify you are in the project base directory. Give the following command:

npm test

The test will start running, and the browser will be launched.

All assertions are passed. Congrats, you have successfully written your first test code!

Step 6: Check out the reports generated in your “reports” folder.

In this sample test case, we have explored only a few commands. Feel free to explore more by visiting the official API documentation.

Parallel Testing Using Nightwatch.js

We can enable parallel testing in Nightwatch.js using a quick and simple configuration in our “nightwatch.json” file.

"test_workers": {
        "enabled": true,
        "workers": "auto"
      },

By enabling “test_workers” to be true, we are enabling parallel testing. Let’s look into the steps now:

Step 1: Add the above code in your “nightwatch.json” file.

Step 2: Create an additional test file in the “tests” folder for running in parallel with the first test file.

Step 3: In the Terminal, give the command:

npm test

Step 4: Two browser windows get launched, executing the test files in parallel.

Step 5: After execution, observe the reports generated.

Do you know CSS inline-block display a single element as a block while flowing text around it.

Cross Browser Testing & Test Coverage Across Devices

We came to a detailed understanding of Nightwatch.js setup and test execution in our local machine through the previous sections of this Nightwatch.js tutorial. We have also created our first test file, did parallel testing, and generated reports.

But to stay ahead in a highly competitive market, it is our duty as testers to ensure the quality of the application in all scenarios, i.e, the app should behave as expected across all platforms, browsers, and devices without crashing. This is where the terms test coverage and cross browser testing comes into the picture.

To leverage the test coverage, cloud-based solutions are widely adopted by companies due to various merits like:

Low investment cost compared to buying the infrastructure.
Provides access to hundreds of device and platform combinations.
Extends supports to old and outdated browser versions and OS devices
No set-up or installation, or maintenance needs to be done locally.
Scalability.

When it comes to distributed test execution, Selenium Grid is always a good call. It has the capability to run test cases on different versions of browsers and different operating systems simultaneously.

Hence, using a combination of Selenium Grid with the right cloud-based solution provider for cross browser compatibility testing is the optimum strategy that you can deploy to assure quality. Now let us see how we can perform automated browser testing using a remote Selenium Grid provided by LambdaTest.

Check this out- CSS min/max-width/height: Use min-width, max-width, min-height, and max-height to set a minimum or maximum width, or minimum or maximum height for an element.

Test Execution With Selenium Grid Cloud

LambdaTest is trusted by 100,000 companies worldwide as a reliable online Selenium Grid provider to fulfill their cross browser testing needs. LambdaTest provides you access to 2000+ browsers for both mobile and desktop to help you gain the maximum test coverage during the automated browser testing.

You can even leverage parallel testing with Selenium automation testing, along with our open Selenium API to help you extract test reports of your Selenium script execution over LambdaTest, effortlessly.

Now, let us try and execute the above test case using the remote WebDriver for LambdaTest’s Selenium Grid cloud. You can achieve this using a few simple and easy steps with few changes in your existing script for local setup. Let’s look into it step by step.

Step 1: We need to pass browser and environment details to the LambdaTest Selenium Grid via the desired capabilities class. Unlike in local setup, now we have the flexibility to choose the precise settings we want.

There is a helpful tool provided by LambdaTest to generate desired capabilities based on the combination we want. Visit LambdaTest Desired Capabilities page to generate them.

In this case, the desired capabilities class in nightwatch.json will look like this:

"desiredCapabilities": {
       "build":"Nightwatch-Selenium--Test",
       "platform" : "Windows 10",
       "browserName" : "Chrome",
       "version" : "87.0",
       "selenium_version" : "3.13.0",
        "geoLocation" : "IN",
        "chrome.driver" : "87.0",
    }

Step 2: Now you need to fetch your unique Access token and username.

Step 3: Log in to LambdaTest or create your account. A unique access token will be created for you.
This token is used as a secret key to link your local scripts with the LambdaTest platform.

There are 3 ways to find it:

If already logged in, from the Capabilities generator page, you can fetch it.

2- You can also fetch the details from the Profile section.

3- Or from the Automation dashboard page, by clicking the key button in the top right corner.

Step 4: Paste the following snippet in your nightwatch.conf.js file. (If not created already, you can create this file in your root)

Here we are declaring the user configuration for an access key, username, host, and port for the test.

module.exports = (function(settings) {
    console.log(settings["test_settings"]["default"]["username"])
    if (process.env.LT_USERNAME) {
      settings["test_settings"]["default"]["username"] = process.env.LT_USERNAME;
    }
    if (process.env.LT_ACCESS_KEY) {
      settings["test_settings"]["default"]["access_key"] = process.env.LT_ACCESS_KEY;
    }
    if (process.env.SELENIUM_HOST) {
      settings.selenium.host = process.env.SELENIUM_HOST;
    }
    if (process.env.SELENIUM_PORT) {
      settings.selenium.host = process.env.SELENIUM_PORT;
    }
    return settings;
  })(require('./nightwatch.json'));

Step 5: Configure your nightwatch.json file. Since we are using LambdaTest, why don’t we go for cross browser testing across multiple platforms?

In this code, we are configuring for the script to run across 3 browsers — Chrome, Firefox, and Safari on 2 different platforms — Windows and macOS.

Check out the code below and let’s look into the required changes and additions to be made on your existing file:

{
  "src_folders" : "tests",
  "output_folder" : "reports",

  "test_workers": {
    "enabled": true,
    "workers": "auto"
  },
  "selenium" : {
    "start_process" : false,
    "server_path" : "",
    "log_path" : "",
    "host" : "hub.lambdatest.com",
    "port" : 80,
    "cli_args" : {
    "webdriver.chrome.driver" : "",
    "webdriver.ie.driver" : "",
    "webdriver.firefox.profile" : ""
    }
  },
  "test_settings" : {
    "default" : {
    "launch_url" : "[http://google.com](http://google.com)",
    "selenium_port"  : 80,
    "selenium_host"  : "[https://lambdatest.com](https://lambdatest.com)",
    "silent": false,
    "screenshots" : {
        "enabled" : true,
        "path" : ""
    },
    "username" : "haritagr16",
    "access_key" : "123456789",

    "skip_testcases_on_fail": false,

    "desiredCapabilities": {
       "build":"Nightwatch-Selenium--Test",
       "platform" : "Windows 10",
       "browserName" : "Chrome",
       "version" : "87.0",
       "selenium_version" : "3.13.0",
       "visual":true,
        "video":true,
        "console":true,
        "geoLocation" : "IN",
        "chrome.driver" : "87.0",
        "network":true
    }
    },
    "chrome": {
    "desiredCapabilities": {
        "platform": "Windows 10",
        "browserName": "chrome",
        "version": "87.0"
    }
    },
    "safari" : {
    "desiredCapabilities": {
        "platform": "macos 10.13",
        "browserName": "safari",
        "version": "11.0"
    }
    },
    "firefox" : {
    "desiredCapabilities": {
        "platform": "win10",
        "browserName": "firefox",
        "version": "60"
    }
    },
    "edge" : {
    "desiredCapabilities": {
        "platform": "Windows 10",
        "browserName": "MicrosoftEdge",
        "version": "17.0"
    }

    }
  }
}

Pass your Access Token and User details.
Provide Desired Capabilities for all the browsers.
Set the Hostname corresponding to LambdaTest.
Optionally we have also enabled report formats like video recording, console, network logs, etc., to be true.

A more detailed explanation is given below but feel free to skip to Step 6.

We have used additional parameters to configure “nightwatch.json” for cloud-based cross browser testing. They are:

selenium *— an object containing Selenium Server related configuration options. If “selenium*” is not used, “webdriver*” options should be set instead (as we did in our local set up). Starting with Nightwatch 1.0, Selenium is only required when testing against a grid setup or a cloud testing service such as LambdaTest.

**cli_args *— list of CLI args to be passed to Selenium process, basically browser drivers.

**test_settings:*

*silent *— whether to show the extended HTTP traffic command logs from the WebDriver or Selenium server.
*desiredCapabilities *— an object to specify browser name for instance along with other capabilities.
*username and access_key *— Usually only needed for cloud testing Selenium services. In case the server requires credentials these values will be used to compute the Authorization header.

Step 6: In package.json, change the “ scripts — test” argument value.

This is important as it is here where we are specifying the browsers where we need to run our test.

"scripts": {
        "test": "./node_modules/.bin/nightwatch -e firefox,safari,chrome tests"
      }

Step 7: Execute the test.

npm test

The code starts running and logs can be observed in the terminal.

To observe live running status go to your Automation dashboard in LambdaTest.

We can analyze individual test run reports from Automation Logs.

We have successfully run our test cases using an automated cross browser testing solution provided by LambdaTest through a hassle-free experience!

Do you know CSS justify-content: space-evenly value spreads the space between items evenly. It is similar to space-around, however it gives equal room on the edges rather than half-sized space. It can be used in both CSS flexbox and CSS grid.

Conclusion

Nightwatch.js is one of the most in-demand Selenium Javascript-based automation testing frameworks known for its simplicity and integrated features. In this blog, we have looked into Nightwatch.js installation and setup, along with a detailed walkthrough on configurations. Additionally, we have also leveraged our automation testing by adopting test coverage concepts and cross browser testing.

Hopefully, this Nightwatch.js tutorial will enable you to kickstart your journey in Nightwatch.js automation. If you wish to optimize your web application quality by unlocking coverage in a wider variety of platforms or browsers or versions, feel free to explore the LambdaTest platform.

Happy testing!

Angular Testing With Jasmine And Karma Using Selenium [Tutorial]

HaritaLT — Mon, 06 Jun 2022 17:10:11 +0000

Software testing is the best way to prevent software defects and plays an important role in the Software Development Life Cycle (SDLC). It is a critical step in software development, and can be achieved using various testing methods. Different testing approaches like Selenium automation testing, performance testing, and automated Unit testing can be chosen based on your application’s testing requirements.

Software testing is often considered to be a task of the QA team. However, developers can also write tests for their code to ensure the individual components or “units” of the software are working correctly and this is called Unit testing. As shown below, Angular is considered as the preferred test framework for automation testing. In this blog, we deep dive into how to perform Angular testing with Jasmine and Karma.

Various Unit testing frameworks for Selenium automation like Angular are available making it easy for developers to write their own Unit tests cases. Angular is considered to be one of the best web development frameworks. It comes with in-built Unit testing tools like Jasmine and Karma for automated Unit testing.

In this Angular testing tutorial, we discuss in-depth the benefits of Unit testing and how to perform Angular testing with Jasmine and Karma using Selenium.

With the assumption that you are comfortable with Typescript and Angular applications, let’s get started!

Now perform live interactive manual testing of your Angular websites on LambdaTest.

Do you know CSS grab & grabbing cursors adds support for the css 3 cursor property. It is useful to indicate that something can be grabbed (dragged to be moved).

Introduction to Unit Testing

Unit testing is a type of software technique where individual units or components of an application are tested to ascertain they are working as expected. Unit tests are typically automation tests written and run by the software developer during the coding phase to test standalone modules of the application for its functional correctness. A unit can be an individual function, method, procedure, module, or object.

The main goal of Unit testing is to break the application source code into isolated units to identify, analyze and fix the defects arising from that particular unit. Testing a unit in isolation means testing without external resources like API endpoint or database. Instead, substitutes such as stub methods, mock objects or fakes will be used to harness a fake response and test code will be written based on that.

Example: A library named Moxios is used to mock API calls using Axios.*

Developers and product owners often overlook Unit testing by pointing out limited development time and resources as reasons, making them proceed without it. And yes, this seldom works out. But the companies that are serious about the quality delivery of their product understands the significance of Unit testing and is diligent in enforcing it.

Since we are talking about Unit testing, it is also worth mentioning the most popular approaches that are used in combination with it — Test-Driven Development (TDD) and Behaviour-Driven Development (BDD).

Benefits of Unit testing

Unit testing is becoming more popular in the web development world. According to the reports presented by the fourth annual Developer Ecosystem Survey (2020) conducted by JetBrains, 77% of the developers stated that testing is an integral part of the development process in their companies or teams. Furthermore, 68% voted for Unit testing as the most popular approach.

Larger or smaller, every project can enjoy the benefits of Unit testing. A few significant advantages are listed below:

Helps identify and fix bugs early in the development cycle and save costs.
Forces developers to improve the design of implementations as it is difficult to write unit tests for poorly written code.
Ensures the developer that the new feature added is not breaking the existing code hence giving confidence in code quality.
Simplified debugging fails; only the latest code needs to be if the test fails debugged.
Aids in overall faster development.
Allows better refactoring of code.
Good Unit testing can even serve as project documentation. Developers, especially those who newly joined the team, can look at the unit tests to learn about the functionality provided by the unit, how to use it etc.

Limitations of Unit testing

It is equally important to understand the limitations of Unit testing. A few are listed below:

It is impossible to catch every error in the program using Unit testing as it cannot evaluate every execution path. It cannot catch integration errors, complex broad system errors or non-functional attributes like usability, scalability, performance etc.
The difficulty of setting up realistic and relevant unit tests. If they are not set correctly, it can diminish the value and accuracy of test results.
If the Unit test involves just passing input and verifying the output for a method, it tends to be easy to create. However, it is not so simple if it includes something more complex like interaction with an external resource.

Do you know CSS3 Colors is a small, lightweight and modular color library that allows you to describe RGB and HSLA with arrays, as well as set transparent colors via rgba() and hsla().

Unit testing With Angular Framework

Since Unit testing has become an integral part of development, all the major development frameworks now come with support for Unit testing. Numerous testing libraries and frameworks are available to reduce the amount of time taken to write tests.

In the further section of Angular testing with Jasmine and Karma tutorial, you will learn how to test Angular applications with Karma Testrunner and Jasmine framework using Selenium.

But before that, let us know and understand why we are using them.

Why Karma?

Karma is the default test runner for applications created using Angular CLI. Being a direct product of the AngularJS team, Karma is very well suited for testing Angular or any other JavaScript-based project. Running on Node.js, Karma test runner can be seamlessly integrated with testing frameworks like Jasmine, Mocha, QUnit and integration services like Jenkins, CircleCI, TravisCI etc. In addition, it allows you to run your automated tests on various browsers and devices.

Karma uses a configuration file to set the startup file, the testing framework, the reporters, the browser and other things. It aims to bring a productive testing environment to developers by spending less time on setting up the configurations but more time on coding. Additionally, there is also good online documentation.

The NPM package download trends show that even in 2021 Karma is the most popular Test Runner for Angular Testing.

Why Jasmine?

Jasmine is a testing framework for JavaScript that supports the Behavior-Driven Development (BDD) practice. It plays very well with Karma and is part of the default setup with Angular CLI. Jasmine is known to be feature-rich and provides easy integration with reporting. Also, it provides additional functions such as fakes, spies and pass-throughs. We will be performing Angular Testing with Jasmine.

Behaviour-Driven Development (BDD) is a testing practice that focuses on the application’s behavior. BDD allows you to write tests in human-readable (simple English) format so that even non-technical people can easily understand what is being tested. This plain English format used to write BDD test scenarios is known as the **Gherkin **language.

The BDD tests can act as living test documentation that is easy to maintain and can be consumed by all team members including product owners, business analysts, developers, testers, etc.

We will be writing our unit tests using Jasmine following the BDD approach. Then using Karma test runner, we can trigger the test execution from the CLI. Karma also has a watch mode that can automatically detect changes in development files and re-runs the test. Don’t worry! You will reach a better understanding once you start writing the unit tests.

Why Selenium?

Although Selenium is a tool that needs no introduction among software testers, because this article is primarily aimed at developers, let us first specify what is Selenium.

Selenium is a free open-source test automation framework that is used to automate web browsers. It allows you to validate websites and web apps across multiple devices, browsers and OS to ensure it is working properly as expected. Selenium Webdriver and Selenium Grid are the integral components of the Selenium automation framework.

If you are looking for ways to scale by running tests distributedly, Selenium Grid is the best choice. Selenium Grid allows you to run tests parallely on multiple machines (environments) against various browsers, OS and device combinations hence boosting the speed of the testing cycle without compromising on the test coverage.

In this Angular testing with Jasmine and Karma tutorial, we will be configuring the Jasmine framework with the online Selenium Grid provided by LambdaTest platform. LambdaTest serves you with a cloud-based Grid infrastructure through which you can access 3000+ desktop and mobile browser environments.

Now that you got a gist of the above discussed tools, let us move on to writing Unit test cases in an Angular application.

But before that let us set up a dummy project upon which we will be writing meaningful Unit tests.

Check this out: CSS3 attr() function for all properties- With CSS Values and Units Level 3, the “attr()” function can be used on any CSS property, plus with non-string values (e.g., numbers and colors).

Setting up an example project using Angular, Karma and Jasmine

You can find all the code samples used in this Angular testing tutorial from the GitHub repository. Let us begin by creating a new Angular app.

Following are my choice of tools.

Angular CLI
Visual Studio Code as IDE

You can run the below command to install Angular CLI globally.

npm install -g [@angular/cli](http://twitter.com/angular/cli)

Step 1: Create a new Angular project using Angular CLI. This will take care of Jasmine and Karma configuration for us out-of-the-box.

Step 2: Open the IDE, create a new project folder and run the following command in the terminal. Here, I am naming the project as “angular-unit-test”.

ng new angular-unit-test

The project is set up successfully with all the dependencies installed. The root folder structure now looks like this:

To run the test, pass the following command.

ng test

The test execution starts and a new browser instance gets opened. Observe the browser report and terminal logs.

Step 3: Let us start building our app by creating new components. For the demo, I will be creating a simple Angular app using Bootstrap containing the following components:

Header
Footer
Login Form
Signup Form

Run the following command to generate new components using Angular CLI.

ng g c folder_name/component_name

All my components have been placed inside a folder named “components” in src/app. To create a component named “header”, run the following command:

ng g c components/header

The header component is created successfully. Notice that 4 files are auto-generated for every component — html,css, ts and spec.

We will be writing our Unit test inside the spec.ts file. By default, the file will look like this:

Since explaining basic Angular things is out of this tutorial’s scope, I won’t be covering the app creation. Refer to the steps below to clone and set up my completed sample app.

git clone [https://github.com/harita-gr/MyStay_app.git](https://github.com/harita-gr/MyStay_app.git)

npm install

npm start

Step 4: Configure testing in your Angular Project.

When we run the ng test, Angular takes the test configuration from the angular.json file.

The test-related configuration mainly lies on the shoulder of these 2 files.

test.ts — also known as test entry file, this file is used to load all spec.ts files from the project for testing
karma.conf.js — here we specify configurations like browser, port, report, online grid etc.

Let us take a look at our test.ts file. This file is the entry point of tests for the application. You don’t have to make any changes to the test.ts file.

Let us quickly grasp what is going on here.

At the beginning of the file, we are initializing our Angular test environment using all the imports.
After this, we find all the test files by matching their name against the regular expression (filename ending with spec.ts ) and load them.

**TestBed **is also initialized in this file. If you are wondering what TestBed is, it is a powerful Unit testing tool provided by Angular. It creates a dynamically constructed test module that emulates an Angular NgModule.

Now let us move on to the karma.conf.js file. But as you can notice, most of them are self-explanatory. So let us quickly go through some of them.

*frameworks *— Here we set our test automation framework which is Jasmine by default. But you can go on and change it as per your project requirement.
*reporters *— This is where we set our reporters. You can modify or add new ones.
*autoWatch *— If this is set to true, the test will run in watch mode. When you change any file and save it, tests are re-build and re-run.
*port *— This is where you can set your port.
*browsers *-Here you can set the browsers on which the tests should run. By default it is Chrome. But you can install and add new browser launchers.

If you are running your tests on a local machine, this configuration is good enough. But since we will be using an online grid for running our tests, we need to make some additional configurations which are as follows.

Set the webdriver configuration for running in the LambdaTest host.We need to pass a grid hostname, port, and user and access key. You can fetch your unique username and access key by creating a free LambdaTest account and navigating to your profile page.

// Lambdatest grid hostname and port
      var webdriverConfig = {
        hostname: "hub.lambdatest.com",
        port: 80,
        user: process.env.LT_USERNAME || 'YOUR_USERNAME',
        accessKey: process.env.LT_ACCESS_KEY || 'YOUR_ACCESSKEY',
      };

2- As our tests will be run on a cloud grid, we no longer need the browser launcher set up. Instead, install the webdriver launcher and add it as a plugin.

 npm install -D karma-webdriver-launcher

plugins: [
          require("karma-jasmine"),
          require("karma-webdriver-launcher"),
          require("karma-jasmine-html-reporter"),
          require("karma-coverage"),
          require("[@angular](http://twitter.com/angular)-devkit/build-angular/plugins/karma"),
        ],

3- Now, we need to define our custom launchers. LambdaTest provides you access to 3000+ browser/device/OS configurations. So you no longer need to restrict yourself by testing only on one device/browser/OS like when you test locally. I am configuring the tests to run in Chrome, Firefox and Edge in a custom browser version and OS.The configuration needs to be done similar to the object given below.

customLaunchers: {
          chrome: {
            base: "WebDriver",
            config: webdriverConfig,
            browserName: "chrome",
            platform: "windows 8.1",
            version: "71.0",
            build:'Unit testing in Angular', //Build name
            name: "Unit test", // Test name
            pseudoActivityInterval: 5000, // 5000 ms heartbeat
          },

You can generate Selenium Capabilities using LambdaTest Desired Capability Generator to find your custom combination.

4- Also update the browser name w.r.t the custom launcher.

browsers: ["chrome"],

That’s all! The final karma.conf.js file now looks like this.

// Karma configuration file, see link for more information
    // [https://karma-runner.github.io/1.0/config/configuration-file.html](https://karma-runner.github.io/1.0/config/configuration-file.html)

    module.exports = function (config) {
      // Lambdatest grid hostname and port
      var webdriverConfig = {
        hostname: "hub.lambdatest.com",
        port: 80,
        user: process.env.LT_USERNAME || 'YOUR_USERNAME',
        accessKey: process.env.LT_ACCESS_KEY || 'YOUR_ACCESSKEY',
      };

      config.set({
        basePath: "",
        // hostname: 'localhost', // hostname, where karma web server will run
        frameworks: ["jasmine", "[@angular](http://twitter.com/angular)-devkit/build-angular"],
        plugins: [
          require("karma-jasmine"),
          require("karma-webdriver-launcher"),
          require("karma-jasmine-html-reporter"),
          require("karma-coverage"),
          require("[@angular](http://twitter.com/angular)-devkit/build-angular/plugins/karma"),
        ],
        client: {
          jasmine: {},
          clearContext: false, // leave Jasmine Spec Runner output visible in browser
        },
        jasmineHtmlReporter: {
          suppressAll: true, // removes the duplicated traces
        },
        coverageReporter: {
          dir: require("path").join(__dirname, "./coverage/angular-unit-test"),
          subdir: ".",
          reporters: [{ type: "html" }, { type: "text-summary" }],
        },
        reporters: ["progress", "kjhtml"],
        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: true,
        browsers: ["chrome","firefox","edge"],
        singleRun: false,
        restartOnFileChange: true,

        customLaunchers: {
          chrome: {
            base: "WebDriver",
            config: webdriverConfig,
            browserName: "chrome",
            platform: "windows 8.1",
            version: "71.0",
            build:'Unit testing in Angular', //Build name
            name: "Unit test", // Test name
            pseudoActivityInterval: 5000, // 5000 ms heartbeat
          },
          firefox: {
            base: "WebDriver",
            config: webdriverConfig,
            browserName: "Firefox",
            platform: "windows 10",
            version: "91.0",
            build:'Unit testing in Angular',
            name: "Unit test",
            pseudoActivityInterval: 5000, // 5000 ms heartbeat
          },
          edge: {
            base: "WebDriver",
            config: webdriverConfig,
            browserName: "MicrosoftEdge",
            platform: "windows 10",
            version: "93.0",
            build:'Unit testing in Angular',
            name: "Unit test",
            pseudoActivityInterval: 5000, // 5000 ms heartbeat
          }
        },
      });
    };

5- Let us test our configuration by triggering our test runner.

ng test

Our test will start running on a cloud grid.

Go to the LambdaTest Automation Dashboard to access the results of your test execution.

This Selenium JavaScript testing tutorial for beginners and professionals will help you learn everything you need to know to work with JavaScript for Selenium automation testing.

Writing your first Angular Unit Test using Jasmine

We have successfully completed our test configuration.In this section of Angular testing with Jasmine, we will write unit test cases for Angular using Jasmine.

Understanding the Test Run flow

As mentioned earlier, associated with each component, a spec.ts file will be generated inside which we will be writing our test case. The default spec file generated for the App component app.component.spec.ts is shown below:

Let us understand the test run flow.

Import all the tools we will be going to use like TestBed.

Import all of the dependencies for this component.
To start our test block, we use the “describe” function, the title of which will be matching the component name under test.describe(string, function)

Then we have the “it” function, which is used to define test cases. Meaningful names can be given to the test case.it(string, function)

Additionally, we also have setup and teardown functions which will be run before or after each “it” function. Here, “beforeEach” is defined which contains async code. The purpose of this is to await till all the async code is finished before continuing. This function is called before each test specification (it function) is run.

We have three Unit tests over here:

First one verifies that the app is created successfully.
Second one verifies the app title is equal to the expected value.
Third one verifies that the title is rendered.

The overall run flow can be visualized as below:

Writing Unit test cases for Components

Now that you have an idea about how the test run flows, let us start by writing Unit test cases for the header component. To write meaningful tests, it is crucial to identify what you need to test.

For the header component, I want to verify the following cases:

It should display a logo containing the text “My Stay”.
It should have six nav links.
It should navigate to the register page by clicking the signup/login button.

The code for testing the header component is shown below.

//header.component.spec.ts

    import { ComponentFixture, TestBed, tick } from '@angular/core/testing';
    import { By } from '@angular/platform-browser';
    import { Location } from "@angular/common";

    import { HeaderComponent } from './header.component';

    describe('HeaderComponent', () => {
      let component: HeaderComponent;
      let fixture: ComponentFixture<HeaderComponent>;

      beforeEach(async () => {
        await TestBed.configureTestingModule({
          declarations: [ HeaderComponent ]
        })
        .compileComponents();
      });

      beforeEach(() => {
        fixture = TestBed.createComponent(HeaderComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
      });

      it('should create', () => {
        expect(component).toBeTruthy();
      });

      it('should display logo containing text "My Stay"', () => {
         const logoText =fixture.debugElement.query(By.css('.navbar-brand')).nativeElement;
         expect(logoText.textContent).toBe('My Stay ');
      });

      it('should contain 6 nav links', () => {
        const navLinks = fixture.debugElement.queryAll(By.css('li.nav-item'));
        expect(navLinks.length).toEqual(6);
      });

      it('navigates to register page on clicking signup/signin button', () => {
        const location: Location = TestBed.inject(Location);
        const button =fixture.debugElement.query(By.css('button.btn')).nativeElement;
        button.click();
        expect(location.path()).toBe('/user-register');
      });
    });

Now I want to test my footer component. Following are the test cases:

It should contain the copyright text
It should contain three social media contact buttons

The code for testing footer component is shown below:

//footer.component.spec.ts

    import { ComponentFixture, TestBed } from '@angular/core/testing';
    import { By } from '@angular/platform-browser';

    import { FooterComponent } from './footer.component';

    describe('FooterComponent', () => {
      let component: FooterComponent;
      let fixture: ComponentFixture<FooterComponent>;

      beforeEach(async () => {
        await TestBed.configureTestingModule({
          declarations: [ FooterComponent ]
        })
        .compileComponents();
      });

      beforeEach(() => {
        fixture = TestBed.createComponent(FooterComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
      });

      it('should create', () => {
        expect(component).toBeTruthy();
      });

      it('should contain copyright text', () => {
        const text =fixture.debugElement.query(By.css('.copyright')).nativeElement;
        expect(text.textContent).toContain('Copyright');
      });

      it('should contain 3 social media contact buttons ', () => {
        const btns = fixture.debugElement.queryAll(By.css('a.btn'));
        expect(btns.length).toEqual(3);
      });
    });

Lastly, I want to test my Login Component. Following are the test cases:

It should be able to login by entering an email and password and submitting form
It should route to register page by clicking the “Sign Up here” link

The code for testing the login component is shown below.

//login.component.spec.ts

    import { ComponentFixture, TestBed } from '@angular/core/testing';
    import { FormsModule } from '@angular/forms';
    import { By } from '@angular/platform-browser';
    import { Location } from "@angular/common";

    import { LoginComponent } from './login.component';

    describe('LoginComponent', () => {
      let component: LoginComponent;
      let fixture: ComponentFixture<LoginComponent>;

      beforeEach(async () => {
        await TestBed.configureTestingModule({
          imports: [FormsModule ],
          declarations: [LoginComponent],
        }).compileComponents();
      });

      beforeEach(() => {
        fixture = TestBed.createComponent(LoginComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
      });

      it('should create', () => {
        expect(component).toBeTruthy();
      });

      it('should be able to login by entering email and password and submitting form', () => {
        component.User['email'] = 'test@test.com';
        component.User['password'] = '123456789';
        const loginBtn = fixture.debugElement.query(By.css('button.login-btn')).nativeElement;
        loginBtn.click();
        expect(component.submitted).toBeTrue;
      });


      it('should route to register page by clicking “Sign Up here” link', () => {
        const location: Location = TestBed.inject(Location);
        const link =fixture.debugElement.query(By.css('a')).nativeElement;
        link.click();
        expect(location.path()).toBe('/user-register');
      });
    });

Now it is time to run the test cases. Execute the following command.

ng test

Go to the LambdaTest Automation Dashboard. You can notice the test starts running on a cloud-based Selenium grid.

Go to Automation Logs to see the detailed report of your tests.

We have successfully executed our Unit test cases in Angular.

Navigate to the LambdaTest Analytics Dashboard to view test performance metrics of your Unit tests. The Test Overview will provide a screenshot of tests with consistent behavior. Meanwhile, the Test Summary will show the total number of passed or failed tests, and any completed or queued tests.

Best Practices to Improve Unit testing

While performing Unit testing, here are some best practices one should keep in mind.

Follow a consistent naming convention and test one code at a time
Make sure that there is a corresponding unit test case to every module
Before moving on to the next phase, all the bugs should be fixed. So you can end up with a clean and reliable code for committing.
Continuously refactor test code
Finally, focus more on the tests that affect the behavior of the system.

Here’s a short glimpse of the Selenium JavaScript 101 certification from LambdaTest:

Conclusion

In this Selenium JavaScript tutorial on Angular testing with Jasmine and Karma, we learnt how to perform Unit testing in Angular framework with Jasmine and Karma test runner using Selenium. We also covered practical implementation.

As the code base keeps on growing it becomes time-consuming to execute the unit tests locally in our system in addition to the limited scope test coverage. So, we utilized the online Selenium Grid provided by LambdaTest platform to leverage our test execution by running the unit tests parallelly across multiple custom-configured environments.

I hope you found this Angular testing tutorial useful!

Happy Testing!

How To Speed Up JavaScript Testing With Selenium and WebDriverIO?

HaritaLT — Fri, 03 Jun 2022 18:58:30 +0000

Automation testing has become an integral part of the Agile way of software development. As the application grows, it becomes crucial to have a reliable testing framework to cope with the development velocity, detect the bugs at an early stage, and ensure quality. However, to achieve greater speed, scalability, wider test coverage, and a better ROI, it becomes important to adopt various testing strategies. WebdriverIO is a JavaScript testing framework extensively adopted by top-companies worldwide to simply and concisely fulfill all their testing needs quickly and efficiently.

Built on top of NodeJS and Selenium Webdriver (W3C WebDriver) API, WebdriverIO supports both web and mobile application testing. Since you are taking your time to read this article, it means you might fall into any of the below categories:

You might be just starting with WebdriverIO and want to lay the foundation right to build a robust framework for JavaScript testing.
You are already using WebdriverIO and seeking out how to optimize your framework and speed up the JavaScript testing.
You might be keen on getting some idea on how to level up your JavaScript with Selenium automated testing game and extract more out of the framework.

In this article, we will be trying to cater to each of these requirements and see how to speed up JavaScript testing. With the expectation that at least a few of the tips mentioned here will save your day, let’s get started!

Best Practices to Adopt While Developing WebdriverIO Framework

Honestly, setting up an automated testing framework is not an easy task, especially when you are using JavaScript with Selenium. But once the foundation is laid right, with timely maintenance, the benefits that can be reaped are limitless.

In this section, we will be discussing some key points that need to be considered, especially if you are just starting up with the WebdriverIO framework setup for JavaScript testing. Let’s look into it!

1.WebdriverIO Version

First and foremost, go for the latest version of WDIO, i.e., currently v6, released in early 2020. According to official documentation, LTS will be provided for v5 till April 2021, and v4 is currently deprecated. Now let’s see some of the desirable features that v6 has to offer.

a) Natively supports Puppeteer

To run a local test case, you are free to switch between Puppeteer and WebdriverIO API as you wish. Also, you won’t need to download the browser driver anymore. With WebdriverIO, you can check if a browser driver is running and accessible at localhost:4444/. In case it doesn’t, check if it uses Puppeteer as a fallback. Being able to access Puppeteer in your tests allows you to:

Leverage the Chrome DevTools protocol capabilities, with a much richer set of automation features.
Run commands on Puppeteer much faster. Hence it can help speed up local execution.

b) Performance Improvements

This has been one of the primary design goals of WDIO v6. It has also come with many internal improvements that will speed up test execution and lower CPU and memory usage.

And there’s a lot more. You can always refer to the WebdriverIO official documentation to know more about WebdriverIO v6.

2. Page Object Model (POM)

POM is a framework design pattern widely adopted by Agile practitioners for easy test script maintenance and enhanced code reusability. Implementing an approach like POM will help you efficiently manage your locators, reduce duplication, and make your framework more programmer-friendly.

So even if this directly won’t speed up your execution time, in the long run, the POM approach can save your time spent on creating and maintaining test scripts for JavaScript testing. You can refer to the WebdriverIO Page Object Model page to know more about it.

3. Create Helper Methods

Now, this is also linked with code reusability and ease of maintenance. Fundamentally, the idea is to wrap the code for commonly performed actions — like logging in, clicking on something, waiting for a result, logging out, etc. into a method so that they can be shared and reused by all scripts.

Also, you can add parameters to customize these helper methods to suit various function call needs.

4. Don’t test the same functionality twice
To speed up the testing, we should be strategic in terms of test coverage. Reducing the duplicate and avoidable scenarios directly helps to bring the test case count down.

Needless to explain more, the lower the test case count, the faster the execution result.

5. Avoid Hardcoding URLs

In WebdriverIO, we have a configuration file wdio.conf.js, which aids us in specifying the location of the tests, frameworks you want to use, reporters, browsers, and all other general configs of the project.

Another useful option is to configure the baseUrl of the application here so that we don’t need to specify it every time in our test scripts.

But generally, in most cases, we might need to run the application in multiple environments like — development, QA, staging, production, etc., each having different URLs. In that case, we can easily configure the URLs by declaring an environment variable and passing the detail of the environment/URL in which the test should run along with the test run command.

The configuration steps are briefly explained below:

Step 1: Create a separate file to maintain the URLs and export them. Here we have created a file named ‘wdio.config.url.js’ (Give any name of choice)

Step 2: The remaining settings are to be done in the wdio.conf.js file. First of all, require the URL file.

const urls = require(‘./wdio.config.url’)

Step 3: Create an environment variable to pass the URL values.

const ENV = process.env.ENV

Step 4: Create a condition to check if the value passed for ENV is valid.

`if (!ENV || !['qa', 'dev', 'live'].includes(ENV)) {
    console.log('Invalid environment! Please select : ENV=qa|dev|live')
    process.exit()
}

Step 5: Now, inside exports.config change the baseUrl to match the environment variable.

baseUrl: url[process.env.ENV],

Step 6: That’s pretty much it. Now along with the test run command, pass the value for ENV.

npm run test ENV=dev

Here, the URL for DEV will be mapped, and the test starts running. If any invalid value is passed or the value of ENV is skipped, corresponding logs will be generated as per the check condition we created.

6. Writing a good test script

Finally, it all comes to writing a good test script. Following are a few good practices that you can adopt while designing your test script while performing JavaScript testing.

Writing only one test case in a test file. This helps in keeping the test cases independent of each other, analyzing failure, and also aids in parallel testing.
Keeping it short or atomic. Reduce the number of steps to below 20 (there is no golden rule). Make use of helper methods.

You can take this certification as proof of expertise in the field of test automation with JavaScript to empower yourself and boost your career.

Here’s a short glimpse of the Selenium JavaScript 101 certification from LambdaTest:

{% youtube DQwSRfCkhSM %}

Have you read about CSS Paint API? Css-paint-api is a Python library that lets you generate images used by CSS using code.

Optimize Your Framework to Speed Up JavaScript Test Execution

So far, we have covered some of the best practices that can be adopted while developing the automated testing framework. Here, we will be discussing how we can optimize the WebdriverIO framework to speed up JavaScript testing while using JavaScript with Selenium.

Let’s look into some possible factors that can slow down the testing and methods that can be adopted.

1. Parallel Testing

As the application features grow, so does the test count. It becomes more and more vital to enhance the execution speed and reduce overall execution time. One way of achieving this is through parallel testing, i.e., running your test scripts concurrently.

To enable parallel testing, adjust the maxInstances property in your config file. See the below sample code.

exports.config = {
            // ...
            // set maxInstance for all browser
            maxInstances: 3,
            // ...
            capabilities: [{
                browserName: 'firefox'
            }, {
                browserName: 'chrome'
            }],
            // ...
        }

Here the maxInstances is set to 3, and 2 capabilities are mentioned (Chrome, Firefox). The math is simple. The WDIO test runner will spawn 6 processes, i.e., 3 test files will run simultaneously in the 2 browsers. You can adjust the values according to your requirements.

2. Disabling screenshots

Screenshots are often our saviors when it comes to debugging. But it also comes with the cost of execution time and slowing down your tests. Hence, the suggestion is to enable screenshots only when test failure occurs instead of taking screenshots for each and every step.

This WebdriverIO official documentation on the screenshot will guide you on how to implement this using Hooks.

3. Error Logging

Configuring error logging doesn’t have any direct impact on execution speed up. However, the idea is to enable logs only when some error occurs, hence keeping the log data more relevant, assisting us in quick debugging.

The level of logging verbosity can be set in the wdio.conf.js file.

4. Use the right wait methods

WebdriverIO provides us with various methods to assert wait in the program. It’s good to have an idea about which is to be used when and most importantly, which to avoid.

a) pause()

This method pauses execution for a specific amount of time. To avoid flaky test results, it is recommended not to use this command to wait for an element to show up, a page to load, or an action to happen. It is better to use commands like waitUntil, waitForExist, or other waitFor* commands.

```browser.pause(milliseconds)

b) waitUntil()

This wait command is your universal weapon if you want to wait on something. It expects a condition and waits until that condition is fulfilled with a truthy value.

browser.waitUntil(condition, { timeout, timeoutMsg, interval })

c) waitFor*

WebdriverIO offers many waitFor APIs, which helps to wait until an element is displayed, exists, clickable, etc.

waitForClickable
waitForDisplayed
waitForEnabled
waitForExist

Using the waitUntil() or waitFor* methods will make the script performance better. As the elements can be accessed as soon as they are available, and no extra waiting time is required.

Do check out the official WebdriverIO API documentation for more information.

5. Use headless browsers and drivers

A headless browser is a browser that does not have a user interface. Headless testing is a way of running your test cases without browser UI, making your script run faster. This is an option you can consider if you don’t need a real browser for testing or using CI/CD.

And no need to worry! You will still be able to capture screenshots and see how your application looks in headless mode. Debugging can be done as effectively. In WDIO, by adding a few arguments in your config file, you can adopt the headless version of your favorite browser.

a) For Firefox

browserName: 'firefox',
'moz:firefoxOptions': {
    args: ['-headless']
},

b) For Chrome

browserName: 'chrome',        
        'goog:chromeOptions': {        
            args: ['--headless', '--disable-gpu']
        }

Check this out: :placeholder-shown CSS pseudo-class- Form elements sometimes provides a hint to the user on type of input they should give. Example, the HTML5 placeholder attribute. :input:placeholder-shown matches an element that is showing such placeholder text.

Further Enhancements to Your Test Framework

WebdriverIO is an extremely feature-rich framework that provides tight integration with various services. This includes Jenkins, Bamboo, along with Docker for CI/CD implementations, Applitools for Visual Testing, LambdaTest for Cross Browser Testing, etc. In this section, we will talk about a few of the widely executed strategies while using JavaScript with Selenium that will level up your automated JavaScript testing.

1) Automation Testing using CI/CD Pipeline

To achieve speedy delivery with feedback on quality, it is crucial to integrate the automated testing into the CI/CD (Continuous Integration/Continuous Delivery) pipeline. This helps in enabling Continuous Testing.

WebdriverIO provides tight integration with CI systems like Jenkins. Being open-source, Jenkins is widely preferred in the automation testing world. With some quick and easy steps, Jenkins integration can be achieved in your WebdriverIO framework. Do check out the Jenkins official guide for Jenkins set-up!

Another favored strategy is to integrate Jenkins with container technologies like Docker. With the advent of Docker, practically all necessary application dependencies can be containerized. With this WDIO-Docker service, you may run your application container in your CI and in complete isolation.

2) Cross Browser Testing with Selenium Grid

To stay ahead in a highly competitive market, it is our duty as testers to ensure the application’s quality in all scenarios, i.e., the app should behave as expected across all platforms, browsers, and devices without crashing. This is where test coverage and cross browser testing comes into the picture.

When it comes to distributed test execution, Cloud Selenium Grid is always a good call. It can run test cases on different versions of browsers and different operating systems simultaneously. While using JavaScript with Selenium, you can use Selenium Grid along with the right cloud-based solution provider for cross browser testing. This could be an optimal strategy that you can deploy to assure quality.

LambdaTest is a popular cloud-based platform that provides you access to 2000+ browsers for both mobile and desktop to help you gain the maximum test coverage during the automated browser testing. Moreover, you can choose from a wide range of Windows and Mac operating systems, along with all legacy and latest browsers.

WedriverIO provides you service to seamlessly integrate LambdaTest into your framework through a few quick and easy steps. Let’s take a look!

Step 1: In your project terminal, give the following command to save LambdaTest service as a devDependency.

npm i wdio-lambdatest-service --save-dev

Step 2: Create a free account or log in to your LambdaTest account and fetch your unique username and access key. You can fetch the details from the Profile section.

Step 3: Now let’s make some edits to the config file. In your wdio.conf.js file

user= process.env.LT_USERNAME || "myusername",
key= process.env.LT_ACCESS_KEY || "1234567890",

exports.config = {

    user,
    key,
    logFile : './logDir/api.log',
    services: [
        ['lambdatest', {
            tunnel: true
        }]
    ],
    hostname: 'hub.lambdatest.com',
    path: '/wd/hub',
    port: 80,
    capabilities: [{
        build: ‘WebdriverIO-RemoteSelenium-Test’
        maxInstances: 5,
        browserName: 'chrome',
        acceptInsecureCerts: true,
        network: true,
        video: true,
        visual: true,
        console: true

    }],

These are the additional configurations to be done:

Pass your access token and user details by creating two variables, user and key.
Set the tunnel as true to enable routing connections from LambdaTest cloud through your computer.
Set the hostname corresponding to LambdaTest
Optionally, you can also enable report formats like video recording, console, network logs, etc., to be true.

Step 4: Run your tests. Use the command appropriate to you.

npx wdio wdio.conf.js

The test starts running, and logs can be observed in the terminal.

To observe live running status, go to your Automation dashboard in LambdaTest.

We can analyze individual test run reports from Automation Logs.

We have successfully run our test cases using an automated cross browser testing solution provided by LambdaTest through a hassle-free experience!

Do you know CSS overscroll-behavior lets you control the way the contents of a scroll container scrolls when its position in the browser window is larger than or equal to the scrollport’s size.

Conclusion

Automation was introduced to accelerate the testing process and identify development bugs at the early stage. More and more companies are coming out from the shell of the traditional way of manual testing and adopting a more “shift left” approach focusing on how to leverage the benefits of automated testing in their development process.

In this article, we have looked into some of the best practices to adopt for building a robust framework using WebdriverIO while using JavaScript with Selenium. We have also discussed various methods to optimize the performance by not only reducing execution time by speeding up the test but also debugging as well as maintenance time.

Additionally, we have also covered a few of the best strategies to stay ahead, like CI/CD implementation and cross browser testing. Empowered by LambdaTest, we utilized a cloud-based solution for remote Selenium Grid to achieve parallel cross browser testing across multiple platforms.

You can also checkout how to perform manual browser testing on LambdaTest platform.

Hopefully, this blog will enable you to optimize your framework and speed up testing. If you wish to optimize your web application quality by unlocking coverage in a wider variety of platforms or browsers or versions, please feel free to explore the LambdaTest platform.

Happy Testing!

A Detailed Guide On Selenium With Java [Tutorial]

HaritaLT — Thu, 02 Jun 2022 18:20:58 +0000

While getting started with automation testing, two questions pop up in a tester’s mind.

Which framework should be used for automation testing?
Which programming language should be preferred?

When it comes to the automation testing framework, Selenium is often the first option that comes to our mind. Being open-source with large community support, Selenium has established itself as the favorite choice of automation testers over the last decade with significant traction.


GitHub Stars	23.8k
Forks	7k
Downloads	240k

When it comes to selecting the right programming language for writing tests, many factors have to be considered. This includes the language in which the Application Under Test (AUT) is being developed, community support, available test automation frameworks, IDE support, usability, simplicity, and the learning curve for the tester writing the test case.

Test scenarios in Selenium can be implemented in popular programming languages like C#, Java, JavaScript, Python, PHP, and Ruby. In this Selenium Java tutorial, let us explore the most popular combination in automation testing — Selenium with Java. By the end of this detailed guide, you will be in a position to kick start your journey in Selenium automation testing with Java. I have covered a range of topics like installation and project setup for writing your first test case. I will also cover some of the Selenium best practices for automation testing using Selenium with Java.

We have a lot to cover 🙂 So, let’s get started!

Getting Started: Selenium Automation Testing with Java

If you’re new to automation or moved from manual to automation testing, then Selenium WebDriver is the best place to start. It has everything that you need to kickstart your Selenium automation journey.

In this section of this article on Selenium with Java, I will take you through the prerequisites and everything you need to know about Selenium to get started with Selenium automation testing with Java.

What is Selenium?

Selenium is a widely used automation testing framework used for browser automation of web applications. According to a recent test automation survey, 81% of the respondents used Selenium as their automating testing tool.

A few features of Selenium that contributed to its popularity are

Open-source with a large community.
Supports automation across multiple platforms like Windows, Macintosh, Linux, etc.,
Supports multiple browsers including Chrome, Firefox, IE, Safari, etc.
Supports multiple programming languages like Java, Python, Ruby, C#, etc.
Supports multiple frameworks like JUnit, TestNG, etc.
Easy to integrate with CI tools like Jenkins, Docker, etc.
Easy report generation

Selenium is available in four different flavors, with the Selenium WebDriver being the most popular. Selenium WebDriver is an object-oriented API used for automating interactions with web browsers (e.g., Chrome, Firefox, Edge, etc.) using corresponding browser drivers.

We also have the Selenium Grid, which helps run tests in parallel across different browser and platform combinations. Selenium Grid follows a hub-node concept where we can run the WebDriver scripts on a single machine (hub), but the execution will be done by multiple remote machines (nodes) via routing commands.

LambdaTest provides you with a cloud-based online Selenium Grid that helps you run your test cases over an online browser farm of 3000+ browsers and browser versions, securing faster execution with maximum test coverage via minimum configurations.

The latest version, Selenium 4, comes with numerous major revamps, including enhanced architecture and advanced features. You can go through this Selenium 4 tutorial to learn what is new in Selenium 4.

Do you know CSS Logical Properties and Values make it possible to control layout through logical, rather than physical, direction and dimension mappings. They are the writing-mode equivalent of their corresponding physical equivalents.

How does Selenium WebDriver work?

The Selenium WebDriver works with a Client-Server architecture model.

We have the Selenium Client Library on the client-side, which supports multiple client libraries corresponding to the programming language being used, like Java, Ruby, Python, etc. The language binding feature of Selenium allows it to support various programming languages. Based on the programming language of the test scripts, we need to choose the client library. For example, you need to use the Java language bindings to use Selenium with Java. You can download your respective language bindings from here.

We have the Browser Driver on the server-side, which accepts the HTTP requests coming from the client-side via the communication protocol. The browser driver then interacts with the Real browser and drives it to execute the actions defined in the automation scripts. Every browser has a browser driver specific to it. For example, to automate the Chrome browser, you need to use the Chrome driver. Shown below are the locations from where you can download the respective browser driver.

BROWSER	DOWNLOAD LOCATION
Opera	https://github.com/operasoftware/operachromiumdriver/releases
Firefox	https://github.com/mozilla/geckodriver/releases
Chrome	http://chromedriver.chromium.org/downloads
Internet Explorer	https://github.com/SeleniumHQ/selenium/wiki/InternetExplorerDriver
Microsoft Edge	https://blogs.windows.com/msedgedev/2015/07/23/bringing-automated-testing-to-microsoft-edge-through-webdriver/

The client-side and server-side interact with each other via a communication protocol.

For versions earlier than Selenium 4, the JSON wire protocol was used for communicating between the client and the server. It consists of the REST API that sends requests from the client to the server (browser’s native API) via HTTP. But here, since the Selenium Client Libraries (client) uses JSON protocol and the Web browser (server) users W3C protocol, encoding, and decoding of the API requests were required for communication between test scripts and browsers.

From Selenium 4, the JSON wire protocol is replaced by the WebDriver W3C protocol enabling direct communication between the Selenium Client libraries and the target browser. As the WebDriver and Web Browser use the same protocol, encoding and decoding of the API requests are no longer required making the test cases more stable than ever.

Why choose Selenium with Java?

According to the Stack Overflow Developer Survey, Java is one of the most popular programming languages, preferred by more than 35% of the respondents.

Choosing to write your Selenium automation tests using Java has multiple benefits. A few of them are listed below.

As Selenium supports Java, detailed documentation is available, making it easy to write test cases.
Compared to other languages like Python, programs written in Java are faster.
Accessibility to various operating systems like UNIX, Linux, Windows, Mac OS, etc.
Java comes with multiple complete automation frameworks like TestNG, JUnit, etc., that can be leveraged with Selenium for better coding, reporting, and maintenance.

Installation and Setup: How to use Selenium with Java?

To start your Selenium automation testing journey, the first step is to install and configure Selenium onto your system. In this section of this article on Selenium with Java, I will guide you through the installation process step by step. You will also be learning how to create a basic Selenium with Java project setup.

Installation

The installation process consists of the following steps.

Install JDK.
Install Eclipse IDE.
Install Selenium WebDriver and Language Bindings.
Install Browser Drivers (Optional).

Install JDK

Let us start with the Java Development Kit (JDK) installation. The JDK includes JRE (Java Runtime Environment) used to write and run Java code. You can download JDK from any of the below options.

Once the installation is complete, set the environment variables. The steps are as below:

Right-click on Computer.
Click on ‘Properties’.
Click on ‘Advanced system settings’.
On System Properties, select the ‘Advanced’ Tab.
Click on ‘Environment Variables.’
Copy the path where the JDK is installed. (E.g.: C:\Program Files\Java\jdk1.6.0\bin )
In the opened Environment Variables window, select ‘New‘ under ‘System variables’.
Set the path. If ‘Path’ is already existing, then edit it.

9- We also need to set the CLASSPATH. Create a new environment variable and copy the same JDK path as the value. If ‘CLASSPATH’ is already existing, then edit it.

The environment variable setup is now complete.

Open the command prompt and run the following command to verify that Java has been successfully installed in your system.

java -version

Install Eclipse IDE

Next, we need to install an IDE (Integrated Development Environment). An IDE is a platform where developers can write the code and run it. I will be using the Eclipse IDE for Java Developers for this demo. You can download the latest version from here.

Once the installer file is downloaded, complete the installation process. Alternatively, you can also use any other popular IDE like Jetbrains Webstorm, IntelliJ IDEA, etc.

Install Selenium WebDriver and Language Bindings

Download the Selenium Client Library for Java from here. The download comes as a ZIP file. Extract the contents (JAR files) and store them in a directory.

We are downloading client drivers for Selenium 4. Please check out ” Previous Releases ” for working with Selenium 3 or older versions.

Install Browser Drivers (Optional)

Finally, if you are running your test scripts on your local system, it is mandatory to have its respective browser driver for automating a browser. You can download the drivers for the browsers of your choice from here.

However, if you are utilizing a cloud Selenium Grid like LambdaTest, you can skip this step.

With the installation process complete, let us move on to the project setup.

Watch this video to know more about test result analysis and reporting in Selenium 4. Also, learn about different selenium reporting tools based on ease of setup, pricing, supported report formats, and more.

How to create a Selenium Java project in Eclipse?

We need to have a project set up for writing and storing our test cases. You can follow the below-mentioned steps to create a new Selenium with Java project in Eclipse.

Step 1: Launch Eclipse
Step 2: Create a workspace.

A workspace will be a place where you will be storing all your projects. You can create as many workspaces as required.

Step 3: Create a new Java project.

Go to File > New > Java Project. Name the project.

A new pop-up window will appear. Enter the following details:

Project name
Location to save the project
Execution JRE

Once done, click ‘Finish’.

The project is now created.

Step 4: Add Selenium API JAR files to the Java project by following the below-mentioned steps:

Right-click on the project and select Properties.
Select Java Build Path.
Under the libraries section, click on Add External JARs, which gets enabled upon opting for Classpath.

4- Add the Selenium Java Client JARS. Navigate to the folder location where you have downloaded and extracted the JAR files.

5- Once all the JAR files are added, click “Apply and Close”

With our project configured with Selenium and Java, we are ready to write and run our first test script in Selenium.

If you’re a developer or a tester and want to take your Selenium with Java skills to the next level, this Selenium Java 101 certification from LambdaTest can help you reach that goal.

Here’s a short glimpse of the Selenium Java 101 certification from LambdaTest:

Check this out CSS Masks: you can mask part of an element using another element (or image)

[Demo] Writing the first test case using Selenium and Java

It is time to hit practicals! In this section of this article on Selenium with Java, you will be learning to write your very first test case using Selenium with Java.

Test Scenario

First, let us understand the test scenario for which we will be writing a test script. We will be automating a simple form submission where the steps are as follows.

Launch the website.
Enter the value for ‘a’.
Enter the value for ‘b’.
Click on the ‘Get Total’ button to display the sum of two numbers, ‘a’ and ‘b’.
Verify the result.

Case 1: Running our test case on a local machine

In this section of this article on Selenium with Java, let us learn how to write the automated test case and run it on our local machine. The steps are detailed below.

Step 1: Create a class file inside your Java Project.
Right-click on the src folder inside your Project. Select New > Class.

I am naming it TestOne.java. The test gets created inside the default package.

Step 2: Write our test case code using Selenium with Java.

First of all, let us make the required Selenium imports on the top of our test class file. I will be running the test on the Chrome browser for this demo.

import org.openqa.selenium.By;      
import org.openqa.selenium.WebDriver;              
import org.openqa.selenium.chrome.ChromeDriver;

Inside the main() method, let us set properties to define the path of the browser driver, which we have downloaded during the installation steps.

System.setProperty(“webdriver.chrome.driver”, “C:/location_of_chromedriver.exe”);

After this, define a new Webdriver instance.

WebDriver driver= new ChromeDriver();

A glance of all possible methods WebDriver API provides us for browser automation is shown in the below snapshot.

Now, let us write the code for our test scenario.

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

        //Launch the Site.      
        driver.get("[https://www.lambdatest.com/selenium-playground/simple-form-demo](https://www.lambdatest.com/selenium-playground/simple-form-demo)");

        //Enter values into form and submit      
        driver.findElement(By.id("sum1")).sendKeys("2");                    
        driver.findElement(By.id("sum2")).sendKeys("5");    
        driver.findElement(By.xpath("//*[[@id](http://twitter.com/id)='gettotal']/button")).click();  

        //Verify the result
        String result = driver.findElement(By.xpath("//*[[@id](http://twitter.com/id)=\'addmessage\']")).getText();

        if( Integer.parseInt(result) == 7) {
             System.out.println("Test Success");
        } else {
             System.out.println("Test Failed");
        }

        //Close the browser
        driver.quit();

I would like to briefly explain the WebDriver commands I have used in the test script.

get(String arg): void

The get() method takes a string URL as a parameter and opens the specified URL in the current browser window. This method returns nothing.

findElement(By by): WebElement

The findElement() method in Selenium is a WebElement command used to find a WebElement in the DOM for performing an action like clicking, typing, etc. It accepts an input parameter of the type By for locating the element using various locator strategies like id, classname, XPath, etc.

The findElement() returns a WebElement if the element is found, else throws a runtime exception — NoSuchElementException. To learn more about exception handling, you can go through this blog on common Selenium exceptions.

quit(): void

The quit() method is used to close all browser windows opened by the Webdriver. It accepts no parameter and returns nothing.

The WebElement methods used in the test script are:

WEBELEMENT METHOD	METHOD USAGE
click(): void	To click the element
sendKeys(): void	To simulate typing into an element, which may set its value. It takes a character sequence as input.
getText(): String	To get the visible (i.e. not hidden by CSS) text of the element, including sub-elements.

To know more about the WebElement methods, please find the official documentation here.

For locating the elements I made use of the browser Developer Tools.

Our final code looks like this!

import org.openqa.selenium.By;      
import org.openqa.selenium.WebDriver;              
import org.openqa.selenium.chrome.ChromeDriver;

public class TestOne {

    public static void main(String[] args) {

        System.setProperty("webdriver.chrome.driver", "E:/Selenium/chromedriver.exe");

        WebDriver driver= new ChromeDriver();          

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

        //Launch the Site.      
        driver.get("https://www.lambdatest.com/selenium-playground/simple-form-demo");

        //Enter values into form and submit      
        driver.findElement(By.id("sum1")).sendKeys("2");                    
        driver.findElement(By.id("sum2")).sendKeys("5");    
        driver.findElement(By.xpath("//*[[@id](http://twitter.com/id)='gettotal']/button")).click();  

        //Verify the result
        String result = driver.findElement(By.xpath("//*[[@id](http://twitter.com/id)=\'addmessage\']")).getText();

        if( Integer.parseInt(result) == 7) {
             System.out.println("Test Success");
        } else {
             System.out.println("Test Failed");
        }
               //Close the browser
        driver.quit();              
    }
}

Source: *GitHub*

Step 3: Run the test.

Finally, it is time to run our test. Right-click on the test class file and select.

Run As > Java Application

The browser gets launched, and the test gets executed successfully on your local machine!

You can also check the console for logs.

Case 2: Running our test case on an online Selenium Grid

In the previous section of this article on Selenium with Java, we have seen how to run our test case on a local machine. Here, let us explore how to run our test case in a remote cloud-based Selenium Grid.

Running our test cases in an online Selenium Grid helps us tackle the below-mentioned problems that occur during local execution when the project size and test coverage requirement increase.

Scalability
Better browser coverage
Infrastructure limitations for cross browser testing etc.

Here’s a glimpse of LambdaTest cloud Selenium Grid:

You can also Subscribe to the LambdaTest YouTube Channel and stay updated with the latest tutorials around Selenium testing, Cypress E2E testing, CI/CD, and more.

Step 1: Create a free account on LambdaTest and secure your unique username and access key.

Step 2: Inside the test class, define all the required variables for connecting with the Remote Grid. In addition, you can also define your unique username and access key.

static String username = "YOUR_USERNAME";
   static String accesskey = "YOUR_ACCESS_KEY";
   static RemoteWebDriver driver = null;
   static String gridURL = "[@hub](http://twitter.com/hub).lambdatest.com/wd/hub";
   static boolean status = false;

Step 3: Pass the browser capabilities. You can generate your custom desired capabilities using LambdaTest Capabilities Generator.

DesiredCapabilities capabilities = new DesiredCapabilities();  
     capabilities.setCapability("browserName", "Chrome");
     capabilities.setCapability("browserVersion", "101.0");
     HashMap<String, Object> ltOptions = new HashMap<String, Object>();
     ltOptions.put("user",username);
     ltOptions.put("accessKey",accesskey);
     ltOptions.put("build", "Selenium Java Test");
     ltOptions.put("name", "TestOne");
     ltOptions.put("platformName", "Windows 11");
     ltOptions.put("selenium_version","4.1.2");
     ltOptions.put("driver_version","101.0");
     capabilities.setCapability("LT:Options", ltOptions);

Step 4: Define a new instance of RemoteWebDriver()

Remote WebDriver is an interface which is used to execute the browser automation on a remote computing device or in a distributed environment. It can control the browser in the grid by configuring the node and the hub.

Note that you no longer need to pass the browser driver.

try {
            driver = new RemoteWebDriver(new URL("https://" + username + ":" + accesskey + gridURL), capabilities);
        }
        catch (MalformedURLException e) {
            System.out.println("Invalid grid URL");
        }
        catch (Exception e) {
            System.out.println(e.getMessage());
        }

Step 5: Our final code now looks like this!

import java.net.MalformedURLException;
import java.net.URL;
import java.util.HashMap;

import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.remote.DesiredCapabilities;
import org.openqa.selenium.remote.RemoteWebDriver;

public class TestOneWithRemoteGrid {

    static String username = "YOUR_USERNAME";
    static String accesskey = "YOUR_ACCESS_KEY";
    static RemoteWebDriver driver = null;
    static String gridURL = "[@hub](http://twitter.com/hub).lambdatest.com/wd/hub";
    static boolean status = false;

    public static void main(String[] args) {

        DesiredCapabilities capabilities = new DesiredCapabilities();
        capabilities.setCapability("browserName", "Chrome");
        capabilities.setCapability("browserVersion", "101.0");
        HashMap<String, Object> ltOptions = new HashMap<String, Object>();
        ltOptions.put("user",username);
        ltOptions.put("accessKey",accesskey);
        ltOptions.put("build", "Selenium Java Test");
        ltOptions.put("name", "TestOne");
        ltOptions.put("platformName", "Windows 11");
        ltOptions.put("selenium_version","4.1.2");
        ltOptions.put("driver_version","101.0");
        capabilities.setCapability("LT:Options", ltOptions);

        try {
            driver = new RemoteWebDriver(new URL("https://" + username + ":" + accesskey + gridURL), capabilities);
        } catch (MalformedURLException e) {
            System.out.println("Invalid grid URL");
        } catch (Exception e) {
            System.out.println(e.getMessage());
        }  


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

        //Launch the Site.      
        driver.get("[https://www.lambdatest.com/selenium-playground/simple-form-demo](https://www.lambdatest.com/selenium-playground/simple-form-demo)");

        //Enter values into form and submit        
        driver.findElement(By.id("sum1")).sendKeys("2");                    
        driver.findElement(By.id("sum2")).sendKeys("5");    
        driver.findElement(By.xpath("//*[[@id](http://twitter.com/id)='gettotal']/button")).click();  

        //Verify the result
        String result = driver.findElement(By.xpath("//*[[@id](http://twitter.com/id)=\'addmessage\']")).getText();

        if( Integer.parseInt(result) == 7) {
             System.out.println("Test Success");
        } else {
             System.out.println("Test Failed - " + result);
        }                

        //Close browser
        driver.quit();                    
    }
}

Source: *GitHub*

Step 6: Run the test.

The test starts running. Go to the LambdaTest Dashboard to observe the live running status.

Our test got executed successfully. You can analyze the detailed report containing video and logs.

Do you know CSS math functions min(), max() and clamp() is a polyfill that provides more advanced mathematical expressions in addition to ‘calc()’

Using TestNG framework for parallel test execution

If you are working on an actual project, you will need to write, run and maintain hundreds of test cases. Each testing cycle will demand you to execute your test cases on multiple platforms and devices to ensure that the application behaves as expected under various conditions to assure the product quality before going live. It becomes highly desirable to reduce the overall test execution time, and one way to achieve it is through parallel testing.

Parallel testing is a favored test execution strategy where the tests are run in parallel to reduce overall test execution time. Parallel testing was introduced to replace the traditional approach of sequential testing. As the name suggests, tests are executed sequentially, which is more time-consuming.

You have learned how to write and run a test case sequentially using Selenium with Java in the previous section. Now, I will walk you through how to run tests in parallel on a cloud-based Selenium Grid using the TestNG framework.

Introduction to TestNG framework

TestNG is a prominent open-source test automation framework for Java, where NG stands for ‘Next Generation.’ TestNG is widely adopted by Selenium users because of its features and feasibility. Running Selenium tests alone comes with numerous limitations. However, TestNG introduces an entire set of new features making it powerful and beneficial.

A few critical features of TestNG are listed below:

Easy report generation in desirable formats. Now it is easier to analyze how many test cases passed and how many failed during each test run.
Supports parallel testing. Multiple test cases can be run simultaneously, reducing the overall test execution time.
Possible to group test cases in TestNG effortlessly.
TestNG annotations like @test, @BeforeTest,@AfterTest, etc., are supported.
Easy to integrate with tools like Maven, Jenkins, etc.

Parallel test execution in TestNG using TestNG XML file

As pointed out, one of the key advantages of adopting the TestNG automation framework is that it supports parallel test execution. TestNG test automation framework allows you to run tests in parallel or multithreaded mode by utilizing the Multi-Threading concept of Java.

Multi-Threading is the process of executing multiple threads simultaneously, without any dependence on each other. This means that the threads are executed in isolation, and therefore, exceptions occurring on one thread won’t affect the others. Multi-Threading helps in the efficient utilization of the CPU by greatly reducing idle time. In TestNG, we enable parallel testing by making required changes in the configuration file — TestNG XML file.

TestNG XML is the test suite configuration file in TestNG, which helps customize the execution of tests. It also allows you to run a single test file over numerous combinations of parameters and values specified. A simple TestNG XML file looks like this.

To trigger parallel execution, we need to set the parallel attribute. This attribute accepts four values:

classes — to run all test cases present inside classes in the XML in parallel mode.
methods — to run all methods with @test annotation in parallel mode.
tests — to run all test cases present inside tag in the XML in parallel mode.
instances — to run all test cases in the same instance in parallel mode.

We can also set the number of threads we wish to allocate during the execution using the thread-count attribute. The default value of thread count in TestNG is 5.

<suite name=”Regression Test Suite” parallel=”methods” thread-count=”2">

Moving forward, let us install and set up TestNG in our Eclipse. Also, let us learn how to rewrite our demo test case as a TestNG test and run it parallelly in three different browsers by leveraging the online Selenium Grid.

Installation and Setup

Installing TestNG in Eclipse is a simple process. Go to Eclipse Marketplace and install TestNG.

Help > Eclipse Marketplace.

Once installed, you can locate it under the Installed section.

With the installation completed, let us move on to a basic project setup next.

Creating a TestNG Project

To create a new Java TestNG project in Eclipse, follow the below-mentioned steps.

Step 1: Launch Eclipse and create a new Java project.

Go to File > New > Java Project.

Step 2: Name your project and click Next.

Step 3: Add libraries.

Right-click on the project folder and select Properties.

Choose Java Build Path.
Go to Libraries, select Classpath, and click Add Library.

Step 4: Select TestNG and click Next.

You will see that TestNG has been added to the project library.

Step 5: Add the Selenium API JAR files to the TestNG project and click Apply and Close.

We have successfully created a TestNG project and are ready to write and run our first TestNG test case.

How to run test cases in parallel with Selenium in TestNG on Cloud Grid?

In this section of this article on Selenium with Java, we will learn how to achieve parallel test execution in TestNG. For the demo, we will be re-writing our previous test case into a TestNG test and executing it parallelly on five different browsers (Chrome, Safari, Firefox, Opera, and Edge) using the Online Selenium Grid provided by LambdaTest.

The steps are detailed below.

Step 1: Go to the TestNG project we created in the previous step.
Step 2: Create a TestNG class file by following the below-mentioned steps:

Right-click on project src and find TestNG towards the bottom of the list.
Select Create TestNG Class.

3- Name the class, choose the required annotations, provide the XML file name and click Finish. Here, I have named the class as ParallelTest.

The TestNG class file is created containing the skeleton code structure.

Let us quickly go through the TestNG annotations used:

@test — Implies that the method is a test case. Therefore, all tests should be marked with this annotation.
@BeforeMethod and @AfterMethod — These annotations run once before and after each @test method in a class.

Step 3: Write our test case using TestNG and Selenium.
I have re-written our previous test scenario as a TestNG test case. Some notable changes are:

Inside the method marked by @BeforeMethod annotation, I have placed all the setup steps since they need to be executed first before the test. Also, the method name has been renamed setUp(). Additionally, a try-catch block has been implemented for exception handling.
Also, I have added @Parameters annotation on top of the method for receiving the browser, version, and platform values from our TestNG XML file.

 [@BeforeMethod](http://twitter.com/BeforeMethod)
    [@Parameters](http://twitter.com/Parameters)(value={"browser","version","platform"})
    public void setUp(String browser, String version, String platform) throws Exception {
            DesiredCapabilities capabilities = new DesiredCapabilities();
            capabilities.setCapability("browserName", browser);
            capabilities.setCapability("browserVersion",version);
            HashMap<String, Object> ltOptions = new HashMap<String, Object>();
            ltOptions.put("user",username);
            ltOptions.put("accessKey",accesskey);
            ltOptions.put("build", "TestNG Parallel Test");
            ltOptions.put("name", "TestOne");
            ltOptions.put("platformName", platform);

            ltOptions.put("selenium_version","4.1.2");
            ltOptions.put("driver_version","101.0");
            capabilities.setCapability("LT:Options", ltOptions);

         try {
             driver = new RemoteWebDriver(new URL("https://" + username + ":" + accesskey + gridURL), capabilities);
         } catch (MalformedURLException e) {
             System.out.println("Invalid grid URL");
         } catch (Exception e) {
             System.out.println(e.getMessage());
         }
     }

Inside the method marked by @AfterMethod annotation, I have placed the tear-down steps since they need to be executed last after every test. Also the method name has been renamed as tearDown().

[@AfterMethod](http://twitter.com/AfterMethod)
        public void tearDown() throws Exception {
           if (driver != null) {
                driver.quit();
            }
        }
    }

We will be writing our actual code for test steps inside the method marked by @test annotation. Since we are automating an additional scenario, I have renamed the method to addValues().

[@Test](http://twitter.com/Test)
    public void addValues() {
            //Maximize window      
            driver.manage().window().maximize();    

            //Launch the Site.        driver.get("[https://www.lambdatest.com/selenium-playground/simple-form-demo](https://www.lambdatest.com/selenium-playground/simple-form-demo)");

            //Enter values into form and submit        
            driver.findElement(By.id("sum1")).sendKeys("2");                    
            driver.findElement(By.id("sum2")).sendKeys("5");    
            driver.findElement(By.xpath("//*[[@id](http://twitter.com/id)='gettotal']/button")).click();  

            //Verify the result
            String result = driver.findElement(By.xpath("//*[[@id](http://twitter.com/id)=\'addmessage\']")).getText();

            if( Integer.parseInt(result) == 7) {
                 System.out.println("Test Success");
            } else {
                 System.out.println("Test Failed - " + result);
            }

The final code looks like this.

g;

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

    import org.openqa.selenium.By;
    import org.openqa.selenium.remote.DesiredCapabilities;
    import org.openqa.selenium.remote.RemoteWebDriver;
    import org.testng.annotations.AfterMethod;
    import org.testng.annotations.BeforeMethod;
    import org.testng.annotations.Parameters;
    import org.testng.annotations.Test;

    public class ParallelTest {

    public String username = "YOUR_USERNAME";
    public String accesskey = "YOUR_ACCESSKEY";
    public RemoteWebDriver driver = null;
    public String gridURL = "[@hub](http://twitter.com/hub).lambdatest.com/wd/hub";
    boolean status = false;

    [@BeforeMethod](http://twitter.com/BeforeMethod)
    [@Parameters](http://twitter.com/Parameters)(value={"browser","version","platform"})
    public void setUp(String browser, String version, String platform) throws Exception {
            DesiredCapabilities capabilities = new DesiredCapabilities();
                    capabilities.setCapability("browserName", browser);
            capabilities.setCapability("browserVersion",version);
            HashMap<String, Object> ltOptions = new HashMap<String, Object>();
            ltOptions.put("user",username);
            ltOptions.put("accessKey",accesskey);
            ltOptions.put("build", "TestNG Parallel Test");
            ltOptions.put("name", "TestOne");
            ltOptions.put("platformName", platform);
            ltOptions.put("selenium_version","4.1.2");
            ltOptions.put("driver_version","101.0");
            capabilities.setCapability("LT:Options", ltOptions);

         try {
             driver = new RemoteWebDriver(new URL("https://" + username + ":" + accesskey + gridURL), capabilities);
         } catch (MalformedURLException e) {
             System.out.println("Invalid grid URL");
         } catch (Exception e) {
             System.out.println(e.getMessage());
         }
     }
    [@Test](http://twitter.com/Test)
    public void addValues() {
            //Maximize window      
            driver.manage().window().maximize();    

            //Launch the Site.        driver.get("[https://www.lambdatest.com/selenium-playground/simple-form-demo](https://www.lambdatest.com/selenium-playground/simple-form-demo)");

            //Enter values into form and submit        
            driver.findElement(By.id("sum1")).sendKeys("2");                    
            driver.findElement(By.id("sum2")).sendKeys("5");    
            driver.findElement(By.xpath("//*[[@id](http://twitter.com/id)='gettotal']/button")).click();  

            //Verify the result
            String result = driver.findElement(By.xpath("//*[[@id](http://twitter.com/id)=\'addmessage\']")).getText();

            if( Integer.parseInt(result) == 7) {
                 System.out.println("Test Success");
            } else {
                 System.out.println("Test Failed - " + result);
            }   

    [@AfterMethod](http://twitter.com/AfterMethod)
        public void tearDown() throws Exception {
           if (driver != null) {
                driver.quit();

GitHub

**Step 4: **Configure the TestNG XML file to run in parallel mode. The steps are as below:

Open the testng.xml file. If not already created, you may create it by adding a new file to the project and naming it as testng.xml.
Edit the boilerplate. You can name the test suite and test name as per your liking. But the class name should be exact as that of our TestNG class.

<?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE suite SYSTEM "[https://testng.org/testng-1.0.dtd](https://testng.org/testng-1.0.dtd)">
    <suite name="Parallel Test Suite">
        <test name="Test">
            <classes>
                <class name="testng.ParallelTest" />
            </classes>
        </test> <!-- Test -->
    </suite> <!-- Suite -->

3- To trigger parallel test execution in TestNG, provide the parallel attribute to . For parallel execution of test methods, set the attribute value as “tests.”

<suite name="Parallel Test Suite" parallel="tests" thread-count="5">

4- Add parameters for configuring the tests to run in a specific browser, browser version, and OS. For example, below is the code for setting up the test case to run in Chrome Browser version 101.0 in Windows 11. Similarly, you can provide as many combinations as you like.

<test name="Chrome Test">
            <parameter name="browser" value="Chrome" />
            <parameter name="version" value="101.0" />

            <parameter name="platform" value="WIN11" />

            <classes>
                <class name="testng.ParallelTest" />
            </classes>
        </test>

The final code for testng.xml looks like this.

<?xml version="1.0" encoding="UTF-8"?>
    <suite name="Suite" parallel="tests" thread-count="5">

        <test name="Chrome Test">
            <parameter name="browser" value="Chrome" />
            <parameter name="version" value="101.0" />
            <parameter name="platform" value="WIN11" />
            <classes>
                <class name="testng.ParallelTest" />
            </classes>
        </test>

        <test name="Firefox Test">
            <parameter name="browser" value="Firefox" />
            <parameter name="version" value="100.0" />
            <parameter name="platform" value="WIN8" />
            <classes>
                <class name="testng.ParallelTest" />
            </classes>
        </test>

        <test name="Safari Test">
            <parameter name="browser" value="safari" />
            <parameter name="version" value="11.0" />
            <parameter name="platform" value="macos 10.13" />
            <classes>
                <class name="testng.ParallelTest" />
            </classes>
        </test>

        <test name="MS Edge Test">
            <parameter name="browser" value="Edge" />
            <parameter name="version" value="101.0" />
            <parameter name="platform" value="WIN10" />
            <classes>
                <class name="testng.ParallelTest" />
            </classes>
        </test>

        <test name="Opera Test">
            <parameter name="browser" value="Opera" />
            <parameter name="version" value="85.0" />
            <parameter name="platform" value="WIN10" />
            <classes>
                <class name="testng.ParallelTest" />
            </classes>
        </test> <!-- Test -->
    </suite> <!-- Suite -->

We have a total of 5 different tags, and each of these will run on different threads.

5- Finally, it is time to run our test case. Right-click on our testng.xml file and navigate to Run As > TestNG Test Suite.

Our test starts getting executed. Go to your LambdaTest Automation Dashboard to see the live running status.

The test is executed parallelly in the 5 browsers, and reports and logs are generated successfully.

Best Practices for Selenium automation testing

Through automation testing, we aim to reduce the labor of manual testing, speed up the execution, detect maximum bugs early, achieve better coverage and accelerate time to market. However, writing a stable and reliant test case can be challenging due to various factors like test flakiness, incorrect testing approach, etc. This is where HyperExecute comes into the picture, which eliminates these factors and cuts down on test execution times. This allows businesses to test code and fix issues much quicker and hence achieve an accelerated time to market.

In this section of this article on Selenium with Java, let us discuss some of the well-encouraged guidelines and design patterns recommended by the Selenium community to help you create well-architectured test suites. Remember, there is no “One Size Fits all” situation when it comes to test automation. Thoughtfully decide what will work the best for your particular environment.

Planning and Designing Test Cases beforehand

Before getting started with writing any automation tests, it is recommended that the QA teams invest time in creating a proper test plan. Surveys show that 80% of the projects dive straight into automation without having a tangible strategy.

However, to assure fool-proof testing of the application, QAs should come up with all possible logical scenarios and create maximum test cases based on the end-user perspective.

2. Implementing Page Object Model

When a UI change occurs, the Selenium locators may also change, and we are required to update the modified locators in all the test scripts consuming it. But, as the application complexity increases and UI changes become more frequent, creating and maintaining test cases becomes tiresome. The Page Object Model (POM) is a popular design pattern in Selenium automation testing, which helps in enhancing test maintenance and reducing code duplication.

3. Choosing the Best-suited Locators

While writing automation test scripts, a large chunk of the time is spent locating the web elements. Selenium offers us multiple strategies to locate a web element such as ID, Name, Link Text, XPath, CSS Selector, DOM Locator, etc.

However, some web locators are more brittle than others. As the UI implementation is prone to frequent changes, we must be cautious in choosing the right web locators, which will minimize the impact of UI code changes in the automation tests. If available, opt for unique locators like ID and Name, which are easy to find and more reliable as they are less prone to change.

4. Implement Logging and Reporting

As the test suite becomes extensive, locating the failed test case and debugging becomes challenging. In these cases, reporting and logging practices can act as huge saviors.

The test report is a document that contains all the information about a particular test run, including the number of test cases passed, the number of test cases failed, total time taken, error with a snapshot, etc. Even though default Selenium does not come with reporting, you can implement it by leveraging test automation frameworks like TestNG.

Logging helps us to understand our code better and hence makes debugging easier. Examining logs is the quickest way to analyze why your code faces a problem. Some of the popular log levels are debug, info, warning, error, and critical. Good logging saves time. However, if overdone, it can slow down test execution.

5. Incorporating Wait Commands

The web browsers take some time to load the web page contents. The time taken for page load depends on many external factors like network speed, server issues, machine capabilities, etc. To tackle this, testers need to add some delay into the code so that the web element will be loaded and available before performing any action on it.

In Java, testers often achieve this delay using Thread.sleep(). However, this is not the recommended practice. As the name implies, when the Thread.sleep() method is called, the thread goes to sleep for the specified amount of time and does absolutely nothing to pause the automation script. After the time is over, it moves on to executing the next line of code.

In real-time, we won’t be able to predict the exact time it would take for the page load as it is dependent on many external factors. Sometimes the page may load quickly, lowering the test execution speed due to the remaining unnecessary delay caused by sleep(). And sometimes, it may take longer than the specified time, causing the test to fail as the element was not fully loaded. As a better and more efficient alternative, use the Implicit wait and Explicit wait commands provided by Selenium instead of the sleep method.

Conclusion

Selenium with Java is the most widely adopted test automation combination among QAs. In this tutorial, we explored how to get started with Selenium Automation Testing with Java and wrote our very first test case. On top of that, we also learned how to optimize test execution by leveraging parallel testing and other best practices to establish a reliable testing cycle. I hope this tutorial turns out to be beneficial. There’s much more to explore!

Happy Testing!

How To Use JavaScriptExecutor in Selenium WebDriver?

HaritaLT — Fri, 22 Apr 2022 11:35:42 +0000

Webdriver is a tool that requires no introduction in the Selenium automation testing domain. Webdriver is an open-source collection of APIs which is used for testing web applications across different browsers and platforms to verify whether it is working as expected or not. The latest version of Selenium — Selenium 4 is W3C compliant — however it is still in the Beta phase (i.e. 4.0.0-beta-3).

In Selenium 3, the JSON Wire Protocol is used for communicating with the web browser from the local end. In Selenium test automation with the Selenium 3 framework, API encoding & decoding is involved in the entire process since web browsers use the W3C protocol and the Selenium Client Libraries use the JSON Wire Protocol.

Selenium WebDriver allows you to communicate with various browsers to perform commands and assertions on DOM elements using which you can perform any kind of operations like sending the text, click on a button, select a radio button, select the drop-downs, etc.

However, there are scenarios where the actual Webdriver commands will not work efficiently as expected. This is where JavaScriptExecutor comes into the picture.

In this article, we will be discussing JavaScriptExecutor in Selenium WebDriver. Also I will cover everything you need to know about how to use JavaScriptExecutor in Selenium. Getting started with an overview, we will further dive into the implementation and explore different methods in JavascriptExecutor along with working examples.

Let’s get started!

What is JavaScriptExecutor in Selenium?

JavaScriptExecutor is an interface provided by Selenium Webdriver, which presents a way to execute JavaScript from Webdriver. This interface provides methods to run JavaScript on the selected window or the current page. JavaScriptExecutor is an interface which is available for all the languages that support the Selenium Framework.

As JavaScriptExecutor is a Selenium interface, there is no need for an extra plugin or add-on. You can use it directly by importing the package org.openqa.selenium.JavascriptExecutor.

Why use JavaScriptExecutor in Selenium?

Selenium Webdriver alone lets you perform operations on web elements like sending data, clicking buttons, etc. However, as said before, there are scenarios where the Webdriver commands will not work as expected due to various reasons. In these cases, we take the help of JavaScriptExecutor.

For example, traditionally to locate a web element we use different web locator strategies such as ID, Name, CSS selector, and XPath, etc. If these locators do not work as expected, or you are handling a tricky XPath, you can use JavaScriptExecutor to perform the desired operation on the WebElement..

On similar lines, to click on a WebElement, we generally use the click() method provided by Selenium Webdriver.

The WebDriver error — invalid cookie domain error, occurs if a cookie is illegally attempted to be set under a different domain from the current document.

The WebDriver error — invalid selector-error, happens when an element fetch is tried with an unknown web element selection method.

driver.findElement(By.id(“button”)).click();

At times, the click() method may not work on all the web browsers or the web controls might behave differently on different browsers. To overcome such situations, the JavaScriptExecutor interface should be used.

As we know, browsers have Javascript implementation inside them and can understand the JavaScript commands. Hence, understanding JavaScriptExecutor in Selenium will enable you to perform a range of operations more efficiently and elegantly.

Note: A scalable and reliable online testing cloud for both manual and automation testing of AngularJS websites

Introduction to JavaScriptExecutor Methods

JavaScriptExecutor in Selenium provides two methods through which we can run JavaScript on the selected window or the current page.

a) executeScript

This method executes JavaScript in the context of the currently selected window or frame in Selenium. The script will be executed as the body of an anonymous function.

b) executeAsyncScript

This method executes an asynchronous snippet of JavaScript in the context of the currently selected window or frame in Selenium. Here also, the script will be executed as the body of an anonymous function. The major difference between executeScript and executeAsyncScript is that the script invoked using the executeAsyncScript has to signal about the completion of execution using the callback function.

Invoking methods using executeAsyncScript are majorly used when sleep has to be performed in the browser under test or when tests have to be synchronized within an AJAX application.

Both the methods allow us to return a value using the ‘ return ' keyword and store them in a variable. The data types that can be returned are:

Long
String
Boolean
List
WebElement

Basic Syntax of JavaScriptExecutor in Selenium

The purpose of this section is to provide a high-level idea about the implementation steps of JavaScriptExecutor in Selenium. For demonstration, we have used Java as the prefered programming language.

Let’s take a look at the key steps.

Step 1: Import the package associated with JavascriptExecutor.

import org.openqa.selenium.JavascriptExecutor;

Step 2: Now to utilize JavascriptExecutor, create a reference for the interface and assign it to the WebDriver instance by type casting it.

JavascriptExecutor js = (JavascriptExecutor) driver;

Step 3: We have created a JavascriptExecutor reference. Now we call the executeAsyncScript/executeScript methods. The syntax for executeScript is given below:

js.executeScript(java.lang.String script, java.lang.Object... args)

Parameters:

script — The JavaScript to execute
args — The arguments to the script. May be empty.

Returns Value

Boolean/Long/Double/String/List/Map/WebElement/Null.

Now that we have covered the essentials of JavaScriptExecutor in Selenium, it’s time to get our hands dirty with some implementation! In the upcoming sections, we will check out some scenarios where we use JavaScriptExecutor in Selenium to perform test scenarios (that might not have been performed with common Selenium WebDriver commands).

Note: Test your Appcelerator Titanium CSS framework-based websites across 3000+ different desktop and mobile browsers. A scalable and reliable online testing cloud for both manual and automation testing of Appcelerator Titanium websitesJavaScript Design Patterns.

Scenarios To Use JavaScriptExecutor in Selenium

Let’s examine some scenarios we could handle using JavaScriptExecutor Interface for Selenium test automation.

To Click on a Button

js.executeScript("document.getElementById('enter element id').click();");

//or
js.executeScript("arguments[0].click();", okButton);

2. To Type Text in a Text Box without using sendKeys() method

js.executeScript("document.getElementById(id').value='someValue';");
js.executeScript("document.getElementById('Email').value='SeleniumTesting.com';");

3. To Handle Checkbox by passing the value as true or false

js.executeScript("document.getElementById('enter element id').checked=false;");

4. To generate Alert Pop window in Selenium Webdriver

js.executeScript("alert('Welcome To Selenium Testing');");

5. To refresh browser window using Javascript

js.executeScript("history.go(0)");

6. To get the innertext of the entire webpage in Selenium

String innerText = js.executeScript(" return document.documentElement.innerText;").toString();
System.out.println(innerText);

7. To get the Title of our webpage

String titleText =  js.executeScript("return document.title;").toString();
System.out.println(titleText);

8. To get the domain name

String domainName=  js.executeScript("return document.domain;").toString();
System.out.println(domainName);

9. To get the URL of a webpage

String url=  js.executeScript("return document.URL;").toString();
System.out.println(url);

10. To get the Height and Width of a web page

js.executeScript(“return window.innerHeight;”).toString();
js.executeScript(“return window.innerWidth;”).toString();

11. To find a hidden element in selenium using JavaScriptExecutor

js.executeScript("arguments[0].click();", element);

12. To navigate to a different page using Javascript

js.executeScript("window.location = '[https://www.lambdatest.com](https://www.lambdatest.com)");

13. To perform Scroll on an application using Selenium a) To scroll the page vertically for 500px

js.executeScript(“window.scrollBy(0,500)”);

b) To scroll the page vertically till the end

js.executeScript(“window.scrollBy(0,document.body.scrollHeight)”);

14. Adding an element in DOM

We can also add an element in DOM if required. However, as are only concerned with mimicking user interactions in the browser, this option may not be used.

js.executeScript("var btn=document.createElement('newButton');"

                     + "document.body.appendChild(btn);");

On similar lines, we can practically execute any JavaScript command using Selenium.

Note: Test your ASP.NET CSS framework-based websites across 3000+ different desktop and mobile browsers. A scalable and reliable online testing cloud for both manual and automation testing of ASP.NET websites.

JavaScriptExecutor in Selenium WebDriver Example

In the previous section, we looked at a widely-used JavaScriptExecutor in Selenium commands. Now it’s time to run an end-to-end test scenario! We will be continuing to use Java as the programming language for the demonstration JavaScript in Selenium WebDriver. Let’s dive in!

Pre-requisites

First and foremost, make sure that your system is equipped with the following:

1. Java SDK

Download and install the Java Software Development Kit (JDK) from here.

2. Eclipse or any IDE of choice.

Download the latest version of “Eclipse IDE for Java Developers” from here.

3. Selenium-Java client Driver

Download Selenium Webdriver for Java Client Driver from here.

4. Browser Drivers (only for Local Selenium Grid)

Download various browser drivers from here

Once this criterion is checked, proceed to create a ‘New Project’ in Eclipse. Don’t forget to configure the IDE with Webdriver by adding all the Jars required to the project.

Instead of the local Selenium Grid, the tests are run on a cloud based Selenium Grid by LambdaTest. It provides improved scalability, reliability, and better browser coverage since parallel tests can be run on a range of browser & OS combinations. LambdaTest Selenium Automation Grid is a cloud-based, scalable Selenium test automation platform that enables you to run your automation scripts on 2000+ different browsers and operating systems online.

You can effortlessly migrate the Selenium tests running on a local Selenium Grid to the LambdaTest Selenium Grid through a few additional configurations. After creating a LambdaTest account, make a note of the username & access-key available in the LambdaTest profile section. The browser capabilities are generated using LambdaTest Capabilities Generator.

Time to get our hands dirty with some implementation!

Test Scenario 1 (Demonstration of executeScript)

Login and generate an Alert window using JavaScriptExecutor

Our objective is to write a simple code to illustrate an example using executeScript, where we will:

Launch the web browser (Chrome — latest version on Windows 10 platform)
Go to URL “https://opensource-demo.orangehrmlive.com/"
Enter dummy credentials
Click the login button
Print page title and domain name
Display alert window on successful login.

Run the script. The test gets executed successfully!

Observe the console output and output from Automation Dashboard on LambdaTest.

Test Scenario 2 (Demonstration of executeAsyncScript)

Login and generate an Alert window using JavaScriptExecutor

Our objective is to write a simple code to illustrate an example using executeAsyncScript, where we will:

Launch the web browser (Chrome — latest version on Windows 10 platform)
Go to URL “ https://www.lambdatest.com/ “
Wait for 10 seconds to perform a further action

Run the script. The test gets executed successfully! Here is the snapshot of the execution window (of the IDE) and automation dashboard on LambdaTest.

With this, we have successfully run our test cases on remote Selenium Grid provided by LambdaTest through a hassle-free experience!

Wrapping It Up!

JavaScriptExecutor in Selenium is an interface that is used when Webdriver commands are not working as expected. JavaScriptExecutor allows us to execute JavaScript code on the web page from Webdriver, hence enabling us to handle various operations efficiently and elegantly which is otherwise not possible with languages like Java alone.

In this blog, we learnt how to use JavascriptExecutor in Selenium WebDriver and also understood the different methods provided by JavascriptExecutor. Further we covered various scenarios to attain an effective solution using different methods along with practical examples.

Additionally, we have also performed Selenium test automation by adopting a remote Selenium Grid. If you wish to test and optimize the web application by unlocking coverage in a wider variety of platforms or browsers or versions, feel free to explore the LambdaTest platform.

Happy Testing!

How To Perform Parallel Test Execution In TestNG With Selenium

HaritaLT — Thu, 21 Apr 2022 14:32:18 +0000

The evolution in the process of software delivery in organizations in response to business agility has resulted in a paradigm shift from traditional release cycles to continuous release models. To achieve the product delivery objectives in this new paradigm, continuous testing plays a vital role in ensuring the quality of end-to-end processes, along with ensuring effective collaboration between Quality Assurance (QA) and development teams.

The new era of continuous testing demands QA teams to explore solutions to increase test execution speed. Enterprises are looking to leverage the benefits offered by automation testing while ensuring that manual testing is used in scenarios where automation is not possible.

The traditional approach of manual testing is already taken over by automation testing. One popular automation testing strategy widely adopted by QA teams to further reduce the testing time while ensuring maximum test coverage is the shift from sequential testing to parallel testing. You can perform parallel test execution in TestNG or any other framework of your choice with Selenium.

In this Selenium TestNG tutorial, we deep dive into the integral aspects of parallel testing in TestNG.

Let’s get started!

Introduction to Parallel Test Execution in TestNG

Parallel testing is an approach in which independent tests are run parallel to reduce overall test execution time. A tester runs two or more versions of the software concurrently with the same input or test methods. Each test can be run on multiple devices, browsers, and OS combinations.

The parallel testing process can be applied to a single application, multiple applications, or even multiple components of an application. Parallel execution in TestNG can be achieved at different levels — threads, methods, etc.

Parallel testing was introduced to replace the traditional approach of sequential testing. As the name suggests, in sequential test execution tests are executed one after another, which is more time-consuming.

Because of the growing demand for cross-browser testing in today’s market, parallel testing is implemented heavily with Selenium automation testing.

Advantages of Parallel Test Execution in TestNG

Parallel testing is a powerful approach that allows you to reduce the time taken to perform automation testing. There are various reasons that make it important for testers to adopt parallel testing in Selenium. Some of the most popular reasons are:

Accelerated Test Execution Speed

If a sequential test takes 1 minute to complete a single test execution, it will take 5 minutes to run five tests one after another on the same device. However, overall test execution will take 1 minute (or less) when the same test is run in parallel on 5 devices (or input combinations).

Increased Test Coverage and Wider Compatibility

Parallel testing enables you to test across more devices (desktop or mobile), browsers, and OS combinations at once. This extended test coverage will help in risk mitigation, reducing the chance of unnoticed bugs and offering wider compatibility, which will be instrumental in shipping a top-quality product.

Overcome the Testing Bottleneck

Testing is often the bottleneck of DevOps. Tedious testing cycles can hold up the entire release process. But this bottleneck can be removed by accelerated test execution through parallel testing.

Fix Bugs Earlier

Earlier the testing is completed, earlier the bugs can be unearthed and fixed. In addition, parallel testing is results-driven, since we can test more scenarios in less time, and there is more actionable data towards enhancements.

Flexibility

You can revert to sequential testing when necessary.

Challenges of Parallel Test Execution in TestNG

To achieve full-fledged parallel testing, as with any type of testing, you may face some challenges. The common challenges that you will run into are often related to:

Scalability
Infrastructure limitations. This includes:

Availability of secure, enterprise-grade lab that meet all the requirements
1. Recurring investments involved in the maintenance and upgradation of test infrastructure.

The popular strategy recommended to overcome these challenges and move towards parallel testing is to use cloud-based testing providers. Through Cloud testing, teams can test their apps on devices and browsers hosted on the cloud infrastructure. By utilizing a cloud-based testing infrastructure, you no longer need to maintain in-house infrastructure.

Also, the scalability issues associated with the local testing infrastructure for covering all major browsers, their different versions, and OS will be taken care of. Needless to say, it is more cost-efficient as well.

Cloud-based cross browser testing platforms like LambdaTest offer a cloud Selenium Grid with access to 3000+ real browsers and devices for your testing needs. You can choose a specific OS-device-browser combination as per your requirement. The platform also aids you in performing parallel testing in Selenium, which can drastically scale your automation test and reduce test execution time through easy setup and minimal configurations.

How to perform Parallel Test Execution in TestNG?

TestNG (where NG stands for ‘Next Generation’) is an open-source Java-based test automation framework that has gained huge popularity among developers and testers. The framework itself is inspired by JUnit, another popular unit testing framework in the Java ecosystem. However, it offers a variety of advanced and distinctive features, making it much more powerful than its peers. One such remarkable feature is the seamless support for Parallel Testing.

The TestNG test automation framework allows you to run tests in parallel or multithreaded mode by utilizing the Multi-Threading concept of Java. Multi-Threading is the process of executing multiple threads simultaneously, without any dependence on each other. Therefore, exceptions occurring on one thread won’t affect the others. In TestNG, we enable parallel testing by making required changes in the configuration file — TestNG XML file.

With TestNG certification, you can challenge your skills in performing automated testing with TestNG and take your career to the next level.

Here’s a short glimpse of the TestNG certification from LambdaTest:

However, you can follow the LambdaTest YouTube Channel and stay updated with the latest certifications and tutorials around Selenium testing, Cypress testing, and more.

Parallel Test Execution in Selenium using Configuring TestNG XML in TestNG

TestNG XML is the test suite configuration file in TestNG, which helps you organize your tests by defining test suites, grouping test cases in TestNG, and running them under one XML file. IN a nutshell, it helps in customizing the execution of tests.

It also allows you to run a single test file over numerous combinations of parameters and values specified in it. First, let us go through the key features of the TestNG XML file, which will be useful for this tutorial.

Provides seamless parallel test execution
Supports parameterization in TestNG using @Parameter annotation
Allows grouping of test methods and group execution
Allows executing test cases inside multiple Java class files
TestNG listeners automatically create logs

A simple TestNG XML file without any configuration for the parallel tests will look like this.

To trigger parallel test execution in TestNG, i.e., run tests on separate threads, we need to set the parallel attribute. This attribute accepts four values:

*methods *— runs all methods with @test annotation in parallel mode
tests — runs all test cases present inside tag in the XML in parallel mode
*classes *— runs all test cases present inside classes in the XML in parallel mode
*instances *— runs all test cases in the same instance in parallel mode

We can also set the number of threads we wish to allocate during the execution using the thread-count attribute. TestNG has a default value of thread = 5.

<suite name="Regression Test Suite" parallel="methods" thread-count="2">

Here, we have defined parallel test execution at suite level, and the @test methods will start running simultaneously. The thread count is set to be 2, which means that only two threads will be created for this execution, on which 2 test methods will start running parallelly. If there are more than 2 methods, all the remaining ones need to wait until any of the threads get free.

Now that we know how to configure TestNG for running tests simultaneously, it’s time to do the hands-on! In the upcoming section of this Selenium TestNG tutorial, we will learn how to create a TestNG framework setup and write tests and execute them parallelly through the online Selenium Grid.

Parallel Test Execution in multiple browsers using TestNG for Selenium automation testing

In this section, we will be writing test cases in the TestNG framework and learning how to execute them parallelly at tests, classes, and methods levels by configuring the TestNG XML file. Our test cases will be executed on 5 different browsers — Chrome, Firefox, Safari, IE, and Opera by leveraging the online Selenium Grid provided by LambdaTest. Also, a custom configuration will be done for the browser as well as the OS version. Using LambdaTest, you can now test on Safari browser online on both desktop and mobile browsers for cross browser compatibility.

If you are already working with TestNG, feel free to skip the installation and project set-up part, which we will be covering next.

Installation and Setup

Before getting started with the project setup, make sure that your system is equipped with the following prerequisites:

**Java
**TestNG requires JDK 8 or higher. If you do not have Java installed in your system, you can download Java from the Oracle official website. Don’t forget to set the environment variables as well.
**Eclipse IDE
**In this tutorial, for the demo, we will be using Eclipse as IDE. If not installed already, you can download Eclipse from the official Eclipse website.
**Selenium Webdriver and Client for Java
**You can download by visiting the Selenium WebDriver official website. Selenium WebDriver is an open-source, free Selenium testing tool for browser automation.

Once this list is checked, the next step is to install TestNG in Eclipse. First, go to Eclipse Marketplace and install TestNG. Once installed, you can locate it under the Installed section.

You have now completed the installation. Let us do the basic project setup now.

Note: ClassList provides a way to manipulate classes using the DOMTokenList object.

Creating a TestNG Project

To use TestNG in a Java project, you must know how to create a TestNG project. You can follow the below-mentioned steps to create a new Java project in Eclipse.

Step 1: Launch Eclipse and create a new Java project by navigating to File > New > Java Project.

Step 2: Name your project and click Next.

Step 3: Add libraries by following the below-mentioned steps:

Right-click on the project folder and select Properties.
Choose Java Build Path.
Go to Libraries, select Classpath, and click Add Library.

Step 4: Select TestNG and click Next.

Step 5: Now, you will see that TestNG is added to the project library.

Step 6: Click Finish, and we have successfully created a TestNG project.

Step 7: Add Selenium API JAR files to the TestNG project by following the below-mentioned steps:

Right-click on the project and select Properties.
Select Java Build Path.
Under the libraries section, click on Add External JARs, which gets enabled upon opting for Classpath.
Select the option and upload the JARs for Selenium Java language bindings by navigating to the path where you have downloaded and saved it.

Once done, select Apply and Close.

With this, our project set-up is done, and we are good to start coding. Notice that the libraries are also visible in the left panel.

Note: The Canvas API provides a way to generate fast, dynamic graphics using JavaScript.

How to run test cases in parallel with Selenium in TestNG on Cloud Grid

In this section, we will learn how to achieve parallel test execution in TestNG by running the test cases on separate threads. Follow the below mentioned steps:

Step 1: Launch Eclipse and create a new Java project for TestNG. I have named it ParallelTestNG. You can skip this step if you have followed along with me in the Project set-up part.

Step 2: Create a TestNG class file by following the below-mentioned steps:

Right-click on project src and find TestNG towards the bottom of the list.
Select Create TestNG Class.

Name the class, choose the required annotations and click Finish. Here, I have named the class as TestCasesParallelExecution.

Let us quickly go through the TestNG annotations that have been used:

@test — Implies that the method is a test case. Therefore, all tests should be marked with this annotation.
@BeforeMethod and @AfterMethod — These annotations run once before and after each @test method in a class.

Step 3: Write our first test case using TestNG and Selenium. Finally, it is time to get our hands dirty! In this section, we will be writing our first test case using TestNG. For this demo, I will be writing an automation test for a simple login scenario. Following are the test steps:

Launch the website URL (https://opensource-demo.orangehrmlive.com/)
Enter username and password.
Click on the LOGIN button.

Like mentioned before, we will be running this test case parallelly on five different browsers through an online Selenium Grid provided by LambdaTest.

Let us write our test case inside the TestNG class we created in the previous step. Follow along with me.

Create a free account in LambdaTest and secure your unique username and access key.
Inside the ParallelTest class(the TestNG class), define all the required variables for connecting with the Remote Grid. In addition, you will need to provide your unique username, and access key.

public class TestCasesParallelExecution {

public String username = "YOUR_USERNAME";
public String accesskey = "YOUR_ACCESSKEY";
public RemoteWebDriver driver = null;
public String gridURL = "@hub.lambdatest.com/wd/hub";
boolean status = false;
..
}
Define automation setup steps inside the method marked by @BeforeClass annotation. This method gets executed first. Notice that I have also changed the method name from beforeClass() to setUp().

Inside the setUp(), we have defined the following:

DesiredCapabilities for custom configuring our browser-device-OS version, enabling reporting and logging features, and naming the build. I have generated this by utilizing the Desired Capabilities Generator offered by LambdaTest.
A New instance of RemoteWebDriver()
Also, I have added @Parameters annotation on top of the method for receiving the browser, version, and platform values from our TestNG XML file.

@BeforeMethod
@Parameters(value={"browser","version","platform"})
public void setUp(String browser, String version, String platform) throws Exception {
DesiredCapabilities capabilities = new DesiredCapabilities();
capabilities.setCapability("browserName", browser);
capabilities.setCapability("version", version);
capabilities.setCapability("platform", platform); // If this cap isn't specified, it will just get the any available one
capabilities.setCapability("build", "ParallelTestNG");
capabilities.setCapability("name", "ParallelTestNG");
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 + gridURL), capabilities);
} catch (MalformedURLException e) {
System.out.println("Invalid grid URL");
} catch (Exception e) {
System.out.println(e.getMessage());
}
}

Define tear-down steps inside the method marked by @AfterClass annotation. This method gets executed last. Notice that I have also changed the method name from afterClass() to tearDown().

@AfterMethod
public void tearDown() throws Exception {
if (driver != null) {
driver.quit();
}
}
Write our actual test steps. Our test methods will be marked by the @test annotation. Since we are performing a login scenario, I have renamed the method to login().

@Test
public void login() {

// To navigate to URL
driver.get("https://opensource-demo.orangehrmlive.com/");
// To locate input field for username and enter value
driver.findElement(By.name("txtUsername")).sendKeys("Admin");
// To locate input field for password and enter value
driver.findElement(By.name("txtPassword")).sendKeys("admin123");
// To locate and click on login button
driver.findElement(By.className("button")).click();

}

I have made use of Chrome Developer tools for locating the elements.

Our final code looks like this:

package testng;

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

import org.openqa.selenium.By;
import org.openqa.selenium.remote.DesiredCapabilities;
import org.openqa.selenium.remote.RemoteWebDriver;
import org.testng.annotations.AfterMethod;
import org.testng.annotations.BeforeMethod;
import org.testng.annotations.Parameters;
import org.testng.annotations.Test;

public class TestCasesParallelExecution {

public String username = "YOUR_USERNAME";
public String accesskey = "YOUR_ACCESSKEY";
public RemoteWebDriver driver = null;
public String gridURL = "@hub.lambdatest.com/wd/hub";
boolean status = false;

@BeforeMethod
@Parameters(value={"browser","version","platform"})
public void setUp(String browser, String version, String platform) throws Exception {
    DesiredCapabilities capabilities = new DesiredCapabilities();
     capabilities.setCapability("browserName", browser);
     capabilities.setCapability("version", version);
     capabilities.setCapability("platform", platform); // If this cap isn't specified, it will just get the any available one
     capabilities.setCapability("build", "ParallelTestNG");
     capabilities.setCapability("name", "ParallelTestNG");
     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 + gridURL), capabilities);
     } catch (MalformedURLException e) {
         System.out.println("Invalid grid URL");
     } catch (Exception e) {
         System.out.println(e.getMessage());
     }
 }
@Test
public void login() {

  // To navigate to URL
  driver.get("https://opensource-demo.orangehrmlive.com/");
  // To locate input field for username and enter value
  driver.findElement(By.name("txtUsername")).sendKeys("Admin");
  // To locate input field for password and enter value
  driver.findElement(By.name("txtPassword")).sendKeys("admin123");
  // To locate and click on login button
   driver.findElement(By.className("button")).click();          
}

@AfterMethod
    public void tearDown() throws Exception {
       if (driver != null) {
            driver.quit();
        }
    }
}

Step 4: Configure the TestNG XML file. In this step, we will create the testng.xml file for our project and configure it to enable our tests to run in parallel mode. The steps are as below:

Right-click on our Project. Select New > File and name it as testng.xml.
Add the following boilerplate code to get started. You can name the test suite and test name as per your liking. But the class name should be exact as that of our TestNG class.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE suite SYSTEM "https://testng.org/testng-1.0.dtd">
To trigger parallel test execution in TestNG, provide the parallel attribute to . As mentioned before, we can assign any of the four values given below, as per our requirement. For parallel execution of test methods, set the attribute value as “tests.”
Add parameters for configuring the tests to run in a specific browser, browser version, and OS. For example, below is the code for setting up the test case to run in Chrome Browser version 79.0 in Windows 10. Likewise, you can provide as many combinations as you like.

The final code for testng.xml looks like this.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE suite SYSTEM "https://testng.org/testng-1.0.dtd">
<suite name="Parallel Test Suite" parallel="tests" thread-count="5">

    <test name="Chrome Test">
        <parameter name="browser" value="chrome" />
        <parameter name="version" value="79.0" />
        <parameter name="platform" value="WIN10" />
        <classes>
            <class name="testng.ParallelTest" />
        </classes>
    </test>

    <test name="Firefox Test">
        <parameter name="browser" value="firefox" />
        <parameter name="version" value="62.0" />
        <parameter name="platform" value="WIN8" />
        <classes>
            <class name="testng.ParallelTest" />
        </classes>
    </test>

    <test name="Safari Test">
        <parameter name="browser" value="safari" />
        <parameter name="version" value="11.0" />
        <parameter name="platform" value="macos 10.13" />
        <classes>
            <class name="testng.ParallelTest" />
        </classes>
    </test>

        <test name="IE Test">
        <parameter name="browser" value="ie" />
        <parameter name="version" value="11.0" />
        <parameter name="platform" value="WIN10" />
        <classes>
            <class name="testng.ParallelTest" />
        </classes>
    </test>

            <test name="Opera Test">
        <parameter name="browser" value="opera" />
        <parameter name="version" value="73.0" />
        <parameter name="platform" value="WIN10" />
        <classes>
            <class name="testng.ParallelTest" />
        </classes>
    </test>


    <!-- Test -->
</suite> <!-- Suite -->

We have a total of 5 different tags, and each of these will run on different threads.

Finally, it is time to run our test case. Right-click on our testng.xml file and navigate to Run As > TestNG Test Suite.

Our test starts getting executed. Go to your LambdaTest Automation Dashboard to see the live running status.

The test is executed parallelly in the 5 browsers, and reports and logs are generated successfully.

How to run test methods in parallel with TestNG

Now let us see how to run test methods parallelly in the TestNG. In this example, we will create one more method and execute them on different threads. The steps are as below:

Step 1: Create a new TestNG class file. You can also opt for an auto-defined TestNG XML file.

Step 2: Inside this class, I have added a new test method forgotPassword() which will:

Launch the website URL (https://opensource-demo.orangehrmlive.com/).
Click on Forgot your password? link.
Enter Username.
Click the Reset Password button.

[@Test](http://twitter.com/Test)
  public void forgotPassword() {

    // To navigate to URL
    driver.get("[https://opensource-demo.orangehrmlive.com/](https://opensource-demo.orangehrmlive.com/)");
    // To locate and click on Forgot password link
    driver.findElement(By.linkText("Forgot your password?")).click();
    // To locate input field and enter username
    driver.findElement(By.id("securityAuthentication_userName")).sendKeys("testuser");
    // To locate and click on reset button
    driver.findElement(By.id("btnSearchValues")).click();          
  }

So the final code will look like this:

package testng;
import java.net.MalformedURLException;
import java.net.URL;

import org.openqa.selenium.By;
import org.openqa.selenium.remote.DesiredCapabilities;
import org.openqa.selenium.remote.RemoteWebDriver;
import org.testng.annotations.AfterMethod;
import org.testng.annotations.BeforeMethod;
import org.testng.annotations.Parameters;
import org.testng.annotations.Test;

public class TestMethodParallelExecution {

public String username = "YOUR_USERNAME";
public String accesskey = "YOUR_ACCESSKEY";
public RemoteWebDriver driver = null;
public String gridURL = "@hub.lambdatest.com/wd/hub";
boolean status = false;

@BeforeMethod
@Parameters(value={"browser","version","platform"})
public void setUp(String browser, String version, String platform) throws Exception {
    DesiredCapabilities capabilities = new DesiredCapabilities();
     capabilities.setCapability("browserName", browser);
     capabilities.setCapability("version", version);
     capabilities.setCapability("platform", platform); // If this cap isn't specified, it will just get the any available one
     capabilities.setCapability("build", "TestMethodParallelExecution");
     capabilities.setCapability("name", "TestMethodParallelExecution");
     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 + gridURL), capabilities);
     } catch (MalformedURLException e) {
         System.out.println("Invalid grid URL");
     } catch (Exception e) {
         System.out.println(e.getMessage());
     }
 }


@Test
public void login() {

  // To navigate to URL
  driver.get("https://opensource-demo.orangehrmlive.com/");
  // To locate input field for username and enter value
  driver.findElement(By.name("txtUsername")).sendKeys("Admin");
  // To locate input field for password and enter value
  driver.findElement(By.name("txtPassword")).sendKeys("admin123");
  // To locate and click on login button
   driver.findElement(By.className("button")).click();          
}

  @Test
  public void forgotPassword() {

    // To navigate to URL
    driver.get("https://opensource-demo.orangehrmlive.com/");
    // To locate and click on Forgot password link
    driver.findElement(By.linkText("Forgot your password?")).click();
    // To locate input field and enter username
    driver.findElement(By.id("securityAuthentication_userName")).sendKeys("testuser");
    // To locate and click on reset button
    driver.findElement(By.id("btnSearchValues")).click();          
  }

@AfterMethod
    public void tearDown() throws Exception {
       if (driver != null) {
            driver.quit();
        }
    }
}

}

Step 3: Configure the TestNG XML file. Set the value of the parallel attribute as ”methods”. My testng2.xml file now looks like this.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE suite SYSTEM "[https://testng.org/testng-1.0.dtd](https://testng.org/testng-1.0.dtd)">
<suite name="Parallel Test Suite" parallel="methods" thread-count="2">

    <test name="Chrome Test">
        <parameter name="browser" value="chrome" />
        <parameter name="version" value="79.0" />
        <parameter name="platform" value="WIN10" />
        <classes>
            <class name="testng2.TestMethodParallelExecution" />
        </classes>
    </test>
    <!-- Test -->
</suite> <!-- Suite -->

Step 4: Run the tests. Our two test methods start running in parallel. You can observe the live running status in your LambdaTest dashboard.

Note: Autofocus attribute — a lightweight JavaScript library that allows a form field to be immediately focused on page load.

How to run test classes in parallel with TestNG

Lastly, let us see how to run test classes parallelly in the TestNG. First, let us create 2 classes that will be running parallel on separate threads.

Create 2 classes — TestClassOne and TestClassTwo. Each contains a test method.

TestClassOne.java

package testng3;

import org.testng.annotations.Test;
import org.testng.annotations.BeforeMethod;
import org.testng.annotations.Parameters;

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

import org.openqa.selenium.By;
import org.openqa.selenium.remote.DesiredCapabilities;
import org.openqa.selenium.remote.RemoteWebDriver;
import org.testng.annotations.AfterMethod;

public class TestClassOne {

    public String username = "YOUR_USERNAME";
    public String accesskey = "YOUR_ACCESSKEY";
    public RemoteWebDriver driver = null;
    public String gridURL = "@hub.lambdatest.com/wd/hub";
    boolean status = false;


    @BeforeMethod
    @Parameters(value={"browser","version","platform"})
    public void setUp(String browser, String version, String platform) throws Exception {
        DesiredCapabilities capabilities = new DesiredCapabilities();
        capabilities.setCapability("browserName", browser);
        capabilities.setCapability("version", version);
        capabilities.setCapability("platform", platform); // If this cap isn't specified, it will just get the any available one
        capabilities.setCapability("build", "TestMethodParallelExecution");
        capabilities.setCapability("name", "TestMethodParallelExecution");
        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 + gridURL), capabilities);
        } catch (MalformedURLException e) {
            System.out.println("Invalid grid URL");
        } catch (Exception e) {
            System.out.println(e.getMessage());
        }
    }

    @Test
    public void login() {

        // To navigate to URL
        driver.get("https://opensource-demo.orangehrmlive.com/");
        // To locate input field for username and enter value
        driver.findElement(By.name("txtUsername")).sendKeys("Admin");  
        // To locate input field for password and enter value
        driver.findElement(By.name("txtPassword")).sendKeys("admin123");
        // To locate and click on login button
        driver.findElement(By.className("button")).click();            
    }

    @AfterMethod
    public void tearDown() throws Exception {
        if (driver != null) {
            System.out.println("Tearing down..");
            driver.quit();
        }
    }
}

TestClassTwo.java

package testng3;

import org.testng.annotations.Test;
import org.testng.annotations.BeforeMethod;
import org.testng.annotations.Parameters;

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

import org.openqa.selenium.By;
import org.openqa.selenium.remote.DesiredCapabilities;
import org.openqa.selenium.remote.RemoteWebDriver;
import org.testng.annotations.AfterMethod;

public class TestClassTwo {

    public String username = "haritagr16";
    public String accesskey = "KhRUhWBtSMg06DfGkKDY1khYNJm95695WV42HfaYPot7nqQfw6";
    public RemoteWebDriver driver = null;
    public String gridURL = "@hub.lambdatest.com/wd/hub";
    boolean status = false;

    @BeforeMethod
    @Parameters(value={"browser","version","platform"})
    public void setUp(String browser, String version, String platform) throws Exception {
        DesiredCapabilities capabilities = new DesiredCapabilities();
        capabilities.setCapability("browserName", browser);
        capabilities.setCapability("version", version);
        capabilities.setCapability("platform", platform); // If this cap isn't specified, it will just get the any available one
        capabilities.setCapability("build", "ParallelTestNG");
        capabilities.setCapability("name", "ParallelTestNG");
        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 + gridURL), capabilities);
        } catch (MalformedURLException e) {
            System.out.println("Invalid grid URL");
        } catch (Exception e) {
            System.out.println(e.getMessage());
        }
    }

    @Test
    public void forgotPassword() {

        // To navigate to URL
        driver.get("https://opensource-demo.orangehrmlive.com/");
        // To locate and click on Forgot password link
        driver.findElement(By.linkText("Forgot your password?")).click();  
        // To locate input field and enter username
        driver.findElement(By.id("securityAuthentication_userName")).sendKeys("testuser");
        // To locate and click on reset button
        driver.findElement(By.id("btnSearchValues")).click();              
    }

    @AfterMethod
    public void tearDown() throws Exception {
        if (driver != null) {
            System.out.println("Tearing down..");
            driver.quit();
        }
    }
}

Create a new TestNG XML file and set the parallel attribute as “classes.”

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE suite SYSTEM "https://testng.org/testng-1.0.dtd">

<test name="Chrome Test">
    <parameter name="browser" value="chrome" />
    <parameter name="version" value="79.0" />
    <parameter name="platform" value="WIN10" />
    <classes>
        <class name="testng3.TestClassOne" />
        <class name="testng3.TestClassTwo" />
    </classes>
</test> 
<!-- Test -->

Run your test suite. The test gets executed successfully.

Conclusion

Parallel testing is widely adopted by Agile teams to radically reduce the time and cost associated with the traditional testing methods. It enables you to speed up the overall test cycle and deliver projects at a faster rate. To maximize the test coverage while ensuring scalability, the responsibility of maintaining a testing grid is often outsourced to cloud-based platforms.

In this Selenium TestNG tutorial, we learned how to achieve parallel test execution in the TestNG framework with Selenium. We have also leveraged the cloud-based Selenium Grid provided by LambdaTest to run our test cases parallelly in 5 different browsers while performing Selenium automation testing with TestNG. I hope this tutorial turned out to be beneficial to you. So, keep exploring different angles of parallel testing.

Happy Coding!

Automation Testing with Selenium JavaScript [Tutorial]

HaritaLT — Wed, 20 Apr 2022 09:02:30 +0000

Automation testing is an integral part of software development. When it comes to web applications, it is essential to test the user interface to ensure that a flawless experience is delivered to the end-users. This is where Selenium automation testing is instrumental to verify the product across different combinations of browsers & operating systems. Selenium supports a wide range of programming languages which also includes JavaScript.

In this Selenium Javascript tutorial, we take a deep dive into how Selenium Webdriver with Javascript can be used for automated testing of web products. By the end of this Selenium Javascript Tutorial, you would be in a comfortable position to perform Selenium automation testing using JavaScript.

Why Selenium Automation Testing Using JavaScript?

Before we get to the crux of the Selenium Javascript tutorial, it is essential to understand why the combination of Selenium Webdriver and Javascript is suited for automation testing? Let’s answer this important question:

A number of tools and frameworks are available in the market to perform automation testing. Out of these, Selenium continues to be, hands down, the first choice of QA engineers over the past decade or so.

Few of the key features of Selenium web automation are listed below:

Open-Source and portable
Supports multiple browsers like Google Chrome, Firefox, Safari, Opera, Internet Explorer, etc.
Supports multiple languages like Java, JavaScript, Ruby, Python, etc.
Works on different OS like Windows, Linux, etc.
Easy to integrate with CI/CD tools like Jenkins, Circle CI, GitLab CI, and more
Easy to integrate with popular testing frameworks

Over & above, parallel testing in Selenium expedites the entire automation testing process by providing a platform through which the same tests can be run across different environments. You can check out our Selenium learning hub to gather more insights into Selenium web automation.

Now let’s look at why Selenium Webdriver with Javascript! Well, JavaScript is one of the widely used programming languages as per the Stack Overflow 2020 annual survey.

Since JavaScript is extensively used for web development, utilizing it with Selenium web automation makes perfect sense! Since most of the developers are familiar with JavaScript, it becomes easy for them to write automation tests in JavaScript and get quick feedback.

With that said, let’s proceed to the next section in this Selenium Javascript tutorial where we focus on the setup and installation process.

Ripe MD 320 Hash Calculator — Free online tool for encrypting your personal data.

Getting started with Selenium automation testing using JavaScript

As mentioned earlier, the Selenium framework supports multiple languages (and frameworks) for realizing cross-browser compatibility tests. Here is how you can get started with JavaScript with Selenium WebDriver:

Prerequisites for Selenium Webdriver with Javascript

Before you start using JavaScript for Selenium automation testing, you need to ensure that your system is installed with the following pre-requisites:

NodeJS and NPM

Verify if NodeJS and NPM are already installed in your system by running the commands node -v and npm -v on the terminal:

If Node JS (or Node.js) is not present on your machine, you can install the latest LTS version from https://nodejs.org/en/. NPM will be installed along with Node.js. So no need for separate installation.

IDE of your choice

For implementation, we will be using Visual Studio Code as IDE. However, you can choose an IDE of your choice.

Project Setup for Selenium Webdriver with Javascript

With the required dependencies installed, let’s move on to the project setup in this section of the Selenium Javascript Tutorial.

Here are the step-by-step instructions for creating a project to use JavaScript with Selenium WebDriver:

Step 1: Create a project folder in the desired location in your system. Open the folder in your IDE.

Step 2: Initialize the project in this folder. Open the IDE terminal and navigate to the project location. Run the following command

npm init -y

Here, -y stands for “yes”. This option is used to skip the questions asked related to project details.

You will notice that a package.json file is automatically created. The file contains details about the project configuration.

Step 3: Now, install the project dependencies. We need to install Selenium WebDriver and browser drivers.

Run the following command on the terminal to install browser drivers for Chrome and Firefox.

npm install --save selenium-webdriver chromedriver geckodriver

Once you run the command, you’ll notice that a “node_modules” folder is created in the project root. The folder contains all the dependencies. Also, package.json will be updated with these dependencies.

{
  "name": "Selenium_JavaScript",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "chromedriver": "^90.0.0",
    "geckodriver": "^1.22.3",
    "selenium-webdriver": "^4.0.0-beta.3"
  }
}

With this, the setup for Selenium Webdriver JavaScript is complete. It’s time to dirty our hands with code in the next section of the Selenium JavaScript Tutorial.

Paste any number of words, sentences, and paragraphs and find out the final Sentence count with a click.

Demonstration: Selenium Automation with JavaScript

In this section of the Selenium JavaScript tutorial, we run a Selenium automation test with JavaScript. Here is the test scenario:

Launch the browser
Go to www.google.com
Searches a string value
Verifies the result page title
Close the browser

Implementation:

Step 1: Create a folder named “tests” in the project root. Inside this folder, we create our first test file named “test.js”.

Shown below is the folder structure:

Step 2: Inside test.js, pull all the required functions from node_modules.

const {By,Key,Builder} = require("selenium-webdriver");
require("chromedriver");

Step 3: Create a function example(), which will be containing your test script. Feel free to provide any function name of your choice.

async function example(){

}

Step 4: Inside the function, let us write our test script using Selenium and JavaScript.

async function example(){

       var searchString = "Automation testing with Selenium and JavaScript";

       //To wait for browser to build and launch properly
       let driver = await new Builder().forBrowser("chrome").build();

        //To fetch [http://google.com](http://google.com) from the browser with our code.
        await driver.get("[http://google.com](http://google.com)");

        //To send a search query by passing the value in searchString.
        await driver.findElement(By.name("q")).sendKeys(searchString,Key.RETURN);

        //Verify the page title and print it
        var title = await driver.getTitle();
        console.log('Title is:',title);

        //It is always a safe practice to quit the browser after execution
        await driver.quit();

}

Step 5: Now simply add the function call. Here is how the overall implementation looks like:

const {By,Key,Builder} = require("selenium-webdriver");
require("chromedriver");

async function example(){

       var searchString = "Automation testing with Selenium";

       //To wait for browser to build and launch properly
       let driver = await new Builder().forBrowser("chrome").build();

        //To fetch [http://google.com](http://google.com) from the browser with our code.
        await driver.get("[http://google.com](http://google.com)");

        //To send a search query by passing the value in searchString.
        await driver.findElement(By.name("q")).sendKeys(searchString,Key.RETURN);

        //Verify the page title and print it
        var title = await driver.getTitle();
        console.log('Title is:',title);

        //It is always a safe practice to quit the browser after execution
        await driver.quit();

}

example()

Step 6: Time for some action…let’s run the code by giving the following command on the terminal:

node test.js

An instance of Chrome browser is instantiated and the necessary Selenium WebDriver actions are performed on the WebElements.

The logs can be verified in the terminal:

Congratulations! You have successfully written and executed your first test case using Selenium Webdriver and JavaScript.

Best Practices for Selenium with JavaScript

In the previous section of the Selenium WebDriver tutorial, we demonstrated the creation of automation script with Selenium and JavaScript. However, the situation will differ when you have to write Selenium automation scripts for large projects. It is essential to follow the best practices in Selenium automation when designing test automation scripts.

As QA engineers, we should come up with strategies that enable us to effectively and efficiently write test scripts, manage them, and speed up the overall execution. Here are some of the the best practices used for Selenium WebDriver with JavaScript:

Using Page Object Model (POM)

Page Object Model (POM) is a design pattern popularly used in Selenium web automation. Here we will be creating an object repository for storing all web elements. A Page Class is created for each web page. Every Page class contains details of the particular page Web elements and Page Methods that perform tasks on those web elements.

Here are the major advantage of Page Object Model for Selenium web automation:

Reduced maintenance
Minimal Code Duplication
Increased Readability and Reliability of scripts

Leveraging JavaScript Automation Frameworks

Another strategy that is gaining tremendous popularity is leveraging an automation testing framework. A framework offers multiple benefits when it comes to script maintenance, third-party tool integration, reporting, etc. A variety of JavaScript-based testing frameworks are available for automation testers. Some of the popular JavaScript-based test frameworks are Nightwatch.js, Protractor, WedriverIO, Cypress.io, etc.

Parallel Testing

Parallel testing in Selenium lets you run multiple tests simultaneously in different environments. This directly translates to increased execution speed, reduced overall execution time, and early detection of bugs. Selenium Grid supports parallel testing.

Implementing CI/CD Pipeline

CI/CD as a practice is gaining huge attention on the backdrop of software development backed by Agile and DevOps. Building a CI/CD pipeline for Selenium web automation has the following benefits:

Quicker execution leading to early bug detection.
Consistent results
Room for parallel testing capabilities
Offers greater scalability
Program automatic triggers etc.

A wide range of CI/CD tools is available from which you can choose the one matching your requirement. A few of the popular options are Jenkins, Bamboo, GitLab, etc.

Visual Testing

Since we are dealing with testing the UI of the web app, it is vital to test the visual aspects of the app as well. In Visual testing, we will compare a web page with a base or reference screenshots were taken before to expose the significant visual differences. LambdaTest provides a visual regression testing tool that lets you perform visual UI testing with ease.

Test Coverage using Cross browser testing

To stay ahead in the competitive market and gain user preference it is vital to make sure that your application is working as expected across different versions of browsers, platforms, and devices. This is exactly where test coverage and cross-browser testing comes into the picture.

Here are the major benefits of adopting cloud based cross browser testing:

Low investment cost in comparison to setting & scaling up an in-house infrastructure
Provides access to hundreds of browser and platform combinations
Extends supports to old and outdated browser versions and OS devices
No set-up or installation, or maintenance needs to be done locally
Better security, reliability, and scalability

LambdaTest is a trusted cross browser testing platform that provides you access to 2000+ browsers and operating systems online. The Selenium automation tests are executed on a secure cloud-based Selenium Grid.allows you to execute automated tests on a remote Selenium Grid. Do check why you should test websites on different browsers remotely.

SHA384 Hash calculator — the program helps you determine the integrity of your data and challenge hash authentication.

How to run automation scripts with JavaScript on cloud-based Selenium Grid

In the earlier section of the Selenium JavaScript tutorial, we performed Selenium automation using JavaScript on a local grid. Now that you are aware about the shortcomings of the local Selenium Grid, it’s time to look at how to run JavaScript tests with Selenium Grid on a cloud-based Selenium Grid.

LambdaTest is a popular cloud-based cross browser testing platform trusted by startups as well as large enterprises. LambdaTest provides you access to thousands of browsers for mobile and web testing to help you gain the maximum test coverage during the process of Selenium web automation.

Porting existing implementations of JavaScript with Selenium WebDriver such that it runs on a cloud-based Selenium Grid requires minimal code changes. Let’s look at how to run the Selenium automation test with JavaScript on LambdaTest:

Step 1: Let’s get started by creating a free account on the LambdaTest platform. Once you log in, fetch your unique username and access key from the profile section of the website.

Step 2: Make the following configuration changes into your existing code.

Provide username and access key

const USERNAME = 'YOUR_USERNAME'; //replace with your username
const KEY = 'YOUR_KEY'; //replace with your accesskey
Provide the host corresponding to the LambdaTest platform

const GRID_HOST = 'hub.lambdatest.com/wd/hub';
Generate the desired browser capabilities using LambdaTest Capabilities Generator.

Select the desired browser version and OS configuration. You may also provide the build name. Provide this object inside the test function.

async function example(){

var capabilities = {
        "build" : "JavaScript and Selenium Testing",
        "name" : "Google search",
        "platform" : "Windows 10",
        "browserName" : "Chrome",
        "version" : "90.0",
        "selenium_version" : "3.13.0",
        "chrome.driver" : "90.0"
    }
     //…
}

Provide the gridUrl. You can also find this value from Automation Dashboard of LambdaTest.

const gridUrl = 'https://' + USERNAME + ':' + KEY + '@' + GRID_HOST;
Finally, edit the code to build and instantiate the browser on the designated platform

let driver = await new Builder()
.usingServer(gridUrl)
.withCapabilities(capabilities)
.build();

Step 3: Finally, it’s time to run the test on the LambdaTest Grid. Trigger the following command on the terminal to run the JavaScript Automation test with Selenium Webdriver:

node test.js

Shown below is the execution snapshot from the LambdaTest automation dashboard which indicates that the test execution was successful.

Navigate to Automation Logs to view the test report containing video and logs.

In this final section of the Selenium JavaScript tutorial, we ran the JavaScript automation test with Selenium WebDriver on a scalable and reliable cloud-based Selenium Grid by LambdaTest.

It’s a Wrap!

JavaScript is one of the most preferred languages when it comes to Selenium automation testing. In this Selenium JavaScript tutorial, we deep dived into the basic aspects of Selenium WebDriver automation with JavaScript. We also explored the Selenium automation best practices that will help you create scalable automation tests with JavaScript and Selenium WebDriver.

For better scalability, reliability, and performance; it is recommended to run Selenium WebDriver JavaScript tests on a cloud-based Selenium Grid from LambdaTest. With that setup, you can make the most out of the automation tests created using Selenium and JavaScript. In the next series of this Selenium JavaScript tutorial, we would deep dive into the other vital aspects of Selenium automation testing with JavaScript.

Happy Testing!

Using Page Object Model (POM) Pattern In Selenium JavaScript

HaritaLT — Tue, 19 Apr 2022 11:25:47 +0000

Design patterns in Selenium automation testing provide a way to handle commonly occurring problems and structure your test code in a relatively standardized way. Using design patterns, you can solve some of the common issues such as testing complex user transactions, functional testing of several web pages, and unearth performance issues related to throttling internet connectivity.

One of the popular test automation design patterns is Page Object Pattern. It is one of the most important design patterns, as it makes tests maintainable, reusable, and pushes us to think about how to structure our automation code better.

In this Selenium JavaScript tutorial, we will be discussing in detail about the Page Object Pattern in JavaScript using Selenium WebDriver. We will try to understand the benefits of adopting this pattern and demonstrate practical implementation examples using the trending test automation framework — WebdriverIO.

Let’s get started!

What is Page Object Pattern

The Page Object Pattern is a design practice that is commonly adopted by testers when performing Selenium automation testing. The primary goal of this pattern is to avoid code duplication and enhance code reusability. This enhances the overall ease of test case maintenance and robustness of the test code, thereby making it more programmer-friendly.

To understand the objective of this pattern, first of all, let us try to understand precisely what we can achieve with it when performing web automation testing. Automation tests allow us to navigate to different web pages and perform relevant actions with the WebElements that are identified using the appropriate Selenium locators. The Page Object Pattern wraps all the elements, actions, and validations happening on a page in one single Page Object.

The creator of WebDriver, Simon Stewart, states-

“If you have WebDriver APIs in your test methods, You’re Doing It Wrong.”

The Page Object Pattern directs us to create an object that represents the UI of the page we want to test. As mentioned, this object will wrap all the HTML elements (locators) and encapsulates interactions with the UI (methods). For example, all the WebDriver calls will go inside these encapsulated methods. So, this is the only place that you need to modify when the UI changes, i.e. the element locators are centralized.

Frequent UI changes will only impact the files that are housing the locators, with minimal (or zero) changes in the test implementation.

This series of page objects are responsible for communicating with the web pages you are testing by cleanly separating the actual test code from the page-specific code.

Keep the following best practices in mind when creating page objects:

The page object can be created for a whole page/screen or even major fragments of it
Avoid unnecessary complexity, which leads to hard-to-read spaghetti code
Page objects should only exist if some behavior makes sense from the user’s perspective

Advantages of Page Object Pattern

The benefits of utilizing this pattern becomes apparent while testing complex, large-scale applications where you will need to manage a larger suite of regression tests.

As these applications are only expected to grow larger and more complex with every software release, adopting the Page Object Pattern makes sense as it can prove to be a huge time and cost saver for the project.

Major advantages of following the Page Object Pattern are:

Ease of code maintenance
Code Reusability across tests
Enhanced script readability and reliability
Decouples your test code and page-specific code, such as locators and interactions

Page Object Pattern in JavaScript using WebdriverIO

WebdriverIO is one of the top JavaScript test automation frameworks in the market. It is very popular among testers as well as developers backed up by an active community to support.

According to the official WebdriverIO documentation, the latest versions of the framework were designed with Page Object Pattern in Selenium support in mind. To create Page Objects, no additional packages are required. All the necessary features are provided by the clean and modern classes such as:

Inheritance between Page Objects
Lazy loading of elements
Encapsulation of methods and actions

The elements are treated as “first-class citizens.” Hence, using this pattern, the framework enables you to build up larger test suites. In the upcoming section of this Selenium JavaScript tutorial, we will demonstrate how to implement the Page Object Pattern in JavaScript using the WebdriverIO framework and write automation tests. But before that, let’s check the prerequisites.

Random Decimal Generator allows users to generate random decimal numbers.

Prerequisites for writing automation tests in JavaScript

Before proceeding to write Selenium automation tests, make sure that your system has met the following requirements:

1. Node.js and NPM

To check if Node.js is installed in your machine, just execute the following command in your terminal:

node -v

If installed, the installed Node.js version will be displayed. Else you can download the latest LTS version from the Node.js official website.

Similarly, you can check the installed NPM version using the following command:

npm -v

Note: NPM will be installed along with Node.js. There is no need for separate installation.

2. Any IDE of choice

For this Selenium JavaScript tutorial, we will be using Visual Studio Code as IDE. But feel free to pick any IDE of your preference.

You can refer to our blog titled automation testing with Selenium JavaScript in case you want to deep dive into the basics of Selenium JavaScript.

With these checked, let us move on to setting up the project workspace.

Step 1: Create a folder for the project in the desired location in your system. We will call this folder “PageObjectPattern.” Then, open the folder in IDE.

Step 2: Initialize the project with the package.json file. Then, type the following command in the terminal:

npm init -y

With this, we have successfully created the package.json file. The optional parameter -y allows you to skip all the configuration questions asking for “Yes” prompts and set up a default package.json setting for your project, as shown in the below screenshot.

Step 3: The next step would be the installation of the dependencies. Install the CLI tool for WebdriverIO by using the following command:

npm install --save-dev @wdio/cli

Step 4: Finally, set up the WebdriverIO configuration file using the following command:

npx wdio config

You will be prompted to choose the configurations for getting started. Select them as per your requirement.

Note: We will use Mocha as the framework and Chrome as the virtual browser for this Page Object Pattern in Selenium JavaScript tutorial.

As mentioned earlier, the WebdriverIO framework natively supports Page Object Pattern. Therefore, by selecting the configuration highlighted below, you will be able to auto-generate the Page Object folder structure along with executable sample tests, as shown in the below screenshot.

You can also skip the configuration questions and opt for the default set-up by adding the -y flag to the command below.

npx wdio config -y

Using this command, the following packages are configured automatically, which of course, you can later change if you want to:

@wdio/local-runner
@wdio/mocha-framework
@wdio/spec-reporter
@wdio-chromedriver-service
@wdio/sync — chromedriver

You will see that the wdio.conf.js file gets created under the project root. Therefore, the overall folder structure will look like this.

Note: In this tutorial on Page Object Pattern in JavaScript, we will set up our page object framework from scratch. So I have not opted for auto-generated tests.

That’s pretty much it with the installation and configuration part while working with Page Object Pattern in JavaScript. Now it’s time to get your hands dirty!

In the next section of this Selenium JavaScript tutorial, we will learn to write our first automated test case using the JavaScript Page Object Pattern.

There are certain steps that have to be considered before writing the first test script in JavaScript. We have discussed these steps in detail, including setting up an environment for writing Selenium tests with JavaScript bindings in our earlier Selenium JavaScript tutorial series.

Random Hex Generator allows users to generate random HEX numbers.

However, no matter where you are in the Selenium JavaScript journey — planning how to start, looking for resources to improve, etc. — you can find helpful videos at LambdaTest YouTube channel.

Writing your first test case using Page Object Pattern in JavaScript

We will be writing a test case for simple login functionality, which contains the following steps:

Launch the app (https://opensource-demo.orangehrmlive.com/).
Enter the correct username and password.
Click the Login button.
Verify the navigation to the dashboard page on successful login.

Step 1: Let’s start with creating the folder structure. One of the primary goals of the Page Object Pattern in JavaScript is to provide abstraction between page information and actual tests. So it makes sense from the structural side to separate Page Objects and actual tests into different directories.

In the project root, create a folder named “test.” Inside the “test” folder, create two sub-folders and name them as below:

“pages” — for storing Page Objects
“specs” — for storing Selenium tests.

Step 2: Edit the baseUrl inside the wdio.conf.js file to that of our application under test.

baseUrl: '[https://opensource-demo.orangehrmlive.com/index.php/'](https://opensource-demo.orangehrmlive.com/index.php/')

Step 3: Create the main page object.

Inside the “pages” folder, let us create the main Page Object page.js, containing all the general selectors and methods that all other page objects will inherit.

Inside the page.js file, let us create a “Page” class, which will contain some common functions that can be used across. Also, export it.

// page.js

module.exports = class Page {

    //to go to a URL 
    open (path) {
        return browser.url(path);
    }
}

Step 4: Create specific page objects.

Since we have only two pages to deal with — the login page and dashboard (home) page, let us create two specific page objects. By convention, the page name should end with “.page.js,” as shown below.

These pages should contain:

A class extending the main page — page.js.
Page-specific element selectors using getter methods inside the class.
Page-specific actions/interactions as methods inside the class.

Finally, export an instance of this class.

Let us see the code for:

Login Page

//login.page.js

const Page = require ('./page');

class LoginPage extends Page{

 //page locators:
    get inputUsername() { return $('#txtUsername') }
    get inputPassword() { return $('#txtPassword') }
    get loginBtn() { return $('#btnLogin') }

  //page actions:  
    //to open a URL
    async open () {
        await super.open('/')
    }   
    //to enter username and password into login form and click login button
    async login (username,password) {
        await this.inputUsername.setValue(username);
        await this.inputPassword.setValue(password);
        await this.loginBtn.click();
    }
}

module.exports = new LoginPage();

Home Page

//home.page.js

const Page = require ('./page');

class HomePage extends Page{

//page locators:

    get dashboardHeader() { return $('div.head &gt; h1') }

//page actions:  
   //to verify user is in dashboard page
    async isDashboardHeaderExist () {
      return await this.dashboardHeader.isDisplayed();  
    }

}

module.exports = new HomePage();

Step 5: Write tests. After defining the necessary elements and methods for the page, you can start to write the test for it.

Inside the specs folder, create our first test file — “login.spec.js.” In this file, let us write the code for testing the login scenario. Then, to use the page objects, we need to import (or require).

//login.spec.js

const assert = require('assert');
const LoginPage = require ('../pages/login.page');
const HomePage = require('../pages/home.page');

describe('My Login application', () =&gt; {

    it('I should open the main URL and verify the title', async () =&gt; {

      await browser.url('');
      const title = await browser.getTitle();
      await assert.strictEqual(title , 'OrangeHRM');

    });

    it('I enter valid username and password and login successfully' , async () =&gt; {
      await LoginPage.open();
      await LoginPage.login('Admin','admin123');
      await assert.equal(true ,await HomePage.isDashboardHeaderExist());

    });

});

Step 5: Run the tests.

Let us execute the tests by giving the following command:

npx wdio wdio.conf.js

The test starts running. The browser gets launched, and the code gets executed successfully, as shown in the below screenshots.

Random Decimal Fraction Generator allows users to generate random decimal fractions in the [0,1] interval.

Running your automation tests on a cloud Selenium Grid

In the last section, we ran our test script in the local machine. In this step, let us additionally explore how to execute our tests on a cloud-based Selenium Grid.

It is important to run our Selenium tests on a number of online browsers and devices. Adopting a cloud-based grid as an automation backend is a popular strategy adopted by companies worldwide as a measure to stay ahead in the market competition. LambdaTest offers a cloud Selenium Grid with access to 2000+ real browsers and devices for your testing needs. LambdaTest enables you to choose a specific OS-device-browser combination to ensure that your app is working as expected in all possible scenarios. The platform also aids you in performing parallel testing in Selenium, which can drastically scale your automation test for testing larger regression suites.

The good news is that the WebdriverIO framework natively supports cloud-based cross browser testing platforms like LambdaTest. With effortless integration, you can now run your tests in the cloud Selenium Grid. Let us see how.

Step 1: In your project terminal, give the following command to save the LambdaTest service as a devDependency:

npm i --save-dev wdio-lambdatest-service

Step 2: Create a free account or log in to your LambdaTest account. Fetch your unique username and access key. You can find the details in the LambdaTest Profile section.

Step 3: Now edit the wdio.conf.js configuration file as shown below.

user= process.env.LT_USERNAME || "your_username",
key= process.env.LT_ACCESS_KEY || "your_accesskey",

exports.config = {
    user,
    key,
    specs: [
        './test/specs/**/*.js'
    ],
    exclude: [],

    capabilities: [{   

        name: "Page Object Pattern",
        build: "wdio-PageObjectPattern",
        maxInstances: 5,
        browserName: 'chrome',
        version:"64.0",
        acceptInsecureCerts: true,
        network: true,
        video: true,
        visual: true,
        console: true,

    }],

    logFile : './logDir/api.log',
    services: [
        ['lambdatest', {
            tunnel: true
        }]
    ],
    hostname: 'hub.lambdatest.com',
    path: '/wd/hub',
    port: 80,

    baseUrl: '[https://opensource-demo.orangehrmlive.com/index.php/'](https://opensource-demo.orangehrmlive.com/index.php/'),
    maxInstances: 10,
    logLevel: 'info',
    bail: 0,

    waitforTimeout: 10000,
    connectionRetryTimeout: 120000,
    connectionRetryCount: 3,

    framework: 'mocha',
    reporters: ['spec'],
    mochaOpts: {
        ui: 'bdd',
        timeout: 60000
    } 
}

Following are the changes to be made:

Pass your access token and user details by creating two variables, user and key.
Set the tunnel as true to enable routing connections from LambdaTest cloud through your computer.
Set the hostname corresponding to LambdaTest.
Optionally, you can also enable report formats like video recording, console, network logs, etc., to be true.

Step 4: Run the test.

npx wdio wdio.conf.js

You can observe the live test running status in your LambdaTest Automation Dashboard, as shown below.

The above screenshot shows that the test has been executed successfully. To analyze the detailed report containing the video and logs, visit the Automation Logs section, as in the below screenshot.

Conclusion

The Page Object Pattern is a framework design pattern widely adopted by Agile practitioners for ease of test script maintenance, enhanced code reusability, and readability. Whether you are a beginner getting started with Selenium automation testing or you need to manage a larger suite of regression tests, adopting the Page Object Pattern into your code will benefit you in multiple ways. However, the primary goal of this pattern is to provide abstraction between the UI-related code and test-related code.

In this Selenium JavaScript tutorial on Page Object Pattern in JavaScript, we learned how to implement the Page Object Pattern in JavaScript with the help of the WebdriverIO framework. Additionally, we learned how to scale your automation testing by utilizing the cloud Selenium Grid provided by LambdaTest.

Happy Testing!

How To Perform Automation Testing With Cucumber And Nightwatch JS?

HaritaLT — Mon, 18 Apr 2022 12:04:51 +0000

One of the key features of the agile way of software development is the combination of DevOps and automation testing. Test automation speeds up the testing cycle, aids in detecting bugs at an early stage, and helps in handling repetitive, time-consuming tasks at a faster pace. To ensure that quality is not compromised while leveraging the benefits of automated testing, adopting the right test automation framework and strategy becomes critical for the success of the project.

In this Cucumber test automation tutorial, we explore Nightwatch.js, one of the widely used JavaScript-based automation frameworks. We will also deep dive into Cucumber, a widely adopted automation tool that supports BDD (Behaviour Driven Development). By the end of this tutorial, you would be in a comfortable position to integrate Cucumber into the Nightwatch.js framework and build a robust BDD framework setup for performing Selenium automation testing.

So, let’s get started!

Why use Nightwatch.js for automation testing?

Nightwatch.js is a popular open-source, Selenium JavaScript-based test automation framework for automating browser-based web applications and websites. It is written in Node.js runtime and uses the W3C WebDriver API (formerly Selenium WebDriver) for interacting with various browsers to perform commands and assertions on DOM elements.

It is an End-to-End (E2E) testing framework that aims to simplify the process of writing automation test scripts.

Here are some of the noteworthy of the Nightwatch.js framework for Selenium testing:

Easy to Use — Write efficient code with a clean and simple syntax.
Built-In Test Runner — Comes with an in-built command-line test runner suite with Grunt style support for performing Selenium automation testing.
Built-In Test Runner — Comes with an in-built command-line test runner suite with Grunt style support for performing Selenium automation testing.
Page Object Model — Supports CSS and XPath locators to make browser automation more manageable. You can read our blog to know more about Selenium automation testing using Page Object Model (POM).
*Flexibility *— Enables unit, integration as well as end-to-end testing. A robust automated acceptance test can be written with a Gherkin-based Cucumber setup.
Integrations — Provides a single integrated solution for application testing, thereby eliminating the dependency on third-party software(s). This makes the framework extremely lightweight.
Support for cloud services — Compatible with cloud-based testing platforms like LambdaTest that lets you perform Selenium automation testing at a mammoth scale.
Continuous Integration (CI) — Supports tools like Jenkins, TeamCity, etc., to assist developers in building and testing software continuously.

How to Install and Configure Nightwatch.js

In this part of the Cucumber test automation tutorial, we first proceed with the installation and environment set-up for Nightwatch.js. Before installing nightwatch.js, make sure your system is pre-equipped with the following:

Prerequisites for Nightwatch.js:

Java

Check whether Java is already installed in your system using the following command:

java -version

If not, you can download the latest JDK appropriate to your machine.

2. NodeJS and NPM

Check whether Node.js is already installed in your system using the following command:

node -v

If not, download the latest LTS version from the Node.js official website.

Note: NPM will be installed along with Node.js. So no need for separate installation.

3. IDE of your choice.

Here we will be using Visual Studio Code. You may download VSC from the Visual Studio official website.

How to install and setup projects with Nightwatch.js:

With the pre-requisites for Nightwatch.js installed on the machine, it’s time to install this powerful automation framework. Follow the below-mentioned steps for install and setup projects with Nightwatch.js:

Step 1: Create a folder for your project in the desired location in your system. Open the folder in the preferred IDE.

Step 2: Initialize the project with the package.json file.

Open the terminal in VS Code.
Verify whether it is pointing to the project folder.
Trigger the following command on the terminal to initialize the project:

npm init

Fill in the project details or leave them blank.

You will notice the package.json file is created in your root folder. It contains details about the project configuration.
However, you can save some time by using the following command to generate a default empty npm project file by skipping the above interactive process.

npm init -y

Here -y stands for “yes.”

With this, we have successfully created the package.json file.

Step 3: Run the following command on the terminal to install Nightwatch.js in the current project.

npm install --save-dev nightwatch

This command will add the “node_modules” folder in your directory and download nightwatch.js as a devDependency in package.json.

You will also notice the “package-lock.json” file in the project folder. This file is used to lock all the dependencies with the version number, making it easy to set up the code in another system.

Step 4: Finally, let us install our browser web drivers (i.e., ChromeDriver and GeckoDriver).

npm install --save-dev chromedriver geckodriver

The Selenium Server was required with older Nightwatch versions (‘v0.9’ and prior), starting with version ‘1.0’ Selenium is no longer necessary.

With this, we are all done with the installation of Nightwatch.js. It’s time to get our hands dirty with some implementation 🙂

Hash Mac Generator is a message authentication code that uses a cryptographic hash function such as SHA-256.

Running your first test with NightWatch.js

In this part of the Cucumber test automation tutorial, we look into the additional configurations required for automation testing. By the end of this section, you will be able to write and run your first test case successfully!

Configuration for automation testing with Nightwatch.js

Our goal is to run our test files using the “npm test” command from the project’s base directory. Also, we are setting Chrome as the default browser. You can use the browser of your choice, please download the corresponding browser driver before writing the test.

Step 1: Create two folders in the root directory:

“tests” for keeping test files
“reports” to store reports after each test run.

You can provide any folder name of your choice; however, it should be properly mapped in the nightwatch.json file, which we will discuss in step 3.

Step 2: In your package.json file, replace “scripts -> test” with “nightwatch.”

“scripts”: {
  “test”: “nightwatch”
}

This is how the package.json file looks like:

Step 3: In the root, create the “nightwatch.json” file and paste the following snippet.

{
    "src_folders" : "tests",
    "output_folder" : "reports",

    "webdriver" : {
        "start_process": true,
        "server_path": "node_modules/chromedriver/lib/chromedriver/chromedriver.exe",
        "host": "localhost",
        "port": 4444
      },
      "test_settings" : {
        "default" : {
            "desiredCapabilities" : {
                "browserName" : "chrome"            
              }           
          }
      }
}

The “nightwatch.json” is the configuration file that is required by the Nightwatch test runner.

Let’s have a close look into the above code structure of “nightwatch.json.”

src_folders: Contains the test suites. You can also give an array of folders.
output_folder: Test reports get saved in this location ( i.e., JUnit report files, XML reports, test logs, selenium log, screenshots, video logs, network logs, etc.).
webdriver: An object containing configurations related to Selenium WebDriver.
test-settings: Defines the browser we want to use.

You may also create “nightwatch.conf.js” for configuration. If both these files are present in the project, the nightwatch.conf.js file will be given more precedence over the nightwatch.json (i.e., settings mentioned in nightwatch.conf.js will override the ones mentioned in nightwatch.json).

Step 4: With this, we are all done with the configurations required for automation testing with Nightwatch.js. Let’s write our first test.

Writing Nightwatch.js tests for automation testing

In the previous section of this Cucumber test automation tutorial, we have created a “tests” folder. Now, we will be creating test files inside this folder. Each file will be loaded as a test suite by the Nightwatch test runner.

Step 1: Create a test file and name it as — testfile1.js.

Step 2: Let’s create the test structure.

module.exports = {

}

Step 3: Inside each file, the test runner will look for keys that are exported for usage by other modules. The key is the test case name. Each key is mapped to a function in which the browser instance will be passed as an argument.

module.exports = {
    "Step one: Navigate to google and verify URL and title" : function(browser){

    }

Step 4: Inside this function, we write our test code. Let’ 's examine the snippet below:

This is a simple and straightforward test scenario. The code is written in two steps.

The code will launch the Chrome browser and navigate to google.com, and verify the page URL and title with the expected result.
The search field inputs “nightwatch” and verifies search results to match the text “nightwatch.”

Here are the major aspects of the implementation:

url() — Navigates to a specific URL.
*urlContains() *— Checks if the current URL contains the given value.
title() — Checks if the page title equals the given value.
containsText() — Checks if the given element contains the specified text.
setValue() — Sets the value of the DOM element as the given value.
pause() — Suspends the test for the given time in milliseconds.
*assert *— When an assertion fails, the test ends, skipping all other assertions.

Step 5: To run the code, go to the terminal and navigate to the base directory of the project. Run the following command once you are in that directory:

npm test

The test starts running, and the browser will be launched.

All assertions are passed!! We have successfully written our first test code with the Nightwatch.js.

Step 6: Check out the reports generated in your “reports” folder.

Why use Cucumber.js for Selenium automation testing?

Behavior Driven Development (BDD) is an approach where the behavior of the feature is defined using simple Domain Specific Language (DSL). The major advantage is that the requirements are easily understandable to anyone (including the non-technical fraternity). DSL is widely used for writing test scripts.

Cucumber is an automation tool based on the BDD framework, using which you can write automated acceptance tests for web applications in the Gherkin language.

Here are the major benefits of the Cucumber BDD framework:

It acts as a bridge between the technical team (Developers, QA, etc.) and the non-technical team (Business Analysts, stakeholders, etc.) as the features are written in simple language (i.e., Gherkin).
It focuses more on the user experience.
It has an easy installation and set-up process.
There is immense focus on the re-usability and improved maintenance of the test code.

Find and Replace String is a free online tool that lets you find-and-replace strings in a browser.

How does Cucumber test automation work?

As mentioned in the previous section of this Cucumber test automation tutorial, we can use Cucumber to write scenarios in simple text using Gherkin’s syntax. Some commonly used Gherkin keywords are Feature, Scenario, Given, When, Then, And, etc.

Feature represents the high-level description of the functionality that is used to group related scenarios. A Scenario is a collection of steps for Cucumber to work through. The steps are constructed using keywords Given, When, And, Then, etc., each serving a specific purpose. A Gherkin document is stored in a file called a feature file having a .feature extension.

A typical feature file for login functionality will look like this:

Step definitions are used to connect Gherkin’s steps to programming code. There should be a step definition associated with each step where the code to be executed will be defined.

With this, let’s get started with BDD-Cucumber.

Automation testing with Nightwatch.js and Cucumber.js

In the previous sections, we have explored Nightwatch.js and Cucumber frameworks and their key features that are instrumental in Selenium automation testing. We successfully installed and wrote our first test case using the Nightwatch.js automation framework.

In the upcoming sections of this Cucumber test automation tutorial, we look at how to integrate Cucumber into the Nightwatch.js framework for building a robust BDD setup for testing web applications.

How to install and configure Cucumber

Let’s start with the installation and setup of the Cucumber framework.

Step 1: Installing dependencies:

You may skip previously installed dependencies like nightwatch and chromedriver.

npm install --save-dev nightwatch-api nightwatch [@cucumber/cucumber](http://twitter.com/cucumber/cucumber) chromedriver

Nightwatch API adds huge flexibility and control to Nightwatch.js, which is extremely helpful in running acceptance tests based on feature requirements written in the Gherkin language.

Step 2: Configuring Nightwatch.js:

In the Nightwatch.js automation framework set up, we configured the framework through the nightwatch.json file or the nightwatch.conf.js. Moving forward, we will be sticking with the nightwatch.conf.js file since it provides more flexibility in terms of configuration.

The only difference here from the previous setup is that we have removed “src_folder” as tests are running using Cucumber.

const chromedriver = require('chromedriver');

module.exports = {
  test_settings: {
    default: {
      webdriver: {
        start_process: true,
        server_path: chromedriver.path,
        port: 4444,
      },
      desiredCapabilities: {
        browserName: 'chrome'
      }
    }
  }
};

The Cucumber test automation requires three types of files:

Cucumber configuration file
Feature file
Step definition file

Step 3: Configuring Cucumber:

Now it’s time to configure Cucumber. Create a file named cucumber.conf.js in the root folder of the project root and paste the following snippet.

This file is responsible for setting up the default timeout, starting the WebDriver, and creating the browser session.

Step 4: Writing a feature file:

Create a folder named “features” in the project root folder. All the feature files are maintained inside this folder.

Create a feature file named “google.feature.” We will continue using the same example we used for Nightwatch.js setup.

Step 5: Writing step definitions:

As mentioned in the previous section of this Cucumber test automation tutorial, each feature step should be associated with its corresponding step definition where the code to be executed is written.

Create a step definition file named google.js under the step-definitions folder

Unsure how to write step definitions?

Simply execute the code using the run command (which we will be customizing in step 6). Due to the Cucumber’s design patterns, you will be displayed with a suggestion as shown below in the terminal for unimplemented steps. Next, copy-paste the code into the step definition file and fill it with your assertions.

Step 6: Creating npm script:

In package.json, define any short command to execute the Cucumber tests. Here we have given the “e2e-test.” You have the flexibility to choose any name for it.

"scripts": {
    "e2e-test": "cucumber-js --require cucumber.conf.js --require step-definitions"
  },

Step 7: Run the tests:

Trigger the following command on the terminal for running the tests:

npm run e2e-test

The test runs successfully, and all assertions are passed!

Customizing test runs in Cucumber

Use the following commands for customizing test runs in Cucumber:

For running a single feature file:

npm run e2e-test -- features/google.feature
1. For running multiple feature files:
npm run e2e-test -- features/google.feature -- features/firefox.feature
1. For using glob patterns:
npm run e2e-test -- features/*/.feature
1. For running Feature directory:
npm run e2e-test -- features/dir
1. For running a scenario by its line number:
npm run e2e-test -- features/my_feature.feature:3
1. For running a scenario by its name that matches a regular expression:
npm run e2e-test -- --name "topic 1"
1. For using tags (@) for a selective run:

Add tags to the Feature or Scenario and mention the tag in the run command to run or skip the scenario or feature in a selective manner.

How to create custom reporters in Nightwatch.js and Cucumber

Cucumber provides a number of options for generating reports. A report is a very valuable tool in debugging. Also, it provides immediate visual feedback for analyzing potential problems.

You can enable HTML reporting in the framework by installing the required dependencies and minimal configurations. Reports in the HTML format are easy to read and understand.

Follow the below steps for generating reports in Cucumber and Nightwatch.js:

Step 1: Installing dependencies:

npm install --save-dev cucumber-html-reporter mkdirp

Step 2: Configuring Nightwatch.js:

Enable screenshots in default settings of nightwatch.config.json file.

default: {
      screenshots: {
        enabled: true,
        path: 'screenshots'
      },

Step 3: Configuring Cucumber config file:

Implement the “After” hook by adding code for handling screenshots and attaching them to the report.

Step 4: Updating the npm scripts:

In the package.json file, update scripts to accommodate the report feature. Here, mkdirp is used to make sure the report folder exists before running the test.

JSON formatter generates a JSON report, which is then utilized by cucumber-html-reporter to generate the HTML report.

"scripts": {
    "e2e-test": "mkdirp report && cucumber-js --require cucumber.conf.js --require step-definitions --format json:report/cucumber_report.json"
  },

Step 5: Running the tests:.

npm run e2e-test

After successful execution, you should see the HTML report getting generated and getting displayed in a new browser tab.

Decimal To Roman converts decimal numerals to roman numerals.

Automation testing with Cucumber and Nightwatch.js on a cloud-based Selenium Grid

So far in this Cucumber test automation tutorial, we deep-dived into the integration of the Nightwatch.js framework with Cucumber. The tests were executed on a local Selenium Grid, a solution that is not feasible for running automation tests at scale.

To stay ahead in a highly competitive market, it is our duty as testers to ensure the quality of the application in all scenarios, i.e., the app (or website) should behave consistently across all platforms, browsers, and devices. This is where the importance of test coverage arises in cross browser testing.

This can be achieved by building an in-house infrastructure or outsourcing to a third-party cloud platform like LambdaTest. Automation testing (or cross browser testing) on a cloud-based Selenium Grid lets you run tests at an expedited pace across different browsers, platforms, and devices. Your automation tests can leverage the advantages of parallel testing in Selenium to run automation tests at a super-fast pace.

Using a combination of remote Selenium Grid with the right cloud-based solution provider like LambdaTest for cross browser compatibility testing is the optimum strategy to run automation tests at scale. LambdaTest provides you access to 2000+ browsers for mobile and desktop to help you gain the maximum browser coverage during the automated browser testing process.

Follow the below steps to get started with cross browser testing on LambdaTest:

Step 1: Log in to LambdaTest or Create a free LambdaTest account. Once an account is created, make a note of the username and access token from the LambdaTest profile section.

Step 2: Use the LambdaTest Desired Capabilities generator to generate browser and platform capabilities as per your test requirements.

desiredCapabilities: {
            build:"Nightwatch-Cucumber-Test",
            platform : "Windows 10",
            browserName : "chrome",
            version : "87.0",
            selenium_version: "3.13.0"
}

Step 3: Now it’s time to make the required configuration changes in your nightwatch.conf.js file. Let’s examine the code below.

Following are the additions made to the config file:

Pass your Access Token and User details (obtained from Step 1).
Provide Desired Capabilities for the browser (obtained from Step 2).
Set the Hostname corresponding to LambdaTest.
Enable video recording, console, network logs, etc., in the desired capabilities.

We have used the following additional parameters to configure “nightwatch.config.js” for cloud-based cross-browser testing:

*selenium *— It is an object containing options related to the Selenium Server. If “selenium” is not used, “webdriver” options should be set instead (as we did in the local setup). Starting with Nightwatch 1.0, Selenium is only required when testing is done against a Grid setup or a cloud-based Selenium Grid like LambdaTest.
*cli_args *— It contains a list of CLI args to be passed to the Selenium process (i.e., browser drivers).
test_settings:
*silent *— It is used to show the extended HTTP traffic command logs from the WebDriver or Selenium server.
*desiredCapabilities *— It is an object to specify various capabilities like browser name, browser version, etc.
username and access_key — It is needed for accessing the cloud-based Grid.

Step 4: Add a new “scripts” argument value in package.json.

Here we have added “remote-test,” which is specific for cloud-based Selenium testing. We have removed the custom HTML report params associated with local execution.

"scripts": {
    "e2e-test": "mkdirp report && cucumber-js --require cucumber.conf.js --require step-definitions --format json:report/cucumber_report.json",
    "remote-test": "cucumber-js  --require cucumber.conf.js --require step-definitions"
  },

Step 5: Run the test using the following command.

npm run remote-test

The code starts running, and logs can be observed in the terminal.

Navigate to the Automation dashboard in LambdaTest to keep a watch on the status of test execution.

As shown below, the test was executed successfully:

We can analyze individual test run reports from Automation Logs.

We have successfully run our test cases using an automated cross-browser testing solution provided by LambdaTest through a hassle-free experience!

Conclusion

Nightwatch.js is one of the most popular JavaScript-based Selenium automation frameworks, and Cucumber is one of the top tools for BDD implementation. Cucumber can be integrated with Nightwatch.js to build a robust automation testing framework. Together they enable you to create highly configurable test scripts along with easily readable documentation and additional features like custom HTML report generation.

Hopefully, this Cucumber test automation tutorial enables you to implement the Nightwatch.js automation with the Cucumber and run your first test successfully with alluring HTML reports. If you wish to further optimize your framework and guarantee your web application quality by achieving test coverage, please explore the LambdaTest platform.

Happy Testing!

How To Implement Drag And Drop In JavaScript Using Selenium?

HaritaLT — Wed, 13 Apr 2022 14:37:55 +0000

Drag and Drop is an adored web feature implemented in many modern web applications. The list is endless, from cloud storage services like Google Drive and Dropbox to project management tools like Jira and Trello. As automation testers, it is our duty to leave no feature of our application untested. But often, it is tricky to automate a feature with complex user interaction like Drag and Drop.

Fortunately, the popular automation testing tool Selenium WebDriver offers functionality to easily automate dragging a web element from one part of the site and dropping it at another. In this article on how to implement drag and drop in JavaScript, we will learn how to write automation test code for the Drag and Drop feature using Selenium JavaScript.

Let’s get started!

What is Drag and Drop Action?

Let us begin by understanding what exactly is the Drag and Drop operation in HTML.

The drag and drop action is a GUI-based software feature done with the help of a mouse. This feature enables us to “hold” an element, “drag” it to a different location or onto another virtual object and “drop” it to the target location. In HTML, any element can be dragged and dropped.

The workflow of a typical drag and drop feature is as follows:

The element of interest, which is to be dragged and dropped, must be visible on the screen.
The user initiates interaction by acquiring the item. The selection technique can be a mouse click.
Keeping the item selected, the user moves the pointing device (mouse) to the desired location or target through continuous press or “drag.”
Once the desired location or target is reached, the user lets go of the item, and it is now “dropped.”

Drag and Drop is a part of many user interfaces we use every day. Some common examples are:

Uploading a file to a web application (Eg: Google Drive)
Moving a file from one folder to another (Eg: Gmail )
Reordering, Resizing, and Grouping of objects (Eg: JIRA, Trello)
Rearranging browser tabs (Eg: Chrome, Firefox)

How to implement Drag and Drop in JavaScript?

We can automate the Drag and Drop operation by leveraging the Actions class in Selenium provided by the Selenium WebDriver API. The actions class supports two methods, using which we can drag and drop an element. They are

dragAndDrop method
dragAndDropBy method

In addition to these two methods, we can also make use of the following Actions class method to achieve drag and drop automation. They are:

moveByOffset method
moveToElement method

Before we get deeper into how to implement drag and drop in JavaScript, let us understand more about the Actions class itself.

What is the Actions class in Selenium?

The WebElement commands need no introduction, and they help us identify a WebElement and perform various actions on it. Most basic user interactions like clicking on a button or entering text to an input field can be achieved using the WebElement commands.

Some popular commands are:

WebElement.click() — to click on a web element
WebElement.sendKeys() — to enter text to a field
WebElement.submit() — to submit a form etc.

However, if you need to perform complex interactions like Drag and Drop Double-click, or Click and Hold an element, they cannot be achieved using simple WebElement commands alone. And this is where the Actions class comes into the picture.

The official documentation describes the Actions class as:

“The user-facing API for emulating complex user gestures. Use this class rather than using the Keyboard or Mouse directly.”

In short, to automate advanced keyboard-based or mouse-based actions in Selenium, you need to utilize the Actions class in Selenium. The methods within the Actions class can be divided into two main categories:

Keyboard Events — keyDown(), keyUp(),sendKeys(), etc.
Mouse Events — dragAndDrop(), dragAndDropBy(), moveByOffset(), moveToElement() etc.

The various actions supported by the actions class are:

Syntax for Drag and Drop in Selenium

At the beginning of this section on JavaScript drag and drop, we learned that the Actions class supports two methods that enable the automation of the drag and drop action. Now, let us study them in detail, along with the syntax required to perform the action.

dragAndDrop method

This method is used to perform a Drag and Drop operation where you need to left-click on an element, hold it and drag it to the desired target location and drop it.

Syntax:

Actions.dragAndDrop(WebElement source, WebElement target)

This method accepts two parameters:

*source *— the web element which we need to click and start the drag
target — the web element on which we need to drop the source element

To find the source and target element, we can use any locator strategy.

driver.findElement(Any By strategy & locator)

2. dragAndDropBy method

This method is used to perform Drag and Drop operations in Selenium using x and y offsets. The source element will be dragged and dropped at the location specified via the x-axis and y-axis offsets in pixels.

Actions.dragAndDropBy(WebElement source, int xOffset, int yOffset)

This method accepts three parameters:

*source *— the element which we need to click and start the drag
xOffset — x-axis pixel value which defines the horizontal movement of the source element
*yOffset *— y-axis pixel value which defines the vertical movement of the source element

Again, to find the source element, we can use any locator strategy.

driver.findElement(Any By strategy & locator)

The dragAndDropBy() works similar to the dragAndDropBy(), but the only difference is that dragAndDropBy() moves the source element to the offsets and not to any target element.

Finally, once the dragAndDrop() or dragAndDropBy() method is defined with parameters, the perform() method needs to be invoked for performing the action.

Actions.dragAndDrop(WebElement source, WebElement target).perform();

Actions.dragAndDropBy(WebElement source, int xOffset, int yOffset).perform();

Alternatively, we can also achieve drag and drop automation by clicking and holding an element, **moving *it to the target position, and then *releasing **it. To execute this operation sequence, we will be making use of the following methods from the Actions class.

clicking and holding a web element via clickAndHold()
moving to the target location via moveToElement() or moveByOffset()
release mouse button at target position via release()

Let us check out them in detail, along with the syntax below.

3. moveToElement method

This method is used to move the mouse to a specified web element. We can also move a draggable web element using this method.

Syntax:

Actions.clickAndHold(WebElement source).moveToElement(WebElement target).release().perform();

The web element which we desire to click and hold is passed to the clickAndHold()
Then, we move the mouse pointer to the target web element specified within in moveToElement()
Then, we release the element from the mouse button hold using release().
Finally, we invoke the perform() for performing this chain of actions currently built.

4. moveByOffset method

This method is used to move the mouse to the specified offset of the last known mouse coordinates. On the initial page load, the mouse coordinates will be (0,0). We can also move a draggable web element using this method.

Syntax:

Actions.clickAndHold(WebElement source).moveByOffset(int xOffset,int yOffset).release().perform();

The web element which we need to click and hold is passed to the clickAndHold()
Then, we move the mouse pointer to the target location by passing the X and Y offsets within in moveByOffset()
Then, we release the element from the mouse button hold using release().
Finally, we invoke the perform() for performing this chain of actions currently built.

Note: With the help of **Import maps**, you can control what URLs get fetched by JavaScript’s import statements and import() expressions.

Syntax for Drag and Drop in JavaScript using Selenium

To work with Selenium using JavaScript drag and drop, we will be making the selenium-webdriver library. Here, the syntax for calling Actions class and the available methods are slightly different. To use the JavaScript drag and drop feature in Selenium automation testing, we will be utilizing the dragAndDrop method.

dragAndDrop method

This method helps us to configure drag and drop action by passing either the target web element or X and Y offsets.

Syntax:

this.dragAndDrop(WebElement from, WebElement|{x: number, y: number} to ).perform();

The function accepts two parameters:

from — the web element which we need to click and start the drag
*to *— either a web element or offset (in pixel) to mark the target location where the element needs to be dropped.

In the next section of this article on how to implement drag and drop in JavaScript, we will demonstrate writing a test case to automate Drag and Drop in JavaScript using Selenium.

How to write a test case to automate Drag and Drop in JavaScript using Selenium

So far, we have discussed the Actions class and various methods to automate the Drag and Drop feature. Finally, it’s time to get your hands dirty!

In this section of how to implement drag and drop in JavaScript, you will be learning how to drag and drop using JavaScript while performing Selenium test automation.

Prerequisites

I am assuming that the following prerequisites are installed in your system.

Node.js and NPM
Visual Studio Code or any IDE of choice

Note: **Intl.PluralRules API -**API for plural language rules and plural sensitive formatting.

Test Scenario

For this demo, I will be writing the test case for the following simple and straightforward scenario.

Launch the browser.
Go to the Selenium Playground website.
Perform Drag and Drop by selecting the first element and dragging and dropping it on the second element.
Close the browser.

I will be executing the test case on three different browsers — Firefox, Chrome, and Safari — using the online Selenium Grid provided by the LambdaTest cross-browser testing platform. Automation testing tools like LambdaTest gives you access to an online device farm of 3000+ browser, device, and OS configurations helping you to achieve test coverage on the maximum number of browser and OS combinations. On top of that, LambdaTest also supports web testing in the latest Selenium 4.

Steps for Writing the Drag and Drop test case

Now, it’s time to write tests in Selenium WebDriver for automation testing. From project set-up to test execution, I will be walking you through the whole process step by step.

Using dragAndDrop() by passing source and target web elements

Step 1: Create a new folder for your project. Open the folder location via your IDE (Visual Studio Code) and initialize the project by giving the following command in the terminal.

npm init -y

The project is now initialized, and the package.json file is created in the root folder.

Step 2: Install dependencies

npm install selenium-webdriver

Step 3: **Create a folder named “tests*” within your project root folder. We will be storing all our test cases here. Inside this folder, create your first test case file, “test.js*.”

Step 4: Inside the test.js file, add required imports and configurations to run the test on a cloud grid hosted by LambdaTest.

Create a free account in LambaTest and fetch your unique username and access key.
Define the username and access key in your test.js file. Also, define the grid host.

const USERNAME = "YOUR_USERNAME"; //replace with your username
const KEY = "YOUR_ACCESSKEY"; //replace with your access key

const GRID_HOST = "hub.lambdatest.com/wd/hub";
const gridUrl = "https://" + USERNAME + ":" + KEY + "@" + GRID_HOST;
1. Make the required imports.
const { Builder, Key, By } = require("selenium-webdriver");

Step 5: Define the test method. Create a function example(), which will be containing your test script. Feel free to provide any function name of your choice.

async function example() {
}

At the beginning of this test method, let us define the required capabilities. To generate your custom desired capability to meet your browser and OS version requirement, make use of the LambdaTest Capabilities Generator.

Here I have set the capability to run my test case in Chrome browser version 91.0 in the windows 10 platform using Selenium 4.

var capabilities = {
      build: "Drag and Drop",
      name: "Drag and Drop",
      platform: "Windows 10",
      browserName: "Chrome",
      version: "91.0",
      selenium_version: "4.0.0",
      chrome.driver: "91.0",
    };

Step 6: Now, let us write our test script inside our test method using Selenium and JavaScript. I am making use of the dragAndDrop() and passing source and target web elements to achieve the drag and drop action here.

//To wait for browser to build and launch properly
    var driver = await new Builder()
      .usingServer(gridUrl)
      .withCapabilities(capabilities)
      .build();

    //To launch the website
    await driver.get(
      "[https://www.lambdatest.com/selenium-playground/drag-and-drop-demo](https://www.lambdatest.com/selenium-playground/drag-and-drop-demo)"
    );

    //To locate the source and target elements
    let draggable = driver.findElement(By.id("draggable"));
    let droppable = driver.findElement(By.id("droppable"));

    //To perform drag and drop operation
    await driver.actions().dragAndDrop(draggable, droppable).perform();

    //To verify drop success/fail by validating the text inside target element
    let targetText = await droppable.getText();
    if (targetText === "Dropped!") {
      console.log("PASS: Source is dropped at location");
    } else {
      console.log("FAIL: Source is not dropped at location");
    }


    //It is always a safe practice to quit the browser after execution
    await driver.quit();

Our final code looks like this.

const USERNAME = "YOUR_USERNAME"; //replace with your username
const KEY = "YOUR_ACCESSKEY"; //replace with your access key

const GRID_HOST = "hub.lambdatest.com/wd/hub";
const gridUrl = "https://" + USERNAME + ":" + KEY + "@" + GRID_HOST;

const { Builder, Key, By } = require("selenium-webdriver");

async function example() {
  try {
    var capabilities = {
      build: "Drag and Drop",
      name: "Drag and Drop",
      platform: "Windows 10",
      browserName: "Chrome",
      version: "91.0",
      selenium_version: "4.0.0",
      chrome.driver: "91.0",
    };

    //To wait for browser to build and launch properly
    var driver = await new Builder()
      .usingServer(gridUrl)
      .withCapabilities(capabilities)
      .build();

    //To launch the website
    await driver.get(
      "[https://www.lambdatest.com/selenium-playground/drag-and-drop-demo](https://www.lambdatest.com/selenium-playground/drag-and-drop-demo)"
    );

    //To locate the source and target elements
    let draggable = driver.findElement(By.id("draggable"));
    let droppable = driver.findElement(By.id("droppable"));

    //To perform drag and drop operation
    await driver.actions().dragAndDrop(draggable, droppable).perform();

    //To verify drop success/fail by validating the text inside target element
    let targetText = await droppable.getText();
    if (targetText === "Dropped!") {
      console.log("PASS: Source is dropped at location");
    } else {
      console.log("FAIL: Source is not dropped at location");
    }

    //It is always a safe practice to quit the browser after execution
    await driver.quit();

  } catch (err) {
    handleFailure(err, driver);
  }
}

example();

function handleFailure(err, driver) {
  console.error("Something went wrong!\n", err.stack, "\n");
  driver.quit();
}

Additionally, I have added a try-catch block for error handling. Also have provided the function call to execute the method on run command.

Step 7: Execute the test. Make sure you are in the right folder and give the following command in the terminal.

node test.js

The test.js file starts executing, and you can observe your live test running status on your LambdaTest Dashboard along with a detailed report containing video and logs.

LambdaTest helps you track the state of your automated tests by showing a clear view of the tests that have passed, failed, and are still in progress. You can go through LambdaTest Analytics to help you gain insight into your automated testing efforts.

Similarly, you can run your test case in multiple browsers by defining the appropriate capabilities in your test file.

Firefox browser

var capabilities = {
build: "Drag and Drop",
name: "Drag and Drop",
platform : "Windows 10",
browserName : "Firefox",
version : "86.0",
selenium_version : "4.1.0",
driver_version : "v0.36.0"
};
1. Safari browser
var capabilities = {
build: "Drag and Drop",
name: "Drag and Drop",
platform: "MacOS Monterey",
browserName: "Safari",
version: "15.0",
selenium_version: "4.0.0",
driver_version: "v0.36.0",
};

Using dragAndDrop() by passing X and Y offsets

In the above section of this article on how to implement drag and drop in JavaScript, we passed the source and target elements to drag and drop. Now, let us see the code to automate drag and drop by passing x and y offset values.

The updated code for the test method is as below:

var driver = await new Builder()
      .usingServer(gridUrl)
      .withCapabilities(capabilities)
      .build();

    //To launch the website
    await driver.get(
      "[https://www.lambdatest.com/selenium-playground/drag-and-drop-demo](https://www.lambdatest.com/selenium-playground/drag-and-drop-demo)"
    );

    //To locate the source elements 
    let draggable = driver.findElement(By.id("draggable"));

    //To perform drag and drop by offset
    await driver.actions().dragAndDrop(draggable, { x: 50, y: 50 }).perform();

    await driver.quit();

You can also go through the Selenium JavaScript Tutorial to dive deep into how Selenium WebDriver with JavaScript can be used for automated testing of web applications.

Note: Using JSON.stringify() and **JSON.parse**(), you can convert JavaScript objects to JSON strings and JSON strings back to JavaScript objects.

Conclusion

Selenium WebDriver provides Actions class, which can be leveraged to automate complex user interactions in the browser like Drag and Drop. In this JavaScript drag and drop tutorial, we explored what is Actions class in Selenium is and how to implement drag and drop in JavaScript while performing Selenium automation testing. Hoping this blog turned out to be beneficial.

Happy Testing!

Jest vs Mocha vs Jasmine: Comparing The Top 3 JavaScript Testing Frameworks

HaritaLT — Tue, 12 Apr 2022 13:32:16 +0000

With the widespread adoption of agile methodologies, teams are now required to release more frequently and within shorter time frames. This requires not only shorter development cycles but also higher quality applications. With this approach, there is no immediate need for manual testing once the path is set for automation testing. But with an increased pace of change, companies are requiring greater automation testing coverage along with sticking to traditional regression testing techniques.

By utilizing a comprehensive approach to automation testing, we can ensure that the software product is robust and meets the desired threshold of quality. Given the wide range of programming languages and test automation frameworks available in the market, it is important to identify the right set of languages and corresponding frameworks for the success of your test automation strategy.

JavaScript is a programming language that needs no introduction! JavaScript has been around for almost two decades, and it continues to be used by millions of developers around the world.

As per Stack Overflow Developer Survey 2021, JavaScript is the most popular language among all the programming, scripting, and markup languages.

When it comes to JavaScript testing, you could choose from a wide range of test automation frameworks to test your features at scale. In case you are new to JavaScript testing or confused in choosing the best-suited test automation framework, we can help you make the right choice!

In this blog on top JavaScript testing frameworks comparison, we do a detailed analysis of three of the top JavaScript testing frameworks as per the State of JS 2020 survey — Jest vs Mocha vs Jasmine. But before that, we shall also discuss why unit testing is important. So without further ado, let’s get started!

Why do we need Unit Testing?

A unit is the smallest piece of code that can be logically isolated in the system. Unit testing means testing these independent or individual units. Unit testing is often associated as a part of the programming phase, i.e., developer-based testing. But why should developers write tests? Let’s understand the benefits.

Early detection of bugs in the development phase itself, i.e., even before the QA phase. This, in turn, makes the testing phase easier
When a developer further develops the code base, unit tests help ensure that the new code doesn’t break the existing old features. This will boost the developer’s confidence in maintaining the code quality
Easy to make code changes aided by the instant feedback loop
Saves time and money in the long run

Unit testing might seem like a time-consuming process that can slow down the development process but yields awesome results in the long run. With the growing popularity of JavaScript as the top front-end development trend, frameworks like React, Angular, and Vue have become even more vital for testing your client code.

Now that you know why we need unit testing, let’s explore the most popular JavaScript unit testing frameworks in the market, i.e, Jest vs Mocha vs Jasmine.

Note: With the next generation JavaScript language specification, ECMAScript 2015 (ES6) brings support for modules, classes, template string literals, arrow functions, let and const variables, and default parameters.

Jest Framework for Selenium JavaScript Testing

Developed by Facebook, Jest is one of the top JavaScript testing frameworks for test automation, focusing on simplicity. Jest was created to test JavaScript implementation of web applications primarily developed using React. Apart from this, Jest also seamlessly supports unit testing in Angular, Vue, NodeJs, etc., and can work with projects using TypeScript, Babel, and more.

Jest was rated as the most popular and top JavaScript framework for unit testing in 2020. What makes Jest special is the out-of-the-box experience it provides through zero configuration. In addition, Jest is available as an npm package that you can install to your JavaScript project using the following command:

Now let us examine the pros and cons of Jest.

Why use Jest for Selenium JavaScript Testing?

In the world of Selenium JavaScript testing, Jest is becoming the most preferred automation framework. It provides a reliable and simple way to write tests, and developers love it because of its flexibility.

Below are some killer points that give Jest an edge over other top JavaScript Testing frameworks.

The key benefit of using Jest is that it is very easy to install with zero setup hiccups. In addition, Jest provides you with an integrated framework that is ready to use, aiming for an out-of-the-box experience.
It is maintained and well documented, making it easy to learn, especially for developers new to the TDD (Test Driven Development) approach.
Jest is a fast-performing test automation framework where isolated tests are executed by performing parallel testing in their processes.
Jest provides testing support for asynchronous code.
Jest framework supports execution of Smart Visual Regression Tests by capturing screenshots (i.e. Snapshot testing). During development using ReactJS, this particular feature comes in handy for detecting UI bugs. This is done by recording the screenshot of a rendered component and then comparing it with the component rendered in the future test run. Also, when a new feature is added, the screenshots can be easily updated.
Auto mocking is another out-of-the-box feature of Jest. Jest can easily mock any dependency imported in the module that needs to be tested in the future.
Jest library provides pre-commit hooks that allow running only relevant tests or running tests that have changed after the last commit.
The code mods module offers many ways to integrate your current projects to sync with the latest framework seamlessly.

Other than the ones listed above, here are some more liked aspects of Jest, making it a likeable product for developers.

Who uses Jest?

Prominent companies that reportedly adopt Jest in their tech stack are:
Facebook, Airbnb, Spotify, The New York Times, Travel Perk, Twitter, Instagram, etc.

Cons of Jest

Jest has proven to be a powerful tool to do almost anything. However, while Jest has several advantages, it also has a few disadvantages. For example, it is an expensive framework, and at times its debugging capabilities need improvement. Below are a few cons of Jest:

Compared to Jasmine and other frameworks, not many libraries and toolings are supported by Jest.
People who are not comfortable with the Jest framework have asserted that the learning curve is pretty hard.
Leveraging auto mocking can make tests slow. This is because the more dependencies a module has, the more work needs to be done by Jest to mock it, which comes at the cost of performance.
Snapshot testing with Jest is not so feasible for larger snapshot files containing thousands of lines.

Other than the ones listed above, here are some of the disliked aspects of Jest among developers who picked “used it and would not use it again.”

Note: ES6 Generators have a number of applications but mostly they can be used to control the iteration behavior of a loop.

Mocha Framework for Selenium JavaScript Testing

Mocha is another top JavaScript testing framework that is designed for testing apps running in Node.js. It supports various types of testing such as unit, integration, and end-to-end testing. According to the State of JS 2020 survey, Mocha’s popularity has been consistent among the top JavaScript testing frameworks over the past few years.

It is quite easy to install the Mocha framework. All you require is a workstation and you can install Mocha using the NPM commands.

Let us examine the pros and cons of Mocha.

Why use Mocha for Selenium JavaScript Testing?

Mocha is a feature-packed JavaScript testing framework that helps you write effective, maintainable tests at a quicker pace. It supports Node.js & browser agnostic and also supports asynchronous testing. By running your tests serially, Mocha allows you to be more flexible and precise with your reporting. Moreover, it maps uncaught exceptions to the correct test cases using stack traces.

Mocha offers a programmatic way to write code for performing Selenium automation testing. It categorizes the tests into suites and test cases for execution, producing error reports after the run by mapping errors to corresponding test cases.

So, if you’re curious about the world of Mocha, this video will help you get started. You’ll learn how to write and run your first test case in Mocha and much more.

However, you can follow the LambdaTest YouTube Channel by scanning the below QR code and stay up to date with more such videos.

Below are some points that favor Mocha as one of the top JavaScript testing frameworks:

Clear and simple API. The Mocha API can be considered similar to Jasmine but coated with a bit of syntactic sugar to make it more conducive to a wider range of scenarios like BDD.
Mocha is highly extensible and flexible. Unlike Jest, Mocha doesn’t come with the mocking, assertion, or stubbing library. This means that the developer can select any library or framework. One popular choice is Chai and Sinon for mocking. Cypress, the popular test automation framework, also leverages the Chai library. You can find more details about it in the Cypress Architecture blog that deep dives into the architectural aspects of the framework.
In Mocha, tests are run serially. This allows flexible and accurate reporting while mapping uncaught exceptions to the correct test cases.
Mocha is a library of functions for testing your code in different online browsers. It is easy to use and makes running code on multiple browsers a breeze while giving you all the flexibility you need to test on each browser separately or in groups.
The reporting tool includes various report types, namely — list, progress bar, output file, JSON. The default reporter displays results hierarchically based on the structure of test cases.
Mocha supports both Behavior Driven Development (BDD) and Test Driven Development (TDD), allowing writing high-quality tests.
Since Mocha is mature with widespread adoption, lots of tutorials and documents are available online. In addition to being open-source, Mocha is backed by active support from the Mocha Dev community.
It can easily support generators.
Support for both synchronous and asynchronous testing.
Supports Headless running out of the box.
Many CI servers support Mocha.

Other than the ones listed above, here are some more liked aspects of Mocha among developers who picked “used it and would use again.”

Who uses Mocha?

Prominent companies that reportedly adopt Mocha in their tech stack are:
Accenture, Coursera, Netifly, Oyo rooms, Codefirst, Asana, Wix, Yahoo, etc.

Cons of Mocha

Although Mocha has proven to be a powerful tool in most cases, some areas still need improvement. The following list mentions some of the major cons of using Mocha:

The introduction of Jest has significantly diminished the popularity of Mocha.
Unlike Jest, which works as a single and independent framework, Mocha requires more configuration, making it weaker.
Even though it can boast of having a vast ecosystem, it is complicated as well.
In Mocha, auto-mocking and snapshot testing are not easy.
Developer tooling and more onboard features can help Mocha perform better.

Other than the ones listed above, here are some of the disliked aspects of Mocha among developers who picked “used it and would not use it again.”

Jasmine Framework for Selenium JavaScript Testing

Jasmine is a feature-rich and top JavaScript testing framework widely used by developers, especially those who need to test Angular applications. In most scenarios, the application runs on Node.js and requires a runner such as Karma or Chutzpah, but some distros (like the jasmine-node npm) have built-in the package. According to the State of JS 2020 survey, Jasmine has been consistently performed well when it comes to ranking of top JavaScript testing frameworks.

Installation of Jasmine is very simple. All you require is a workstation with internet connectivity and you can install Jasmine using the NPM commands.

However, compared to Jest, the configuration of Jasmine is a bit complex. Before running test cases, the test.js file needs to be set up and configured.

Let us examine the pros and cons of Jasmine.

Why use Jasmine for Selenium JavaScript Testing?

Jasmine and Selenium are two popular tools for JavaScript and web UI automation testing, respectively. By combining their force, you can take advantage of both of them to improve the quality of your software.

In this section of the JavaScript testing framework comparison between Jest vs Mocha vs Jasmine, we look into the advantages of the Selenium automation testing with Jasmine from an automation testing standpoint.

Below are some points that edge Jasmine as one of the top JavaScript testing frameworks:

Jasmine is compatible with almost every framework or library of your choice, making it one of the most flexible JavaScript testing frameworks.
Jasmine provides a rich set of built-in matchers that can match expectations and add asserts to the test cases. For example, we can use toEqual, toBe, toBeTruthy, toBeFalsy, and more.
Unlike other JavaScript testing frameworks, Jasmine has built-in assertion methods that help in improving the readability of the tests.
The Jasmine BDD library makes it easy to define tests, run them, and integrate them with JSHint, all without tying tests to a specific test runner.
Jasmine does not rely on any JavaScript framework, DOM, or browsers.
It offers clean and polished syntax.
Supports headless running out of the box.
Various CI servers support the Jasmine framework.
Since it has been in the market for a long time, Jasmine is supported by an active community, and lots of tutorial materials are available online. This can make your learning curve smooth.

As of writing this blog, there are close to 13,000 questions that are tagged Jasmine on Stack Overflow.

Other than the ones listed above, here are some more liked aspects of Jasmine among developers who picked “used it and would use again.”

Who uses Jasmine?

Prominent companies that reportedly adopt Jasmine in their tech stack are:
Accenture, Walmart, Typeform, GitLab, Uniqlo, etc.

Cons of Jasmine

Although Jasmine is powerful, they are not without their weaknesses. The following list mentions some of the major cons of Jasmine:

Though the installation is easy, the setup is a bit complex. Users must select an assertion or mocking library before using it.
Supports snapshot testing by using the jasmine-snapshot library. However, the integration isn’t that easy.
Asynchronous testing is difficult to achieve with Jasmine.
Expect a specific suffix to all test files (*.spec.js by default).

Other than the ones listed above, here are some of the disliked aspects of Jasmine among developers who picked “used it and would not use it again.”

Jest vs Mocha vs Jasmine — Choosing the right framework

We have evaluated the pros and cons of the three frameworks. But still, confused about which is the ideal framework for you?

When it comes to selecting between frameworks, honestly, it is not that easy. We cannot claim that one framework is better than the other as each of these frameworks offers a unique set of features with a different approach in coding style. So finally, it all comes down to your project requirements.

In this section of the Jest vs Mocha vs Jasmine comparison, we will shortlist some of the general criteria widely embraced by project teams to choose the right test automation framework.

For React or Next.js apps, it is advisable to try out Jest as it is the default option. At present, Facebook has been investing heavily in further improving this framework. Also, React developers are recording a positive experience after using Jest.
If the project requires debugging the test cases in an IDE that Jest does not support, then the next best choice would be Jasmine.
If your project is quite big and requires the integration of various external libraries, Jasmine would be a better choice. On the other hand, Jest would be more suitable for smaller projects as it provides a single integrated eco-space with pre-configured features like the test runner, assertion library, etc.
When it comes to large Node.js projects, Mocha could be the way to go. Mocha is significantly more flexible and comes with a test runner, but you have to piece it yourself.
In the Angular world, Jasmine is the recommended testing framework. This is because Angular CLI, by default, comes with Jasmine and Karma as the test runner. However, if there is a future requirement, migrating from Jasmine to Jest is easy.

The graph below compares the trend in NPM downloads of the three top JavaScript testing frameworks, i.e., Jest vs Mocha vs Jasmine, in the past one year.

It is clear that currently, the popularity of Jest as a faster-performing framework with the least configuration requirement has surely made a significant impact in the automation testing domain.

Running your JavaScript tests on an online Selenium Grid

As the development of web applications is becoming more dynamic, developers are expected to roll out an upgraded version of the application in shorter release cycles. As the testing needs to go hand in hand with the development velocity, it is natural for developers to go after tools that can make their job quicker, reliable, efficient, and at the same time, cost-effective.

LambdaTest is one such tool. It is a scalable cloud-based cross-browser testing platform that enables you to run your selenium automation scripts on 2000+ different virtual browsers and operating systems on an online Selenium Grid. So you can now run your test cases of JavaScript automation testing on a scalable Selenium infrastructure with ease.

LambaTest now integrates with popular test automation frameworks to boost your go-to-market delivery. The good news is that whatever your test framework — Jest, Mocha, Jasmine, Protractor, Karma, etc. — LambdaTest got it all covered! Here’s a list of LambdaTest integrations. The platform provides you the infrastructure to execute your automation tests and ensure your development code renders seamlessly through an on-cloud Selenium Grid. Additionally, through parallel testing, you can drastically trim down your testing cycles.

Sounds too good to be true, right? And all these benefits can be unlocked through a few simple configuration changes in your test automation framework. So do check out the LambdaTest platform to fast-track your automation testing today!

Note: Lookbehind in JS regular expressions, the positive lookbehind ((?<= )) and negative lookbehind ((?<! )) zero-width assertions can be used to confirm that one pattern is followed by another.

Jest vs Mocha vs Jasmine: The Final Showdown

Unit testing undeniably contributes to the quality of the application under development by adding an extra layer of quality check before the code gets passed to the QA team while helping the developer to write efficient code by providing instant feedback. When it comes to top JavaScript Testing frameworks, Jest, Mocha, and Jasmine are the most popular ones.

In this article, we did a quick rundown and evaluated each of these frameworks, i.e., Jest vs Mocha vs Jasmine, to help you analyze and choose the ideal one matching your project needs. We also discussed how cloud testing platforms like LambdaTest could help in optimizing the testing cycle by providing added benefits of faster execution, scalability, cost-effectiveness, etc. Hoping that this article turned out to be beneficial. Now execute free JavaScript automation testing online!!