Automated Testing With Jasmine Framework and Selenium

In at this time’s fast-paced world of software program growth, we now have new applied sciences and languages for growth approaching very ceaselessly. With this, comes a number of testing and automation instruments and frameworks within the associated market. Selecting the best set of instruments and frameworks turns into an absolute necessity as a result of it impacts the accuracy and TTM (Time to Market).

JavaScript is likely one of the broadly used programming languages for internet automation testing. It additionally helps numerous Selenium check automation frameworks for internet UI testing. Of all of the accessible ones, the Jasmine framework seems to be the best-suited, because it supplies a steady and purposeful structure. It’s straightforward to get began with the Jasmine framework and implement check eventualities with the identical.

On this tutorial of Selenium automation testing with Jasmine, we glance into the nitty-gritty of Jasmine from an automation testing standpoint. We will even learn to set it up, adopted by a pattern code writing, and execution. 

Let’s get began!

Introduction to Jasmine Framework

Jasmine Framework is an open-source JavaScript testing framework. It’s a behavior-driven (BDD), development-inspired framework that’s unbiased of some other frameworks. It’s used for unit testing of synchronous and asynchronous JavaScript check eventualities. Along with its excellent assist for JS, it supplies in depth assist for Python, Ruby, and different JavaScript-based languages. Moreover, it’s accessible for various variations like Standalone, Node.js, and so forth. An extra advantage of utilizing Jasmine is that it’s an unbiased framework with minimal (to no) dependency on language, browser, and platform.

The Jasmine framework doesn’t require a DOM and may be very straightforward to arrange. Additionally, it supplies an immaculate and simple to learn syntax like the instance under:

describe("A collection is only a operate", operate() 
  var a;
 
  it("and so is a spec", operate() 
	a = true;
 
	anticipate(a).toBe(true);
  );
);

Why Use Jasmine Framework as a Testing Framework for JavaScript Checks?

Having understood what Jasmine Framework is, allow us to take a look at the important thing benefits of utilizing JavaScript Selenium automation testing for Net UI testing:

• Straightforward to arrange and simple to put in writing checks.
• Very quick because it has nearly zero overhead and no exterior dependencies for Jasmine core.
• It comes with out-of-the-box assist to meet all of the check wants.
• Can run the browser and Node.js checks with the identical framework.
• An intensive and lively neighborhood and commonly up to date documentation for assist and growth.
• Help for utilization of spies for check doubles implementation within the framework.
• It even helps testing of frontend code utilizing the Jasmine-jQuery extension.
• It additionally helps test-driven growth along with behavior-driven growth.
• In contrast to different JavaScript testing frameworks, the Jasmine framework has built-in assertions.
• It comes with an inbuilt check runner, which can be utilized to run browser checks.
• Supplies a wealthy variety of built-in matchers that can be utilized to match expectations and add asserts to the check instances. Some examples are:

Benefits of Utilizing Jasmine Framework With Selenium

Jasmine and Selenium are popularly used for JavaScript automation testing and internet UI automation testing respectively. When engaged on a JavaScript-based internet UI challenge, it’s higher to mix the forces to take the benefit of them:

• Jasmine framework and Selenium automation testing complement one another in being open-source, straightforward to implement, and scale.
• Their capability to work with nearly all browsers and platforms is one other added benefit.
• Through the use of a Selenium Grid, Jasmine framework checks will be executed extra shortly via parallel execution. You may confer with our earlier article on the “Significance of Parallel Testing in Selenium” to get an in depth understanding concerning the benefits supplied by parallel check execution.

Getting Began With the Jasmine Framework

Having gathered some data across the what and why of the Jasmine framework in JavaScript, allow us to now dig deeper and get our arms soiled with the implementation. On this part of the Selenium Jasmine
framework tutorial, we’ll be taught concerning the workflow of Jasmine and perceive the fundamentals of writing check eventualities.

Allow us to assume we have to check a file Take a look at.js utilizing the Jasmine framework. SpecRunner.html could be the output file that may run all check instances from spec.js taking Lib as an enter after which present the ends in the browser.

• Lib: Consists of built-in JavaScript information that assist check assorted capabilities and different JS information inside the challenge.
• SpecRunner.html: A ordinary HTML file that may render the output of the check run within the browser.
• check.js: This file includes the precise functionalities/code beneath check, which is to be examined with the assistance of the spec.js and lib information.
• spec.js: Additionally referenced because the check case file, this incorporates all of the testcases in a prescribed format for the file to be examined.

Listed below are the fundamental constructing blocks of the Jasmine framework checks:

• Suite block: Suite types the fundamental constructing block of the Jasmine framework. One suite consists of check instances or specs written to check a selected file and is made up of two blocks: the describe() block and it() block.
• describe(): That is used to group associated check instances written beneath it(). There is just one describe() on the prime stage, until the check suite is a nested one. Wherein case, it takes a string parameter to call the gathering of check instances in that exact describe() block.
• it()—incorporates specs/check instances: That is used to outline the specs or check instances contained in the describe() block. Like a describe(), it takes related parameters—one string for title and one operate that’s the check case we need to execute. A spec with none assertions is of no use.

Every spec within the Jasmine framework consists of at the least one assertion, which is known as expectation right here. If all expectations go in a spec, it’s referred to as a passing spec. However, if a number of expectations fails in a spec, it’s referred to as a failing spec.

Observe: Since it() and describe() blocks are JavaScript capabilities, all the fundamental variable and scope guidelines apply to them as per JS code. Additionally, they’ll comprise any legitimate executable code. This implies variables on the describing() stage are accessible to all and it() stage inside the check suite.

Expectations or Matchers

Expectations or matchers are a strategy to implement assertions within the Jasmine framework. That is carried out with the assistance of the anticipate operate, which takes the precise worth produced by the check case as output.

It’s then chained with a matcher operate that takes anticipated outcomes for that check case after which evaluates them to offer a boolean end result. The returned worth is true if the expectation matches, else it’s false. The Jasmine framework additionally supplies the utility to verify for damaging assertions by including not earlier than the matcher for a required anticipate operate.

All of the anticipate capabilities come beneath the it() block, and every it() block can have a number of anticipate() blocks. The Jasmine framework supplies a variety of in-built matchers and allows you to prolong matchers by way of customized matchers:

describe("It is a describe block for expectations", operate() 

it("it is a constructive matcher", operate() 
    anticipate(true).toBe(true);
  );

it("it is a damaging matcher", operate() 
    anticipate(false).not.toBe(true);
  );

);

Here’s a small instance to know the utilization and implementation of the describe(), it(), and anticipate() blocks. We can be testing a file named Addition.js having a corresponding spec file with check instances as AdditionSpec.js:

operate Addition() =  
   
   initialValue:0,  
   
   add:operate (num)  
      this.initialValue += num; 
      return this.initialValue;    
   ,     
   
   addAny:operate ()     
      var sum = this.initialValue; 
		
      for(var i = 0; i < arguments.size; i++)  
         sum += arguments[i]; 
       
      
      this.initialValue = sum; 
      Return  this.initialValue; 
   , 
;

describe("to confirm Addition.js file",operate()  
   
   //check case: 1  
   it("Ought to have preliminary worth", operate () 
      anticipate(Addition.initialValue).toEqual(0);  
   ); 
   
   //check case: 2  
   it("ought to add numbers",operate() 
      anticipate(Addition.add(5)).toEqual(5); 
      anticipate(Addition.add(5)).toEqual(10);  
   );         
    
   //check case :3   
   it("Ought to add any variety of numbers",operate () 
      anticipate(Addition.addAny(1,2,3)).toEqual(6); 
   ); 
);

The Jasmine framework additionally supplies assist for nested suites using the nested describe() blocks. Right here is an instance of a spec file with nesting for a similar Addition.js:

describe("to confirm Addition.js file utilizing nested suites",operate()  
   
   // Beginning of first suite block  
   describe("Retaining values ",operate () 
   
      //check case:1    
      it ("Ought to have preliminary worth", operate ()  
         anticipate(Addition.currentVal).toEqual(0);   
      );    
   ); //finish of first suite block   

   //second suite block 
   describe("Including single quantity ",operate ()      
   
      //check case:2 
      it("ought to add numbers",operate()  
         anticipate(Addition.add(5)).toEqual(5); 
         anticipate(Addition.add(5)).toEqual(10); 
      );         
   ); //finish of second suite block  

   //third suite block 
   describe("Including Totally different Numbers",operate ()   
   
      //check case:3 
      it("Ought to add any variety of numbers",operate()   
         anticipate(Addition.addAny(1,2,3)).toEqual(6);  
      );    
   ); //finish of third suite block 
);

Utilizing Standalone Jasmine Framework Distribution for Selenium Automation Testing

To get began with the Jasmine framework, observe the under talked about steps to finish the system setup.

Step 1

Obtain the newest model of Jasmine from the official web site.

Step 2

Obtain the standalone zip for the chosen model from this web page.

Step 3

Create a brand new listing in your system after which add a sub listing to it.

Step 4

Transfer the downloaded standalone zip inside this sub listing and unzip it right here. As soon as unzipped, your listing construction ought to look one thing like this.

Step 5

To confirm the setup, load the SpecRunner.html in your internet browser. If you happen to see an output like under, it means you’ve accomplished the setup for the Jasmine framework in your system.

Let’s see the right way to modify this to run our check case for the Addition.js utilizing AdditionSpec.js and Nested_AdditionSpec.js.

Firstly, we’ll take away all the present information from the src and spec folder and add the information for our instance, which we now have understood already. After doing this, the folder construction would look one thing like this.

Having up to date the information, we’d like yet another step to execute our specs, which is to replace references to information beneath the spec and src folder as per our modifications in SpecRunner.html.

For this, open the SpecRunner.html and it’ll seem like this:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Jasmine Spec Runner v3.7.1</title>

  <hyperlink rel="shortcut icon" sort="picture/png" href="https://dzone.com/articles/lib/jasmine-3.7.1/jasmine_favicon.png">
  <hyperlink rel="stylesheet" href="lib/jasmine-3.7.1/jasmine.css">

  <script src="lib/jasmine-3.7.1/jasmine.js"></script>
  <script data-fr-src="lib/jasmine-3.7.1/jasmine-html.js"></script>
  <script data-fr-src="lib/jasmine-3.7.1/boot.js"></script>

  <!-- embrace supply information right here... -->
  <script data-fr-src="src/Participant.js"></script>
  <script data-fr-src="src/Tune.js"></script>

  <!-- embrace spec information right here... -->
  <script data-fr-src="spec/SpecHelper.js"></script>
  <script data-fr-src="spec/PlayerSpec.js"></script>

</head>

<physique>
</physique>
</html>

Replace the file title within the src and spec sections and put it aside. Now, you might be able to load the SpecRunner.html once more to see the outcomes.

Setting Up the Jasmine Framework Surroundings Utilizing npm

To get began with Selenium automation testing utilizing the Jasmine framework in JavaScript, we have to have some prerequisite setup in our system:

Step 1

Make certain the newest JavaScript model is put in on the system. Additionally, verify for Node.js and npm in your system and improve to the most recent model if required:

brew set up node
npm set up [email protected] -g

Step 2

Navigate to the listing the place you need to create your check case, execute it, and set up the Jasmine framework by triggering the npm command:

Step 3

As soon as that is carried out, we’ll set up Chrome Driver and Selenium WebDriver in the identical listing to execute the Jasmine framework Selenium check instances on the native Selenium Grid:

npm set up --save chromedriver
npm set up --save selenium-webdriver

Step 4

As soon as all that is carried out, we’re good to initialize our Jasmine framework challenge utilizing the init command:

You must have the ability to see a spec folder, which can be additional used for including check case information. For this Selenium Jasmine framework JavaScript tutorial, we can be utilizing the next .js file:

// Require modules used within the logic under
const Builder, By, Key, till = require('selenium-webdriver');

// You should utilize a distant Selenium Hub, however we aren't doing that right here
require('chromedriver');
const driver = new Builder()
    .forBrowser('chrome')
    .construct();

// Setting variables for our testcase
const baseUrl="https://accounts.lambdatest.com/login"

// operate to verify for login components and do login
var loginToLamdbatest = async operate() 

    let loginButton = By.xpath('//button');

    // navigate to the login web page
    await driver.get(baseUrl);

    // watch for login web page to be loaded
    await driver.wait(till.elementLocated(loginButton), 10 * 1000);
    console.log('Login display screen loaded.')


//to set jasmine default timeout
jasmine.DEFAULT_TIMEOUT_INTERVAL = 20 * 1000;

// Begin to write the primary check case
describe("Selenium check case for login web page", operate() 
    it("confirm web page components", async operate() 
        console.log('<----- Beginning to execute check case ----->');

	//to do login
	await loginToLamdbatest();

	var welcomeMessage = By.xpath('//*[@class="form_title"]');

	//confirm welcome message on login web page
	anticipate(await driver.findElement(welcomeMessage).getText()).toBe('Welcome Again !');

	//to give up the net driver at finish of check case execution
	await driver.give up();

	console.log('<----- Take a look at case execution accomplished ----->');
    );
);

On this instance file, we now have automated a state of affairs to navigate to the LambdaTest login web page after which confirm the welcome message on the web page. We’ve got used an area Selenium WebDriver and operating the checks on the Chrome browser. To execute the check case, use the next command in case you are on the identical listing stage because the file.:

jasmine  exampleSeleniumSpec.js

As soon as triggered, you will notice a Chrome browser tab open up in your system and get redirected to a given web page, and after profitable verification, the browser is closed, and the terminal exhibits logs like under:

⇒  jasmine example-spec.js
Randomized with seed 07075
Began
<----- Beginning to execute check case ----->
Login display screen loaded.
<----- Take a look at case execution accomplished ----->
.


1 spec, 0 failures
Completed in 7.882 seconds
Randomized with seed 07075 (jasmine --random=true --seed=07075)

