How to Execute Functional Tests With BlazeMeter Grid and Selenium

Selenium is a powerful open source automation tool for automating web applications, but BlazeMeter can make your Selenium testing better. 

In this blog post, we’ll show you how to write and run functional tests with BlazeMeter Grid and Selenium WebDriver. 

Why Test With BlazeMeter & Selenium?

By pairing BlazeMeter with Selenium, teams can execute Selenium tests without using a local server.

Selenium is an open-source automation tool used to verify applications across platforms and browsers. Although it is capable of much more, it is primarily used for automating web applications for testing purposes. 

🚀Try BlazeMeter today for Selenium testing at scale >>

In Selenium, actions are carried out on web components via WebDriver. WebDriver is the main Selenium component for running automated tests. The benefit of Webdriver is that it helps automate tests using a collection of open source APIs. For test management and enhanced reporting capabilities, WebDriver may also be coupled with frameworks like TestNG and JUnit.

Selenium Test Prerequisites 

Before we get started with running our functional tests with BlazeMeter and Selenium, it is important to set up your environment properly with the following prerequisites:

1. Install an IDE of your choice (IntelliJ, Eclipse, DataGrip, PyCharm, etc.) In this tutorial, I will show screenshots from IntelliJ.

2. Install Java.

3. Install Maven.

4. Install the minimum necessary Jar files (more may need to be installed later):

• junit-4.10.jar
• selenium-4.3.0.jar
• selenium-java-2.24.1.jar
• selenium-server-standalone-2.24.1.jar
• open telemetry-sdk-common-1.15.0.jar

5. Download Firefox and Geckodriver.

6. Make sure you have a GitHub Account for the Code Repository.

Configuring Your Selenium Project

Follow the steps below to configure your first Selenium project:

Step 1: Launch your IDE

As mentioned, we will be using IntelliJ.

Step 2: Create a Workspace in the IDE.

Note: The workspace can be named anything you want

Step 3: Create a new Java project under Files

Go to File > New > Java Project and name it.

Note: Mine is named ‘Sample_selenium_project’ in the following screenshot.

Step 4: Add the Selenium JARs project to the IDE

Download the latest stable version of all the Selenium components. Then, scroll down and choose the stable Java version.

Click on Project Structure > Modules > Dependencies 

Click + and then add your selenium-java folder.

Step 5: Create a Class Under the Java Project

Right click on the src folder and select New >> Class

Note: I named mine SeleniumTest.

You have now completed the basic setup for a Selenium project. From here, you are ready to start scripting!

Selenium WebElements and How to Use Them

Before we get into writing our first BlazeMeter-Selenium script, there are a few important WebElements we should discuss so you can understand how to use them. These WebElements will be used later when we write our first Selenium script.

What is a WebElement?

A WebElement is an HTML element on a website. They can be visible or invisible. HTML elements contain a start and end tag with content in between.

Syntax: <start tag> content </end tag>

Selenium uses a WebElement interface as a representation of each WebElement and as a means of communicating with them. ​​Every method in the Selenium WebDriver either returns a value or No Value. The Selenium WebDriver's WebElement class does the same. 

An example of a WebElement command is as follows: 

driver.findElement(By.name("fromPort")).click();

A WebElement object of the specified type is returned by the findElement command. The only distinctive way to quickly identify and locate a WebElement is through the Locator Value. You can use a variety of locating techniques. Below are a few examples of locators:

ID Locator:

Class Locator:

XPath Locator:

• Open Developer Tool (F12) on browser.
• Navigate to element to locate.
• Right click on the element.
• Select copy.
• Choose XPath.

Sample XPath - /html/body/div[3]/form/select[1]/option[1]

Running Your Sample Selenium Test

Running Selenium From Your IDE

Note: You will already have the top portion of the Sample Code Snippet shown below in your file from the Configuring a Selenium Project section. Yours may vary slightly from the snippet below based on what driver you are using, but it should be fairly similar. You will notice many comments within the code snippet. These are just to help you understand what we are doing as we move through the following steps. You do not need to include these comments unless you find them helpful.

Step 1: Import the following code to your class file

At the top of your class file add:

import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.By;
import org.openqa.selenium.Dimension;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;

Step 2: Set a property for Geckodriver and WebDriver

Under your class, you will need to call the GeckoDriver and establish your WebDriver.

System.setProperty("webdriver.gecko.driver","/Users/henokjiru/Downloads/geckodriver");
WebDriver driver = new FirefoxDriver();

Note: You will need to replace "/Users/henokjiru/Downloads/geckodriver" with wherever your GeckoDriver is.

Step 3: Add your code for automating

Note: This can be copied and pasted from the code snippet below. I used a demo website and walked through the steps to book a flight.

Sample code snippet:

public class SeleniumTest {
   public static void main(String[] args){
       System.setProperty("webdriver.gecko.driver","/Users/henokjiru/Downloads/geckodriver");
       WebDriver driver = new FirefoxDriver();

       // Test name: Flights
       // Step # | name | target | value
       // 1 | open | / |
       driver.get("https://blazedemo.com/");

       // 2 | setWindowSize | 1313x1080 |
       driver.manage().window().setSize(new Dimension(1313, 1080));


       // 3 | click | name=fromPort |
       driver.findElement(By.name("fromPort")).click();


       // 4 | select | name=fromPort | label=Boston
       {
           WebElement dropdown = driver.findElement(By.name("fromPort"));
           dropdown.findElement(By.xpath("//option[. = 'Boston']")).click();
       }


       // 5 | click | name=toPort |
       driver.findElement(By.name("toPort")).click();


       // 6 | select | name=toPort | label=New York
       {
           WebElement dropdown = driver.findElement(By.name("toPort"));
           dropdown.findElement(By.xpath("//option[. = 'New York']")).click();
       }


       // 7 | click | css=.btn-primary |
       driver.findElement(By.cssSelector(".btn-primary")).click();


       // 8 | click | css=tr:nth-child(1) .btn |
       driver.findElement(By.cssSelector("tr:nth-child(1) .btn")).click();


       // 9 | click | id=inputName |
       driver.findElement(By.id("inputName")).click();


       // 10 | type | id=inputName | Henok
       driver.findElement(By.id("inputName")).sendKeys("Henok");


       // 11 | type | id=address | 123 Manin Str
       driver.findElement(By.id("address")).sendKeys("123 Manin Str");


       // 12 | type | id=city | Atlanta
       driver.findElement(By.id("city")).sendKeys("Atlanta");
       // 13 | type | id=state | GA
       driver.findElement(By.id("state")).sendKeys("GA");
       // 14 | type | id=zipCode | 30324
       driver.findElement(By.id("zipCode")).sendKeys("30324");
       // 15 | click | id=cardType |
       driver.findElement(By.id("cardType")).click();
       // 16 | select | id=cardType | label=American Express
       {
           WebElement dropdown = driver.findElement(By.id("cardType"));
           dropdown.findElement(By.xpath("//option[. = 'American Express']")).click();
       }
       // 17 | click | id=creditCardNumber |
       driver.findElement(By.id("creditCardNumber")).click();
       // 18 | type | id=creditCardNumber | 1111222233334444
       driver.findElement(By.id("creditCardNumber")).sendKeys("1111222233334444");
       // 19 | click | id=creditCardYear |
       driver.findElement(By.id("creditCardYear")).click();
       // 20 | type | id=creditCardYear | 2020
       driver.findElement(By.id("creditCardYear")).sendKeys("2020");
       // 21 | click | id=nameOnCard |
       driver.findElement(By.id("nameOnCard")).click();
       // 22 | type | id=nameOnCard | Henok Jiru
       driver.findElement(By.id("nameOnCard")).sendKeys("Henok Jiru");
       // 23 | click | css=.btn-primary |
       driver.findElement(By.cssSelector(".btn-primary")).click();

       driver.close();
       driver.quit();

   }
}

What This Code Snippet is Doing

Note: There are commented out lines above with step number references to match the steps below. Here is a brief explanation of some of those steps. This is not all-encompassing but just gives a brief intro into how this code was set up. You are welcome to copy and paste the snippet and run it as is or use your own Selenium test here.

1. Navigate to www.blazedemo.com.

2. This is just a resizing step.

driver.manage().window().setSize(new Dimension(1313, 1080));

3. Once you navigate to the page, you need to select the port you are flying from. You can do so by using WebElements (the locator APIs). 

