Automated Testing With Jasmine Framework and Selenium
With the help of this Selenium Jasmine framework tutorial, readers will learn how to set up the Jasmine framework with Selenium and how to run your test cases.
Join the DZone community and get the full member experience.
Join For FreeIn today’s fast-paced world of software development, we have new technologies and languages for development coming on very frequently. With this, comes several testing and automation tools and frameworks in the related market. Choosing the right set of tools and frameworks becomes an absolute necessity because it impacts the accuracy and TTM (Time to Market).
JavaScript is one of the widely used programming languages for web automation testing. It also supports a number of Selenium test automation frameworks for web UI testing. Of all the available ones, the Jasmine framework turns out to be the best-suited, as it provides a stable and functional architecture. It is easy to get started with the Jasmine framework and implement test scenarios with the same.
In this tutorial of Selenium automation testing with Jasmine, we look into the nitty-gritty of Jasmine from an automation testing standpoint. We will also learn how to set it up, followed by a sample code writing, and execution.
Let’s get started!
Introduction to Jasmine Framework
Jasmine Framework is an open-source JavaScript testing framework. It is a behavior-driven (BDD), development-inspired framework that is independent of any other frameworks. It is used for unit testing of synchronous and asynchronous JavaScript test scenarios. In addition to its outstanding support for JS, it provides extensive support for Python, Ruby, and other JavaScript-based languages. Furthermore, it is available for different versions like Standalone, Node.js, etc. An additional benefit of using Jasmine is that it is an independent framework with minimal (to no) dependency on language, browser, and platform.
The Jasmine framework does not require a DOM and is very easy to set up. Also, it provides an immaculate and easy to read syntax like the example below:
describe("A suite is just a function", function() {
var a;
it("and so is a spec", function() {
a = true;
expect(a).toBe(true);
});
});
Why Use Jasmine Framework as a Testing Framework for JavaScript Tests?
Having understood what Jasmine Framework is, let us look at the key advantages of using JavaScript Selenium automation testing for Web UI testing:
- Easy to set up and easy to write tests.
- Very fast as it has almost zero overhead and no external dependencies for Jasmine core.
- It comes with out-of-the-box support to fulfill all the test needs.
- Can run the browser and Node.js tests with the same framework.
- An extensive and active community and regularly updated documentation for support and development.
- Support for usage of spies for test doubles implementation in the framework.
- It even supports testing of frontend code using the Jasmine-jQuery extension.
- It also supports test-driven development in addition to behavior-driven development.
- Unlike other JavaScript testing frameworks, the Jasmine framework has built-in assertions.
- It comes with an inbuilt test runner, which can be used to run browser tests.
- Provides a rich number of built-in matchers that can be used to match expectations and add asserts to the test cases. Some examples are:
toEqual
toBe
toBeTruthy
Advantages of Using Jasmine Framework With Selenium
Jasmine and Selenium are popularly used for JavaScript automation testing and web UI automation testing respectively. When working on a JavaScript-based web UI project, it is better to combine the forces to take the advantage of them:
- Jasmine framework and Selenium automation testing complement each other in being open-source, easy to implement, and scale.
- Their capacity to work with almost all browsers and platforms is another added advantage.
- By using a Selenium Grid, Jasmine framework tests can be executed more quickly through parallel execution. You can refer to our earlier article on the “Importance of Parallel Testing in Selenium” to get a detailed understanding about the advantages offered by parallel test execution.
Getting Started With the Jasmine Framework
Having gathered some knowledge around the what and why of the Jasmine framework in JavaScript, let us now dig deeper and get our hands dirty with the implementation. In this section of the Selenium Jasmine
framework tutorial, we will learn about the workflow of Jasmine and understand the basics of writing test scenarios.
Let us assume we need to test a file Test.js
using the Jasmine framework. SpecRunner.html
would be the output file that will run all test cases from spec.js
taking Lib as an input and then show the results in the browser.
Lib
: Consists of built-in JavaScript files that help test varied functions and other JS files within the project.SpecRunner.html
: A usual HTML file that will render the output of the test run in the browser.test.js
: This file comprises the actual functionalities/code under test, which is to be tested with the help of thespec.js
andlib
files.spec.js
: Also referenced as the test case file, this contains all the testcases in a prescribed format for the file to be tested.
Here are the basic building blocks of the Jasmine framework tests:
- Suite block: Suite forms the basic building block of the Jasmine framework. One suite is composed of test cases or specs written to test a particular file and is made up of two blocks: the
describe()
block andit()
block. describe()
: This is used to group related test cases written underit()
. There is only onedescribe()
at the top level, unless the test suite is a nested one. In which case, it takes a string parameter to name the collection of test cases in that particulardescribe()
block.it()
—contains specs/test cases: This is used to define the specs or test cases inside thedescribe()
block. Like adescribe()
, it takes similar parameters—one string for name and one function that is the test case we want to execute. A spec without any assertions is of no use.
Each spec in the Jasmine framework consists of at least one assertion, which is referred to as expectation here. If all expectations pass in a spec, it is called a passing spec. On the other hand, if one or more expectations fails in a spec, it is called a failing spec.
Note: Since it()
and describe()
blocks are JavaScript functions, all the basic variable and scope rules apply to them as per JS code. Also, they can contain any valid executable code. This means variables at the describing()
level are accessible to all and it()
level within the test suite.
Expectations or Matchers
Expectations or matchers are a way to implement assertions in the Jasmine framework. This is done with the help of the expect
function, which takes the actual value produced by the test case as output.
It is then chained with a matcher function that takes expected results for that test case and then evaluates them to give a boolean result. The returned value is true
if the expectation matches, else it is false
. The Jasmine framework also provides the utility to check for negative assertions by adding not
before the matcher for a required expect function.
All the expect functions come under the it()
block, and each it()
block can have one or more expect()
blocks. The Jasmine framework provides a wide range of in-built matchers and lets you extend matchers via custom matchers:
describe("This is a describe block for expectations", function() {
it("this is a positive matcher", function() {
expect(true).toBe(true);
});
it("this is a negative matcher", function() {
expect(false).not.toBe(true);
});
});
Here is a small example to understand the usage and implementation of the describe()
, it()
, and expect()
blocks. We will be testing a file named Addition.js
having a corresponding spec file with test cases as AdditionSpec.js
:
function Addition() = {
initialValue:0,
add:function (num) {
this.initialValue += num;
return this.initialValue;
},
addAny:function () {
var sum = this.initialValue;
for(var i = 0; i < arguments.length; i++) {
sum += arguments[i];
}
this.initialValue = sum;
Return this.initialValue;
},
};
describe("to verify Addition.js file",function() {
//test case: 1
it("Should have initial value", function () {
expect(Addition.initialValue).toEqual(0);
});
//test case: 2
it("should add numbers",function() {
expect(Addition.add(5)).toEqual(5);
expect(Addition.add(5)).toEqual(10);
});
//test case :3
it("Should add any number of numbers",function () {
expect(Addition.addAny(1,2,3)).toEqual(6);
});
});
The Jasmine framework also provides support for nested suites utilizing the nested describe()
blocks. Here is an example of a spec file with nesting for the same Addition.js
:
describe("to verify Addition.js file using nested suites",function() {
// Starting of first suite block
describe("Retaining values ",function () {
//test case:1
it ("Should have initial value", function () {
expect(Addition.currentVal).toEqual(0);
});
}); //end of first suite block
//second suite block
describe("Adding single number ",function () {
//test case:2
it("should add numbers",function() {
expect(Addition.add(5)).toEqual(5);
expect(Addition.add(5)).toEqual(10);
});
}); //end of second suite block
//third suite block
describe("Adding Different Numbers",function () {
//test case:3
it("Should add any number of numbers",function() {
expect(Addition.addAny(1,2,3)).toEqual(6);
});
}); //end of third suite block
});
Using Standalone Jasmine Framework Distribution for Selenium Automation Testing
To get started with the Jasmine framework, follow the below mentioned steps to complete the system setup.
Step 1
Download the latest version of Jasmine from the official website.
Step 2
Download the standalone zip for the selected version from this page.
Step 3
Create a new directory in your system and then add a sub directory to it.
Step 4
Move the downloaded standalone zip inside this sub directory and unzip it here. Once unzipped, your directory structure should look something like this.
Step 5
To verify the setup, load the SpecRunner.html
in your web browser. If you see an output like below, it means you have completed the setup for the Jasmine framework on your system.
Let’s see how to modify this to run our test case for the Addition.js
using AdditionSpec.js
and Nested_AdditionSpec.js
.
Firstly, we will remove all the existing files from the src
and spec
folder and add the files for our example, which we have understood already. After doing this, the folder structure would look something like this.
Having updated the files, we need one more step to execute our specs, which is to update references to files under the spec
and src
folder as per our changes in SpecRunner.html
.
For this, open the SpecRunner.html
and it will look like this: