Manual Testing Syllabus

  1. SDLC and SDLC Phases
  • Requirements Phase
  • Analysis Phase
  • Design phase
  • Coding Phase
  • Testing phase
  • Installation


  1. SDLC Models
  • Waterfall Model.
  • V Model
  • Agile Model.
  • Prototype Model.
  • Spiral Model
  • Hybrid Model


  1. Software Testing Methodologies
  • White Box Testing
  • Black Box Testing
  • Grey Box Testing


  1. White Box Testing.
  • Path Testing
  • Loop Testing
  • Condition Testing
  • Performance Testing WBT
  • Memory Testing WBT


  1. Black Box Testing
    1. Functional Testing
      • Component Testing
      • Integration Testing
      • System Testing
      • User Acceptance Testing.
      • Sanity/Smoke Testing.
      • Regression Test.
    2. Non Functional Testing
      • Performance Testing.
      • Compatibility Testing.
      • Security Testing.
      • Recovery Testing.
      • Installation Testing.
      • Adhoc Testing.
    3. Globalization Testing
      • I18N Testing.
      • L1ON Testing.


  1. Software Testing Life Cycle
  • Understand the requirements/System study
  • Write Test Plan
  • Write Test Cases
  • Traceability Matrix
  • Test Execution
  • Defect Tracking
  • Prepare test execution report(TER)
  • Retrospect Meeting


  1. Testing Techniques
  • ECP
  • BVA
  • Error Guessing


  1. Defect Tracking Tools (Learn & Implement)
  • TFS

Edmunds Vehicle API with Jquery

To get all Vehicle Details (New, Used, Future) using Jquery, Use the below code.

Step 1: Include the below code in your

Add this code in your HTML

Step 2: Sending Email with User selected car details.

Introduction to React JS

  1. What is React JS?
  2. What are the advantages of React?
  3. Limitations of React


What is React?

  • React is a front-end JavaScript library. Let me explain you in simple language with few key features of React.

Eliminating Redundancy:

  • While working on any application which uses HTML as Views, you might have a situations where you just copy and paste the same code at many places. Which is called as Code Redundancy.
  • So at this situation did you ever thought that how would if I can reuse this HTML code at multiple places.



If you are in this situation then how would if there is a common HTML for both page1 and page2.



How about this, awesome right!

Yes of course if we could do this there will be no more HTML code redundancies in the application.


Reuse UI Components:

  • If we can reduce the code redundancies using custom HTML tags, this is nothing but creating Reusable UI Components like <app-head></app-head>.
  • According to React documentation “React is a library for building reusable UI components which presents data that changes over time”.
  • Here the React Components comes into picture.
  • Component:
    • React application is all about components, the entire application will be divided into several Component segments.
    • One component can be nested with other component.
    • Components can be created in two ways,
      • Using var Component = CreateClass({ })
      • Using ES6 standards with Class keyword, class Component extends React.Component<{},{}>{  }


Ex:Using ES6 Syntax

Ex: Using ES5 Javascript Syntax

Easy Data-Binding:

  • This is one of the most important thing in React which is called as “Data-Binding”.
  • React can do only one-way binding using its interpolation “{ <expression> }”.
  • Here the JSX comes into picture, where JavaScript + XML = JSX.
  • JSX:
    • React used JavaScript expressions within curly braces “{ <expression> }”. We can put any type of JavaScript expression in the curly braces inside JSX.
    • Each React Element is like a real kind of javascript object which can be either stored in a variable or can be used throughout the program.
    • After coding in JSX pages no need to precompile the code, the JSX file will be automatically compiled and generates JavaScript syntax in the browser.

Example: Here I’ve used TSX instead of JSX, that’s why syntax while importing the libraries might look different.

Instead we can use, in JSX files

In TSX files,