Right-click anywhere on the demo page and click Inspect.

Hover the mouse over the departure city dropdown and click on it. You can now see the HTML code corresponding to that location.

In this case, we're locating the element using the name.

driver.findElement(By.name("fromPort")).click();

You can also locate an element using an XPath expression:

{
  WebElement dropdown = driver.findElement(By.name("fromPort"));
  dropdown.findElement(By.xpath("//option[. = 'Boston']")).click();
}

Step 4: Run your project!

You should see a browser get spun up and then it will walk through your steps here.

Creating a Maven/Gradle Testing Project

Step 1: Create a new Maven Project by opening the IDE

Click on New > Select Maven Project 

Step 2: Select the Quick Start from Files

Step 3: Enter the Group ID and Artifact ID and finish the setup process

A new Maven project is created and tests will be written inside folder src/test/java

Step 4: Add dependencies to the POM.xml file

"<?xml version=""1.0""encoding=""UTF-8""?>
<project xmlns=""http://maven.apache.org/POM/4.0.0""xmlns":"xsi=""http://www.w3.org/2001/XMLSchema-instance""xsi":"schemaLocation=""http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"">
   <modelVersion>4.0.0</modelVersion>

   <groupId>java.com.company</groupId>
   <artifactId>NEWPROJECT</artifactId>
   <version>1.0-SNAPSHOT</version>

   <properties>
       <maven.compiler.source>8</maven.compiler.source>
       <maven.compiler.target>8</maven.compiler.target>
   </properties>
<dependencies>
<!-- https":://mvnrepository.com/artifact/org.testng/testng -->
<dependency>
<groupId>org.testng</groupId>
<artifactId>testng</artifactId>
<version>7.6.0</version>
<scope>test</scope>
</dependency>
</dependencies>
</project>
</project>

Step 5: Add a new Class to the package

Refactoring Your Selenium  Code to Run in BlazeMeter Grid

BlazeMeter Grid enables you to run the test without using the local server. You can use it to execute Selenium scripts in BlazeMeter.

Step 1: Setup BlazeMeter Authentication

Set values for the variables base (the URL to BlazeMeter), API_KEY, and API_SECRET to ensure an authenticated connection to your BlazeMeter account.

private final static String API_KEY = "{your API key}";
private final static String API_SECRET = "{your secret key}";
private final static String BASE = "a.blazemeter.com";
private final static String curl = String.format("https://%s/api/v4/grid/wd/hub", BASE);

Step 2: Configure BlazeMeter Features

DesiredCapabilities( ) is a Java object that stores key/value pairs for various browser properties.  You can use this object to specify the various GUI Functional Test features you want to enable for your script.
DesiredCapabilities capabilities = new DesiredCapabilities();
capabilities.setCapability("blazemeter.apiKey", API_KEY);
capabilities.setCapability("blazemeter.apiSecret", API_SECRET);
capabilities.setCapability("blazemeter.reportName", "Demo Grid test");
capabilities.setCapability("blazemeter.sessionName", "Chrome browser test");
capabilities.setCapability("browserName", "chrome");

Step 3: Configure a BlazeMeter connection

To ensure your script connects to and runs on BlazeMeter with all the features you specified, simply reconfigure your remote WebDriver to connect to BlazeMeter with the capabilities you defined previously. Note that below, we've setup the variable url to reference the curl variable we defined earlier, then we've fed that and capabilities into our remote web driver:

The Refactored Code Snippet

Migrating from Zelenium (a Selenium Grid) to BlazeMeter Grid:

package com.company;
 
import org.openqa.selenium.By;
import org.openqa.selenium.Dimension;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.remote.DesiredCapabilities;
import org.openqa.selenium.remote.RemoteWebDriver;
 
import java.net.MalformedURLException;
import java.net.URL;
 
 
 
public class test {
    public static void main(String[] args) throws MalformedURLException {
        final String API_KEY = "";
        final String API_SECRET = "";
        final String BASE = "a.blazemeter.com";
        final String curl = String.format("https://%s/api/v4/grid/wd/hub", BASE);
 
        DesiredCapabilities capabilities = new DesiredCapabilities();
        capabilities.setCapability("blazemeter.apiKey", API_KEY);
        capabilities.setCapability("blazemeter.apiSecret", API_SECRET);
        capabilities.setCapability("blazemeter.reportName", "Test 12345");
        capabilities.setCapability("blazemeter.sessionName", "firefox browser test");
        capabilities.setCapability("browserName", "firefox");
//        capabilities.setCapability("blazemeter.locationId ", "us-east-1");
        capabilities.setCapability("blazemeter.locationId ", "harbor-12345");
 
 
 
 
        URL url = new URL(curl);
        WebDriver driver;
        driver = new RemoteWebDriver(url, capabilities);
 
//        System.setProperty("webdriver.gecko.driver", "/Users/henokjiru/Downloads/geckodriver");
//        driver = new FirefoxDriver();
 
        // Test name: Flights
        // Step # | name | target | value
        // 1 | open | / |
        driver.get("https://blazedemo.com/");
 
        // 2 | setWindowSize | 1313x1080 |
        driver.manage().window().setSize(new Dimension(1313, 1080));
 
 
        // 3 | click | name=fromPort |
        driver.findElement(By.name("fromPort")).click();
 
 
        // 4 | select | name=fromPort | label=Boston
        {
            WebElement dropdown = driver.findElement(By.name("fromPort"));
            dropdown.findElement(By.xpath("//option[. = 'Boston']")).click();
        }
 
 
        // 5 | click | name=toPort |
        driver.findElement(By.name("toPort")).click();
 
 
        // 6 | select | name=toPort | label=New York
        {
            WebElement dropdown = driver.findElement(By.name("toPort"));
            dropdown.findElement(By.xpath("//option[. = 'New York']")).click();
        }
 
 
        // 7 | click | css=.btn-primary |
        driver.findElement(By.cssSelector(".btn-primary")).click();
 
 
        // 8 | click | css=tr:nth-child(1) .btn |
        driver.findElement(By.cssSelector("tr:nth-child(1) .btn")).click();
 
 
        // 9 | click | id=inputName |
        driver.findElement(By.id("inputName")).click();
 
 
        // 10 | type | id=inputName | Henok
        driver.findElement(By.id("inputName")).sendKeys("Henok");
 
 
        // 11 | type | id=address | 123 Manin Str
        driver.findElement(By.id("address")).sendKeys("123 Manin Str");
 
        // 12 | type | id=city | Atlanta
        driver.findElement(By.id("city")).sendKeys("Atlanta");
        // 13 | type | id=state | GA
        driver.findElement(By.id("state")).sendKeys("GA");
        // 14 | type | id=zipCode | 30324
        driver.findElement(By.id("zipCode")).sendKeys("30324");
        // 15 | click | id=cardType |
        driver.findElement(By.id("cardType")).click();
        // 16 | select | id=cardType | label=American Express
        {
            WebElement dropdown = driver.findElement(By.id("cardType"));
            dropdown.findElement(By.xpath("//option[. = 'American Express']")).click();
        }
        // 17 | click | id=creditCardNumber |
        driver.findElement(By.id("creditCardNumber")).click();
        // 18 | type | id=creditCardNumber | 1111222233334444
        driver.findElement(By.id("creditCardNumber")).sendKeys("1111222233334444");
        // 19 | click | id=creditCardYear |
        driver.findElement(By.id("creditCardYear")).click();
        // 20 | type | id=creditCardYear | 2020
        driver.findElement(By.id("creditCardYear")).sendKeys("2020");
        // 21 | click | id=nameOnCard |
        driver.findElement(By.id("nameOnCard")).click();
        // 22 | type | id=nameOnCard | Henok Jiru
        driver.findElement(By.id("nameOnCard")).sendKeys("Henok Jiru");
        // 23 | click | css=.btn-primary |
        driver.findElement(By.cssSelector(".btn-primary")).click();
 
        driver.close();
        driver.quit();
    }
}
 

Bottom Line

In this tutorial, we have covered how to create and execute functional tests without a local server with BlazeMeter and Selenium. BlazeMeter integrates with a wide range of open-source testing solutions like Selenium, including JMeter, Gatling, Locust, and others in order to take your testing to the next level.

Experience BlazeMeter in action with our free trial. Sign up today.

Start Testing Now