Chrome Extension - the way I used it

Sequel of bookmarking-javascript-way-i-used-it is this Chrome Extension

Are you a google chrome user ? Cheers

It is google chrome specific candy - Chrome Extension

To create sample chrome extension by yourself: https://robots.thoughtbot.com/how-to-make-a-chrome-extension

manifest.json:

{
  "manifest_version": 2,
  "name": "miApp Filler Extension",
  "version": "0.1",
  "content_scripts": [
    {
      "matches": [
        "http://localhost:8080/miApp*"
      ],
      "js": ["fillAndSubmit.js"]
    }
  ]
}

fillAndSubmit.js: (might not be the optimal way)

function getById(id) { return document.getElementById(id); }
setTimeout(function() {
        if(getById('gwt-debug-login-username')){
            getById('gwt-debug-login-username').value='Superuser'; 
            getById('gwt-debug-login-password').value='Superuser'; 
            getById('gwt-debug-login-submit-button').click(); 
        }
    }, 1000
);

Adding it to Chrome: 

In new tab type chrome://extensions/ and enter

1. Make sure you have checked the Developer mode in chrome extensions.


2. Check on Allow in incognito checkbox (if required)




That's it.

Using it:

As soon as you open the App login page (by clicking a bookmark), the new chrome extension will fill the form and submits it.

Bookmarking javascript - the way I used it

geb-get-into-groovey-way-i-used-it is modified into Bookmarking JavaScript

I have learned to bookmark JavaScript from Visual Event. This can be used to fill your login forms and submit with single click (clicking bookmark basically)

javascript:(function(){
    document.getElementById('gwt-debug-login-username').value='Username';
    document.getElementById('gwt-debug-login-password').value='password';
    document.getElementById('gwt-debug-login-submit-button').click();
})();

The Problem:
Each time when I want to open my application in some browser like chrome for testing or whatever, the following are the sequence of things I do (it is pretty similar with every other web based project or application)

If you want, use it at your own discretion

1. Put the URL in the URL bar (or clicking the bookmark)
2. As my app starts with a login page, I provide username, password (is a trivial one and not that sensitive),
3. Click on Submit button to login  and proceed with my intended work.

Rescue:
Here comes the JavaScript Bookmarking to rescue us, (works in Firefox and Chrome)

Creating it:

1. Bookmark any link with name of your choice ex: "fill and submit" (on the bookmark bar)



2. Right-click on the newly created bookmark and select edit option



3. Paste the JavaScript code in the URL textbox and hit save.




That's it.

Using it:

Once you open the App login page (by clicking a bookmark), you can then click on the new bookmark we created to fill and submit the login page.


What next:

Making a chrome extension to detect and fill login page without clicking another bookmark

Geb - "get into the groove(y)" - the way I used it

Dear friends,

I am back with a new post cheers

Image Courtesy: http://www.123rf.com/photo_5468266_boy-with-computer.html

As a continuation to my earlier post on Geb(pronounced as 'Jeb')
http://techiteasypolicy.blogspot.in/2015/04/geb-very-groovy-browser-automation.html , I am here with a new tool/candy I created and using in my day to day work.


I personally feel that this is a groovier (funny) or viral way of using Geb though it is meant for Web Automation Testing.

The Problem:
Each time when I want to open my application in some browser like chrome for testing or what ever, the following are the sequence of things I do (it is pretty similar with every other web based project or application)

If you want, use it at your own discretion

1. Open the browser
2. Put the URL in the URL bar (or clicking the bookmark)
3. As my app starts with a login page, I provide username, password (is a trivial one and not that sensitive),
4. Click on Submit button to login  and proceed with my intended work.

Rescue:
Here comes the Geb script to rescue us,

To run the following script you need groovy in the path.

Then run the following command in command prompt (assuming that in the current path there is a file named appTrigger.groovy and it has the following piece of code in it)

groovy appTrigger.groovy

@Grab('org.gebish:geb-core:0.10.0')
@Grab('org.seleniumhq.selenium:selenium-chrome-driver:2.43.1')
@Grab('org.seleniumhq.selenium:selenium-support:2.43.1')
import geb.Browser

Browser.drive {
    go 'http://localhost:8080/myApp/' 
    $ '#gwt-debug-login-username' value 'Superuser'
    $ '#gwt-debug-login-password' value 'Superuser'
    $ '#gwt-debug-login-submit-button' click()
}

That's it, Geb does the heavy lifting for you.

Actually, it is not just login submission, its about the Web browser and automating user interactions with it. Hence you can extrapolate it and use it in your own way.

Going one step further (Externalizing the URL and username and password into a config.properties file)

@Grab('org.gebish:geb-core:0.10.0')
@Grab('org.seleniumhq.selenium:selenium-chrome-driver:2.43.1')
@Grab('org.seleniumhq.selenium:selenium-support:2.43.1')
import geb.Browser

config = new Properties()
new File('config.properties').withInputStream { config.load it }
Browser.drive {
    go config.url
    $ config.username_selector value config.username 
    $ config.password_selector value config.password
    $ config.button_selector click()
}


//config.properties
url=http://localhost:8080/myApp/
username=Superuser
password=Superuser

username_selector=#gwt-debug-login-username
password_selector=#gwt-debug-login-password
button_selector=#gwt-debug-login-submit-button

Going still further with Gradle's application plugin we can create a jvm application Distribution with which user with plain Java installed in their machine can run this tool. Long live Gradle :)

The distribution Zip file created by by above Gradle plugin has every thing required to run the app without the Sophisticated build tools and/or IDEs.

Code for the above said Gradle based App is in my GitHub repository https://github.com/PraveenGandhi/geb-based-tool-to-open-app, feel free to hack it.

 Hope you enjoy this.

PS: I have used password here, please don't use your sensitive passwords like net-banking credentials  etc.

ngChat - 3 way data binding

Dear Angular Friends,

I made an app (simple html page of 66 lines) with Angular and Firebase (AngularFire). Please have a look at it.

Any one who has GMail account can login in to this app and chat with others.

Demo: http://praveengandhi.github.io/ngChat.html

Source: https://github.com/PraveenGandhi/PraveenGandhi.github.io/blob/master/ngChat.html


In AngularJs we have seen 2-way data binding, with AngularFire we archive 3-way data binding which is cool, isn't it.

Code below:

<html ng-app="myChatRoom">
  <head>
    <title>Chat</title>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <link rel="shortcut icon" href="img/stvd.png">
  </head>
  <body>
  <div class="container">
  <div ng-controller="ChatCtrl">
    <div id="login">
      <span ng-show="auth.user">
        <img ng-src="{{auth.user.thirdPartyUserData.picture}}" width="40" height="40"/>
        Hello {{auth.user.displayName}}...! | <a href="#" ng-click="auth.$logout()" class="btn btn-default">
        <span class="glyphicon glyphicon-log-out"></span> Logout</a>
      </span>
      <a class="btn btn-info btn-lg btn-block" ng-hide="auth.user" ng-click="auth.$login('google')">
 <span class="glyphicon glyphicon-envelope"></span> Log in with Gmail</a>
    </div>
      <div ng-show="auth.user">
    <p class="bg-info velocity-opposites-transition-slideLeftIn" data-velocity-opts="{ stagger: 150 }" ng-repeat="message in messages">
      <img ng-src="{{message.from.thirdPartyUserData.picture}}" width="30" height="30"/><b>{{message.from.displayName}}</b> says:   {{message.content}}
    </p>
    <br/>
    <form ng-submit="addMessage()">
      <div class="form-group">
     <label class="sr-only" for="message">Write your message</label>
       <input ng-model="message" id="message" class="form-control input-block" placeholder="Write your message"/>
      </div>
      <button type="submit" class="btn btn-primary btn-block"><span class="glyphicon glyphicon-send"></span> Send</button>
    </form>
    </div>
  </div>
</div>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular-animate.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/velocity/0.7.0/jquery.velocity.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/velocity/0.7.0/velocity.ui.min.js"></script>
<script src="js/angular-velocity.min.js"></script>

<script src="https://cdn.firebase.com/js/client/1.0.18/firebase.js"></script>
<script src="https://cdn.firebase.com/js/simple-login/1.6.2/firebase-simple-login.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.7.1/angularfire.min.js"></script>

<script type="text/javascript">
 var app = angular.module("myChatRoom", ["firebase",'angular-velocity']);
 
 app.factory("ChatService", ["$firebase", function($firebase) {
   var ref = new Firebase("https://welfare.firebaseio.com/chat");
   return $firebase(ref.limit(10));
 }]);
 
 app.controller("ChatCtrl", ["$scope", "ChatService", "$firebaseSimpleLogin",
   function($scope, chatService, $firebaseSimpleLogin) {
    var ref = new Firebase("https://welfare.firebaseio.com/");
     $scope.auth = $firebaseSimpleLogin(ref);
     $scope.messages = chatService;
     $scope.addMessage = function() {
       $scope.messages.$add({from: $scope.auth.user, content: $scope.message});
       $scope.message = "";
     };
   }
 ]);
</script>
</body>
</html>

Geb - Very Groovy Browser Automation

Dear Java/Testing friends,

Try to have a look at Geb(pronounced as 'Jeb') http://www.gebish.org/, which is a browser automation library built on WebDriver and leverages power of Groovy language and jQuery like content selection (using CSS selectors).
WebDriver is now there in Selenium 2.0  (Selenium 1.0 + WebDriver = Selenium 2.0).

Please find a sample script below. In this script I have also used a cool feature of Groovy language called Groovy Grapes (@Grab). Grapes are like dependencies of the script. We no need to download dependencies and add them to the class path (Grapes does all the heavy lifting for us).

To run the following script you need groovy in the path.

Then run the following command in command prompt

groovy Geb_Demo.groovy

@Grab("org.gebish:geb-core:0.10.0")
@Grab("org.seleniumhq.selenium:selenium-firefox-driver:2.43.1")
@Grab("org.seleniumhq.selenium:selenium-support:2.43.1")
import geb.Browser

Browser.drive {
    go "http://google.com"
 
    // make sure we actually got to the page
    assert title == "Google"
 
    // enter wikipedia into the search field
    $("input", name: "q").value("wikipedia")
 
    // wait for the change to results page to happen
    // (google updates the page dynamically without a new request)
    waitFor { title.endsWith("Google Search") }
 
    // is the first link to wikipedia?
    def firstLink = $("li.g", 0).find("a")
    assert firstLink.text().contains("Wikipedia")
 
    // click the link 
    firstLink.click()
 
    // wait for Google's javascript to redirect to Wikipedia
    waitFor { title.contains("Wikipedia") }
    browser.driver.executeScript("alert('Hello Gopal');")
}

CHMOD calculator - built with AngularJS and Material Design

Dear Friends,

Please have a look at my new tool CHMOD Calculator.
It is used to get the Octal value for file permissions in Linux.
It is built with Google's AngularJS and material design (materializecss.com)

http://praveengandhi.github.io/chmod_calc.html


Once the value is decided then that can be used to change the file permissions in linux using the following command
chmod -R 755 .
-R is for recursive
. is current directory

Hope it is useful to you :)

Today I learnt to use Gradle-Plugin called 'Application'

Dear Java Friends,

I started using Maven from 2013 August. After a while I came across Gradle. It is pretty much similar and simpler than Maven. It also has the notion of plugins as Maven. Today I have learnt a new plugin named application and used it like charm.

Demo app code at my Github: https://github.com/PraveenGandhi/gradle-application-plugin-demo

Long back I have seen a presentation (http://www.infoq.com/presentations/Improve-Your-Java-with-Groovy) by Ken Kousen called "Improve Your Java with Groovy". There he emphasizes about Gradle and says:

Maven people seeing Gradle for the first time, some times just weep, you know how much simpler life can be.

Usually I used to create some kind of automation utilities at work (inspired by my Senior at Cognizant). Now the time has come to share these tools that make my work easier with other friends (might not be typical java developers) like testers and Business guys.

I cannot give these tools as they are to others, if I give like that I need to help to to use it. Rather it is better to make some executable scripts (.bat files) which makes the usage of the tool much easier. Initially I used to create such by my bear hands. Now it is all there as a simple Gradle plugin (application).

How?


From Gradle docs:

The Gradle application plugin extends the language plugins with common application related tasks. It allows running and bundling applications for the jvm by creating a jvm application Distribution.

It gives us the tasks like run, distZip,distTar and so on.

I have used run to simply run the app using Gradle.
I used distZip to create a distribution which has every thing required to run the app without the Sophisticated build tools and/or IDEs.

The above said distribution (project_name-version_number.zip) has two folders namely bin and lib.

As the name,
bin folder has start-up scripts like batch(for windows) and bash(for UN*X).
lib folder has the output jar (of the current project) and all the libraries mentioned in the dependency list of build.gradle.

Long live Gradle :)