Advantages of React:

  • Reusability of the UI code.
  • Eliminating code Redundancies (common code)
  • Familiar Syntax such as using class, extends, implements, interface keywords which are used for programming in most of the familiar languages like Java and .Net framework ,
  • The virtual DOM makes the testing simpler for the testers.
  • React can be used with most of the frameworks, because this is used only as a View Layer. Just we can replace the View Layer in any project with React UI Components. And it’s compatible with any Framework.
  • This is a light-weight library.
  • JSX syntax makes the developers feel free to use react i.e., Developers can use both javascript and HTML in a JS / JSX / TSX (typescript + XML) files with in a component. Where the developers will write the business logics in the component class, and the view part in the component’s templatee., with in the render ( ).
  • React can be written in
    • Javascript (.js) –   ES5 syntax
    • React’s recommended (.jsx) – Both ES5 and ES6 syntax
    • Typescript (.tsx) files. –  Both ES5 and ES6 syntax



  • React is just a library, because of that to develop an application React is just isn’t enough.
  • It doesn’t have its own routing, sevices etc… Because it is not a framework.
  • React has failed in competing with most of the advanced frameworks like Angular.
  • If someone asks why only React? There would be no perfect answer. Because Angular Framework can perform all the operations that React can do.

Differences between Angular JS and Angular 2

1.4 Differences between Angular JS and Angular 2

  • First thing we need to keep in mind is Angular 2 is not an upgrade version for Angular JS. Because Angular 2 is completely different compared to Angular JS architecture.
  • Architectures of Angular 2 has designed this as a new language which is no more uses MVC pattern. It’s a complete rewrite by the same Angular JS team.
  • Angular team announces that Angular 1.X is called as “AngularJS”, where Angular 2 will be called as just “Angular”
  • Let’s see the main differences between Angular JS and Angular 2

Lessson 1 – Introduction to Angular 4

Hi guys. In this tutorial we are going to learn about Introduction to Angular 4.

Introduction to Angular4

  1. What is angular?
  2. What are the advantages of learning Angular?
  3. Why should we choose angular?
  4. Differences between Angular Version (1.X, 2, 4)

1.1 What is Angular?

  • Perquisite to learn Angular 4 is Javascript and Typescript.
  • If someone ask you this question, then you must be aware of what is JAVASCRIPT. Because javascript is the basic for all the scripting languages like Angular4, ReactJs, NodeJs, etc… Here are few languages that are supersets of javascript that will generate Javascript on compiled.

  • The Aim of Javascript is to make the HTML page dynamic. Now if you have a question that what is dynamic, “Making a HTML Dynamic mean, nothing but changing the data in the HTML page by an action done by the user”.
  • Angular 4 is a Framework which supports,
    •  Databinding (one-way/two-way),
    • OOPs Features (Inheritance, Interfaces, Encapsulation, Abstraction). One thing clear is Angular 4 doesn’t support polymorphism.
    • Angular uses its own routing to develop Single Page Applications (SPA).
    • Services like HTTP.
    • Dependency Injection.
    • Animations.
    • Lazy loading application.
    • ES5 and ES6 (ECMA script)


  • Angular is a Framework but not a library, where the difference is pretty simple that library is just an add-on for a framework. But framework gives you a platform to create the application.
  • Angular is a Structured Framework which is very useful to maintain the DOM and to manipulate the DOM. Why do we call it a Structured F/w is because Angular has its own specified architecture to create an application. To create a new application we must create in the following structure.

  • Angular 4 uses Typescript language to create an application. So perquisite for learning Angular 4 is Javascript and Typescript. Where Typescript is a superset of javascript which will generate javascript on compile. For compiling typescript it uses TSC (Typescript compiler).
    Ex: You have sample.ts.
    On compiling sample.ts using tsc –compiler it will generate two more files

