Saturday, August 29, 2015

Introduction to Selenium Web Driver

            Using Selenium Web Driver (Firefox)

Today I would be talking about test automation using Selenium Web Driver. In this article I would be using Firefox
Steps involved
  1. Create a new unit test project in visual studio


 
2. Install Selenium drivers using nugget package manager. We need both package as shown in the snapshot 




3. Write test case as shown below.In this example I am automating a google search for my name.
  
    Steps involved:
  • Load the browser driver : FirefoxDriver
  • Specify the timeout to find the web site :5 sec
  • Specify the website name : http://google.com
  • Find the Id of the search element using Inspect element. In our example we need the Id of the text box in google search ( As shown in the snapshot after the code ) 
  • Enter the text field for search "Prathap Kudupu"
  • Hit Enter button
  • Run the test case

using System;
using System.Drawing;
using Microsoft.VisualStudio.TestTools.UnitTesting;
using OpenQA.Selenium;
using OpenQA.Selenium.Chrome;
using OpenQA.Selenium.Firefox;
using OpenQA.Selenium.Support.UI;

namespace SeleniumTestSamples
{
    [TestClass]
    public class GoogleSearchTest
    {
        private IWebDriver _driver;
        [TestMethod]
        public void GoogleNameSearchChrome()
        {
            try
            {
                _driver = new ChromeDriver();

                _driver.Manage().Timeouts().ImplicitlyWait(TimeSpan.FromMinutes(5));
                _driver.Manage().Window.Position = new Point(0, 0);
                _driver.Manage().Window.Size = new Size(1024, 768);
                _driver.Manage().Timeouts().ImplicitlyWait(TimeSpan.FromSeconds(5));
                //Navigate to Google.com
                _driver.Navigate().GoToUrl("http://google.com");
                //Find the Id for entering value
                IWebElement searchElement =
                _driver.FindElement(By.Id("lst-ib"));
                //Pass values 
                searchElement.SendKeys("Prathap Kudupu");
                //Click enter key
                searchElement.SendKeys(Keys.Enter);
            }
            catch
            {
                if (_driver != null)
                {
                    _driver.Quit();
                }
                throw;
            }
        }

        [TestMethod]
        public void GoogleNameSearchFireFox()
        {
            IWebDriver driver = new FirefoxDriver();
            //Keep finding untill time out has been reached
            driver.Manage().Timeouts().ImplicitlyWait(TimeSpan.FromSeconds(5));
            //Navigate to Google.com
            driver.Navigate().GoToUrl("http://google.com");
            //Find the Id for entering value
            IWebElement searchElement=
            driver.FindElement(By.Id("lst-ib"));
            //Pass values 
            searchElement.SendKeys("Prathap Kudupu");
            //Click enter key
            searchElement.SendKeys(Keys.Enter);


        }
    }
}





Find the Id form the web page 






















Run test case from usual studio



Test case results 




  Using Selenium Web Driver (Chrome)

You need to install nuget package for chrome as shown below. This is the only difference.




Visual Studio as administrator

                          Running visual studio as administrator.

Have you wondered why do we need to run visual studio as administrator? 

Here are some good reasons when we need to run visual studio as administrator

  • Installing visual studio
  • Upgrading from trial edition
  • Using post-build events that register a component
  • Debugging applications that run under as different user account such as asp.net web sites
  • Debugging applications that run with elevated permissions
  • Using emulator to debug cloud service product for windows azure
  • Profiling an application
  • Deploying a web application to IIS on a local computer
You can find more information in this MSDN article


How do we run visual studio as administrator?
In the start menu, right click the shortcut for VS and run as administrator.








Tuesday, August 18, 2015

Font Awesome Icon

                                Using font awesome icons

 These are Icons You can place . anywhere using the CSS Prefix fa and the icon's name. Font Awesome is designed to be used with inline elements 
<i class="fa fa-check-circle"></i> fa-camera-retro
 <!DOCTYPE html>  
 <html>  
 <head>  
   <title></title>  
 </head>  
 <body>  
 <h2>JSON Object Creation in JavaScript</h2>  
 <p id="demo"></p>  
 <script>  
   var text = '{"FirstName":"Prathap","LastName":"Kudupu"}';  
   var obj = JSON.parse(text);  
   document.getElementById("demo").innerHTML =  
     obj.FirstName + "<br>" +  
     obj.LastName + "<br>";  
 </script>  
 </body>  
 </html>  

using font awesome icons
  • Paste the following reference into the <head> section of your site's HTML.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"
  • Paste

Tuesday, August 11, 2015

Grunt with Visual Studio

                       Integrating Grunt with Visual Studio

Today I would be showing how to integrate Grunt with visual studio. I found there was no useful article available on the net.
In this example I would be showing how to concat and minify files.
Steps involved :
1. Add new Grunfile.Js

    






2.Add NPM Package.Json
























3. Install Node





4. Install grunt-cli







5. Install NPM packages needed 
//used to concat the files
npm install grunt-contrib-concat --save-dev

//Used for minify
npm install grunt-concat-uglify --save-dev

6. Specify Packages used in Package.Json












7. Specify Taskdetails in Gruntfile.js

8. Add as  post build task in visual studio
Note: For visual studio 2013 and less you can download task manager 
from  Download Task Manager














Based on the need we can keep adding tasks. 

Friday, August 7, 2015

Bootstrap buttons

                     Changing button styles using Bootstrap

Lets see how we can use inbuilt bootstrap class . In this short post I would be using button classes which could be useful.

By default button would not have any style. 
  •  "btn" : Applies css class to the button. 
  •  "btn-group" : Groups all the buttons in a div
  •  "btn-group-vertical" : Groups all the buttons in a div vertically






























 Display

  



  
















Button Menu with drop up and drop down
Note 

  1.  The anchor tag has class named "dropdown-toggle" and the data-toggle is "dropdown"
  2. For Drop up we have  we have to specify button group as "drop up"





Display 














This are few of the bootstrap classes which can be used for buttons

Firewall Port

                                           
Today I would be talking about writing inbound rules to open a port blocked by firewall in the web server.I was working with one of the client and was trying to host a application on a different port. I was able to browse the application locally. When I tried to run the application remotely, I was getting server error. I did not have any clue what was happening. Later I figured out that the firewall was blocking the port 8081.

I have screen shots about the steps involved to open a port

Step 1 Open windows firewall in the hosted server



Step 2




















Step 3

































Step 4































Step 5






























Step 6
































Step 7

































Step 8



I hope this small post would save time.

AOP

                        Aspect oriented Programming


Today I would be discussing about AOP. what do we mean by AOP
   AOP
  • Software development technique
  • Allows to add enterprise functionality 
  • Reduce boiler plate code
  • Increase modularity
  • Manage cross cutting concerns
  • Infrastructure composition
  • Wrapper around piece of business functionality
   AOP helps implement following principles
  • Single responsibility principle
  • Decorator pattern
  • Open close principle
  • Interceptors
                    Advantages of AOP

                  1. Allows us to take common functionality within our applications, centralize it into singly responsibility.Attach these modules,  also known as aspects to     many places in the  application.
                  2. Most often aspects are encapsulating functionality that spends large         portion  of the application
                  3. Common cross cutting functionality includes Loggingsecurityprofiling and transaction management 
                      ASPECTS
                       Where can we add these aspects or inspect or execute code?

                  •  OnStart: Executed immediately prior to the method call
                  •  OnSuccess :Executed immediately after the method call runs without                throwing an exception
                     Types of aspects
                             Calls to class methods/properties. These usually involves IOC                    Containers

                  JQuery Selectors

                                                 

                  Today I would talking about Jquery selectors

                  Before the evolution of Jquery we would see less developers used to like javascript. Reason, it was difficult to learn and code was lengthy.However Jquery internally uses javascript


                  Main advantage of using Jquery

                  • Runs across all browsers
                  • Lean and clean
                  • Simple powerful syntax
                  • Highly exentesible
                  • Ajax support
                  • Uses Css selectors
                  Note: Based on my knowledge the libary has atleast 19 pages of code.

                  Important syntax
                  Jquery Identifier  :$();

                  Anonymous function

                  $(function (){
                  
                  });

                  Simple selectors

                  $('.classname') : Selects all element within a class
                  $('.#spaceId')   : Selects all element within a Id
                  $('<div>')         : Selects all 'Div' element

                  psuedo code selection
                  $('div:first-child');
                  finds the first item in the list
                   1.Ana
                   2.Beena
                  The selection would fetch  Ana

                  Find all the external link in a web page
                   var ExternalRef=  $('<a href ^="http://">');

                   ex: <a href="http://KudupuTechnologies.com">
                        <a href ="~/home">
                   it would only fetch the anchor tag which has "http:"

                  Find Array of buttons
                  var buttons=$('button');

                  Write dynamic literals
                  var div =$('<Div>This is a Div</Div>');

                  Add an Array
                  var elements=$('<span>One</span','<span>Two</span>');

                  Access raw DOM elements
                  var detail =$(document.getElementId('house-detail');

                  It would fetch all the DOM elements with id "house-detail"

                  Find the title in specific page
                  var detail =$([document.querySelector('h2'),document.querySelector('h3')]);

                  Find specific element within a specific column
                  var primary = $(.col-sm-5").find(' button[class*="btn-search"] ');

                  It would fetch a button with class name "btn search" within the column.

                  Get the parent
                  var parents =$('tbody').parents();
                  Goes all the way upto find a parent

                  Find specific parent

                  var specficParent=$('tbody').parents('table');
                  Goes all the way till it finds "table"

                  Find specific children

                  var children =$('tbody').children();

                  Find specific td value in a table
                  var tdArray=$("td:contains('Myvalue')");

                  Hide a Bootstrap Modal using Jquery

                  ("#Id").modal('hide');

                  I have listed selectors which I feel is helpful .we would have ended up writing lengthy JavaScript code for the same functionality.

                  For more Jquery selectors please refer http://api.jquery.com/category/selectors/

                  Grunt

                                        Grunt : The JavaScript Task Runner     

                  •  Is a task-based command line build tool for java script projects which makes performing repetitive, but necessary, task trivial
                  •  Java script based build tool
                      Use
                  •      Validating html/CSS/JavaScript
                  •      Minify CSS/ JavaScript code
                  •      Compile CoffeeScript/ TypeScript
                  •      Compile Less file into CSS
                  •      Run unit test case
                  These are the files which are used in grunt
                  Package.JSONMetadata file which describes your project
                  Gruntfile.js : File used to configure or define GRUNT tasks

                  Install and configure Grunt

                  • Install Node.js - http://nodejs.org/
                  • Install Node PM --https://npmjs.org/ (If you install node then npm would automatically be installed)
                  • Install the GRUNT cli  npm install -g grunt-cli
                  • Install GRUNT to your local directory npm install grunt --save--dev
                  Ex of using grunt file to clean files and folder
                  1. Install external dependency file                                                                                                     npm install grunt-contrib-clean --save-d After successful installation of external files would automatically update the project.Json file as shown below
                  2.Create grunt.js file


                   3. Create a folder named CleanFiles.Add/Create files inside this folder
                    4. Run the grunt command in the task manager.
                        grunt default -v ;
                    grunt: is the grun task
                    Default :is the name of the task which needs to be run.
                  -v : Specifies run this in verbose mode. It would show all the outputs as shown below    
                   5. Verify the folder
                  Note: The files has been removed by the grunt task

                   








                  Summary

                  This is an simple example how we can use grunt. 

                  Basic Git commands

                                     Git  ( Distributed revision control )     

                      Git is a version control system that is used for software development and other version control tasks. As a distributed revision control system it is aimed at speed,[8] data integrity, and support for distributed, non-linear workflows.

                  Git was created by Linus Torvalds in 2005 for development of the Linux kernel, with other kernel developers contributing to its initial development. Its current maintainer is Junio Hamano.

                  As with most other distributed version control systems, and unlike most client–server systems, every Git directory on every computer is a full-fledged repository with complete history and full version-tracking capabilities, independent of network access or a central server