Utilizing Jasmine to Run Selenium Checks on Selenium Grid

Working checks on an area Selenium Grid just isn’t a scalable and dependable strategy. You would want to speculate considerably in constructing the check infrastructure if the checks need to be run throughout numerous browsers, platforms, and system mixtures. That is the place cloud testing will be helpful because it gives the much-needed advantages of scalability, reliability, and parallel check execution.

We are going to run the Jasmine framework checks on Selenium Grid Cloud on LambdaTest. You have to to have your LambdaTest username and entry token helpful to proceed with the execution, particulars can be found within the LambdaTest profile part. Set the next setting variables in your machine:

For Mac/Linux

export LT_USERNAME="YOUR_USERNAME"
export LT_ACCESS_KEY="YOUR ACCESS KEY"

For Home windows

set LT_USERNAME="YOUR_USERNAME"
set LT_ACCESS_KEY="YOUR ACCESS KEY"

As soon as that is carried out, we modify the spec file to have a distant internet driver configuration for the LambdaTest Hub to execute check instances on the grid.

For this, we can be including the required browser capabilities for execution on the LambdaTest Grid and use a distant internet driver on their grid. Modified exampleSeleniumSpec.js as per our necessities would seem like this:

// Require modules used within the logic under
selenium = require('selenium-webdriver');
const Builder, By, Key, till = require('selenium-webdriver');

// Setting variables for our testcase
const baseUrl="https://accounts.lambdatest.com/login"
const username= course of.env.LT_USERNAME || "<Your_lambdatest_username>"
const accessKey=  course of.env.LT_ACCESS_KEY || "<Your_lambdatest_accessKey>"

var remoteHub = 'https://' + username + ':' + accessKey + '@hub.lambdatest.com/wd/hub';

const caps = 
         'construct': 'Jasmine-selenium-javascript',
    'browserName': 'chrome',
    'model':'73.0',
    'platform': 'Home windows 10',
    'video': true,
    'community': true,
    'console': true,
    'visible': true
        ;

         const driver = new selenium.Builder().
            usingServer(remoteHub).
            withCapabilities(caps).
            construct();

// operate to verify for login components and do login
var loginToLamdbatest = async operate() 

    let loginButton = By.xpath('//button');

    // navigate to the login web page
    await driver.get(baseUrl);

    // watch for login web page to be loaded
    await driver.wait(till.elementLocated(loginButton), 10 * 1000);
    console.log('Login display screen loaded.')


//to set jasmine default timeout
jasmine.DEFAULT_TIMEOUT_INTERVAL = 20 * 1000;
jasmine.getEnv().defaultTimeoutInterval = 60000;

// Begin to write the primary check case
describe("Selenium check case for login web page", operate() 

it("confirm web page components", async operate() 
        console.log('<----- Beginning to execute check case ----->');

	//to do login
	await loginToLamdbatest();

	var welcomeMessage = By.xpath('//*[@class="form_title"]');

	//confirm welcome message on login web page
	anticipate(await driver.findElement(welcomeMessage).getText()).toBe('Welcome Again !');

	//to give up the net driver at finish of check cae execution
	await driver.give up();

	console.log('<----- Take a look at case execution accomplished ----->');
    );
);

This is able to even have the same command to execute and would give the identical output as follows on the terminal:

⇒  jasmine lambdatest.js
Randomized with seed 11843
Began
<----- Beginning to execute check case ----->
Login display screen loaded.
<----- Take a look at case execution accomplished ----->
.


1 spec, 0 failures
Completed in 15.777 seconds
Randomized with seed 11843 (jasmine --random=true --seed=11843)

Now you can navigate the LambdaTest dashboard for the consumer account and examine the execution outcomes and logs on numerous tabs.

Underneath “Current Checks” on the left facet, you may see the newest execution on the Dashboard tab.

To investigate the whole timeline in your totally different check case runs, we will navigate to the “Automation” Tab.

Within the “Automation” tab, go to the “Automation Logs” part to view your complete execution logs and video of our check case. This helps in debugging the problems by analyzing the run.

It’s also possible to navigate to different tabs and per the requirement so as to add/view information for the execution.

With this, we now have accomplished our Jasmine framework JavaScript Selenium tutorial to know the setup and execution with Jasmine framework on the native and LambdaTest Grid cloud. 

It’s a Wrap

So, on this Jasmine framework tutorial with Selenium, we discovered concerning the whats and whys of Jasmine and Selenium, how they make a very good mixture for automation internet UI-based code utilizing JavaScript, and all benefits it supplies. Having carried out the setup and understanding the check case fundamentals, we now have efficiently executed our check case on native and Selenium Grid with the assistance of LambdaTest. So, get began and write your first Selenium automation testing code with Jasmine and JavaScript.

Pleased Testing!