1.2  What are the advantages of learning Angular?

  • Main advantage is the Consistency and it is easy to Maintain.
  • It has a Component-based architecture that provides a higher quality of code
  • Google has announce the LTS( Life time support) for Angular 4.
  • Angular4 is developed using Typescript enabling us to optimize the code using OOPS concept.
  • Angular is very famous for Single Page Application (SPA).
  • Two-way data binding reduces the development time for synchronizing View and Model.
  • Dependency Injection allows us to reuse the code, and we can import third party libraries to Angular by using DI (Dependency Injection), and where we can share the various services into other services or components.
  • Directives are very helpful for developers to change the behavior of the HTML elements in Document Object Model (DOM), permitting us to create dynamic and rich content with HTML. Angular provides us the facility to create our custom Directives.

1.3 Why Should we choose Angular ?

  • Angular is a open source framework which we can freely download, no need for pay money for
    this framework.
  • It makes client side programming very easy.
  • The tooling support is as good as on Java or .Net platforms.
  • Angular uses TypeScipt language, Its object oriented and supports core features like interfaces and classes. TypeScipt code analyzer warns you about the errors as you type.
  • Data Binding is a primary feature of angular, it can be implemented in 2-Ways,
    • One-way data binding
    • Two-way data binding
  • First time in client side frameworks angular introduced this data binding concept, this
    feature will reduce lot of client side coding related to data presentation (HTML view).
  • It’s a pattern language it uses HTML and extends the behaviour of the HTML elements with directives(for example, <myPaging></myPaging>. This improve code readability.
  • Dependency injection give you a clean way to implement loose coupling between components and
    services. Binding and events allows you to create reusable and loosely coupled components.
  • Performing validations will becomes so simple, just we need to know about HTML5 Validation attributes (required, pattern, max-length, min-length).
  • Unit testing becomes easy in Angular.
  • Angular applications can run on all major browsers and smart phones, including Android and
    IOS based phones/tablets.
  • It has own Routing support for single page application(SPA), in SPA only main page will load from
    server remaining all requestes are processed at clint side without reloading the whole page.

Angular 2/4 Router no longer navigates when navigating to the current URL

The concept we need to understand here is that the,

  1. Angular route will navigate only when it navigates to a different route using [routeLink] attribute.


  • Force reload/ refresh the current route using RouteReuseStrategy
  • Now we need to set this.router.navigated = false; after navigation completes.

  • Window.scrollTo(0,0) , will move your page scroll bar to the top position.

Words Reserved in Javascript

In Javascript few words cannot be used as variables, methods, functions or any kind of object names, below given is the list of all the reserved words.

abstract else instanceof switch
boolean enum int synchronized
break export interface this
byte extends long throw
case false native throws
catch final new transient
char finally null true
class float package try
const for private typeof
continue function protected var
debugger goto public void
default if return volatile
delete implements short while
do import static with
double in super

React JS setup using ES6 with .tsx files in Visual Studio

Download Source Code

When i’m a beginner to React i’ve faced many issues in making setup with Visual Studio. As i’ve found that there are many ways to write React code.

  • Can be written in Js  files using ES5
  • Can be written in JSX files using ES5
  • Can be written in TSX files using ES6

tsx –> ts (typescript) + jsx ( javascript and xml)

Where most of the tutorials were providing setups with JSX/JS using ES5.  Now i’ll show you how to setup in your local environment Visual Studio using ES6 with TSX (typescript syntax).

Step 1: Install Npm

  • To install the React Js we need Node Js environment setup.
  • js development environment can be setup in Windows, Mac, Linux and Solaris. The following tools/SDK are required for developing a Node.js application on any platform
    • js
    • Node Package Manager (NPM)
  • NPM (Node Package Manager) is included in Node.js installation since Node version 0.6.0., so there is no need to install it separately.
  • To Install Node visit Node.js official web site It will automatically detect OS and display download link as per your Operating System.Click on Download and install the latest version.
  • Once you install Node.js on your computer, you can verify it by opening the command prompt and typing node –version. If Node.js is installed successfully then it will display the version of the Node.js installed on your machine, as shown below.

Step 2: Create ASP.Net Web Application

  • Open Visual Studio FileNewProject
  • Select->”Web Template”->select the ASP.Net Web Application->Click OK
  • In the “New ASP.NET MVC Project” dialog, Select the MVC Template->Click OK
  • Goto->Tools-> Options –> Projects and Solutions –> Select External Web Tools->Move $(PATH) to above the $(DevEnvDir)->Click Ok

Step 3: Create package.json file and install the required packages using npm commands. Open Command prompt and Goto your project directory and run command


2. Now provide a name using lower case. And you can just click enter and say Yes.

  •  Install webpack

  • Install webpack-dev-server

  • Install react and react-dom. React and ReactDOM are generally used together. ReactDOM is a package for working with the DOM

  • Now we need typescript and ts-loader to load and build .tsx files

File: package.json


Step 4:  Download React Quick Start files 

Go to the following link and download React Quick Start files

Step 5: Copy required folder into your ASP.Net Web Application

  • Copy dist, typings and src folders  from quick start files and paste them in the project.
  • dist —> This folder has bundle.js which will be always update by using Web Pack Task Runner.
  • typings –> This is used to provide typescript intellisence to .tsx files
  • src –> This is the folder where we create .tsx files and do some coding part.
  • When we do any changes in .tsx files make sure that you run the Web Pack Task Runner. Unless the changes will not get updated in bundle.js.

Step 6: Copy webpack.config.js in the project directory.

  • In order to use external modules webpack.config.js must be included with resolve:{extensions: [‘.ts’, ‘.tsx’, ‘.js’, ‘.json’]}.
  • entry –> You can setup startup file here.
  • output: To direct the changes in .tsx to bundle.js.
  • module: Setting up the loaders that are used. Here we are using ts-loader. 

File: webpack.config.js


Step 7:  Copy tsconfig.json and typings.json files from quick start and paste them in the project.

Step 8: Install WebPack Task Runner .

  • Now right click webpack.config.js –> open Task Runner Explorer
  • Click on Run-Development / Watch-Development.
  • If any error in the we can l0ok at the error from Run-Development / Watch-Development.

Step 9: Add div tag in the index.cshtml with an id attribute. Refer that id in src –> index.tsx.

File: Views –> Home –> index.cshtml 

File: src/index.tsx


How to export your Html Table to Excel with CSS

Download Source Code

To export your table data (or) a list into excel workbook, there are several options to export like, we can use Microsoft.Office.Interop library or something else. But in this tutorial i want to show you the simplest way to export the Html Table to Excel with Inline CSS applied using very few lines of code.

  • Here the Excel creates a file that contains the Html and XML tags which is also called as Html/XML Hybrid. When a WorkBook saved in the following format with Html and XML tags, it can go from Excel to the Browser and back form Browser to Excel again without loosing any information.

Step 1:  Create a simple html code as following. Here we can create ‘N’ number of WorkSheets in a WorkBook.

  • From the above code X:Name  in the X:ExcelWorkSheet is the name of the sheet in the Excel.
  • And we can specify the required options to the WorkSheet with in <x:WorksheetOptions>. Here are the few more <X:WorkSheetOptions>
    •   <x:Selected/>   

    • <x:DoNotDisplayGridlines/>   

    • <x:ProtectContents>False</x:ProtectContents>   

    • <x:ProtectObjects>False</x:ProtectObjects>   

    • <x:ProtectScenarios>False</x:ProtectScenarios>

  • And the If condition <!–[if gte mso 9]> is used to check whether you have Microsoft Office or not. It’s really necessary to check this.

Step 2: Create a Html table with inline Css in the <body>


Step 3: Add the following Script in the <head>.

  • function (table, name) { … } is the function which is accepting the two parameters,
    • one is the Id of the table.
    • other is the name of the X:ExcelWorkSheet. 
  • template: It is just a string which is constructed with Html/XML hybrid.
  • base64 = function(s) –> accepting the parameter of the format which is framed by using function format = function (s, c).
  • format = function (s, c) –> accepting two parameters,
    • One is the template with HTMl and XML tags.
    • Other is the ctx object which is framed with two properties { worksheet: ‘ ‘, table:’ ‘}

Step 4: Here is the total HTML page.