Performance measurement with PhantomJS and confess

PhantomJS and confess make it possible to measure your webapplication performance via command-line.

Precondition

PhantomJS is installed
confess is downloaded

Preparation

If your PhantomJS version >= 2.0, phantom.args is deprecated! “TypeError: undefined is not an object” You have to make a quick hack inside the confess.js file.

# add in top of file
var system = require('system');

# replace all
phantom.args
# by
system.args

# change
var a = 0;
# into
var a = 1;

Run the performance measurement

# change to folder with confess.js and config.json
$ cd /path/to/folder

# generation of an appcache manifest
$ phantomjs confess.js <URL> appcache

# run performance measurement
$ phantomjs confess.js <URL> performance

Note: By default the results go to stdout, but you can pipe into a file!

Run your Python Selenium tests headless

This time i show you the headless testing with Selenium WebDriver and PhantomJS. This method can be used for example on continuous integration systems.

Install PhantomJS

Follow the documentation on PhantomJS website or as Mac OS X user simply use Mac Ports.

# on Mac OS X
$ sudo port install PhantomJS

# check version
$ phantomjs --version

Create a tiny test script

#!/usr/bin/env python
import unittest
from selenium import webdriver


class SearchContentOnWebsite(unittest.TestCase):

    def setUp(self):
        # create a new PhantomJS session
        self.driver = webdriver.PhantomJS()
        self.driver.set_window_size(800, 600)
        self.driver.get("http://softwaretester.info")

    def test_search_headline(self):
        title = 'This will fail | - Softwaretester -'
        assert title in self.driver.title

    def tearDown(self):
        self.driver.close()

if __name__ == "__main__":
    unittest.main(verbosity=2)

Just create a instance of PhantomJS WebDriver and run you tests. That is all! 😉

Start with Python and Selenium WebDriver

This introduction should give you some hints about Python and Selenium WebDriver. I will use this in following tutorials as a base.

Preconditions

Python installed
pip (package manager) installed
Editor or IDE installed

Preparation

As first step simply install or upgrade the Selenium package.

# install or upgrade selenium
$ pip install -U selenium

# get information about package
$ pip show selenium

This is a fairly simple process. After the successful command execution you will have the Selenium WebDriver client library on your machine with all that is needed to create automated scripts.

The first script

Now start using the unittest library. The script comments help to describe the code.

#!/usr/bin/env python
import unittest
from selenium import webdriver


class SearchContentOnWebsite(unittest.TestCase):
    """define a class that inherits the TestCase class"""

    def setUp(self):
        """perform some tasks at the start of each test"""
        # create a new Firefox session
        self.driver = webdriver.Firefox()
        # wait for a certain amount of time
        self.driver.implicitly_wait(30)
        # maximize browser window
        self.driver.maximize_window()
        # navigate to the start URL
        self.driver.get("http://softwaretester.info")

    def test_search_headline(self):
        """a very simple test case"""
        link_text = 'Modern Status Plugin'
        title = 'Jenkins - Modern Status Plugin | - Softwaretester -'
        # find a element with partial text
        elem = self.driver.find_element_by_partial_link_text(link_text)
        # click element
        elem.click()
        # assert that title have value
        assert title in self.driver.title

    def tearDown(self):
        """method to clean up any initialized values after the test"""
        # close the browser window
        self.driver.close()

if __name__ == "__main__":
    unittest.main(verbosity=2)

Run Test

To run the test simple call your script.

./my_first_test.py

# or
python my_first_test.py

Jenkins – Modern Status Plugin

Who the original symbols of Jenkins do not like, should try the Modern Status Plugin. The tiny plugin of Oliver Vinn provide a new and very cool set of icons for the continuous integration server. The installation is very simple!

Example

This is a example of original icons for Jenkins/Hudson:

Yes they might lead to confusion and don’t look awesome.

Steps

Open the Plugin Manager and search for “Modern Status Plugin”.

After restart Jenkins/Hudson the new iconset should be available and look like:

This looks quite nice and speaks much better, already on first view, about the status.

CSSLint with Grunt on Debian

This tutorial gives an tiny insight into CSSLint with Grunt on Debian. After that you should be able, to implement more Grunt tasks for your project.

Installation

As root or sudo user install needed packages!

# update your system
$ apt-get update && apt-get upgrade

# install nodejs and npm
$ apt-get install -y nodejs-legacy npm

# install grunt-cli (global)
$ npm install -g grunt-cli

Check the installation of all needed tools.

# show different versions
$ nodejs --version
$ npm --version
$ grunt --version

Create a new project

As “normal” user create a new project and install the needed plugin.

# create new folder
$ mkdir TestProject

# change directory
$ cd TestProject/

# interactively create a package.json file
$ npm init

# install the csslint plugin
$ npm install grunt-contrib-csslint --save-dev

If no problems occurred, the package.json file should look like:

{
  "name": "TestProject",
  "version": "0.0.1",
  "description": "my example project",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "lupin3000",
  "license": "ISC",
  "devDependencies": {
    "grunt": "^0.4.5", "grunt-contrib-csslint": "^0.4.0"
  }
}

Create a css folder and a css file with some mistakes like:

$ mkdir css
$ vim css/example.css

The example.css file contains some issues!

html, body {
  margin: 0;
  padding: 0 
  borde: 0;
}

In the last step we create the Gruntfile.js

# create Gruntfile.js
$ vim Gruntfile.js

module.exports = function(grunt) {
  grunt.initConfig({
    csslint: {
      // define the files to lint
      files: ['css/*.css'],
      strict: {
        options: {
          "import": 2
        }
      }
    }
  });
  grunt.loadNpmTasks("grunt-contrib-csslint");
};

Thats all, now run just the command and see the results.

# run csslinter
$ grunt csslint

Geolocation and Python

There are a lot of different services where you can ask the Geolocation for IP and/or Domains. With python it is very easy to make requests on that APIs. As security tester you can use it on the discovery term.

Example:

#!/usr/bin/env python
#  -*- coding: utf-8 -*-

import requests
import sys


class GeoLocation(object):

    def __init__(self):
        self.url = 'http://ip-api.com/json/'

    def parse_args(self):
        self.url = self.url + sys.argv[1]

    def get_args(self):
        usr_input = raw_input("Insert ip/url: ")

        if not usr_input:
            sys.exit(1)
        else:
            self.url = self.url + usr_input

    def show_results(self):
        response = requests.get(self.url)
        output = response.json()

        for key, val in output.items():
            if val:
                print key, "=>", val


if __name__ == '__main__':
    RUN = GeoLocation()
    if len(sys.argv) < 2:
        RUN.get_args()
    else:
        RUN.parse_args()
    RUN.show_results()

Sass, Compass and Jenkins

This tutorial shows how Sass, Compass and Jenkins working together in very easy way. The goal is that Jenkins created the CSS from SCSS files.

Precondition

Jenkins installed
Ruby installed

Steps

In first step we need to install Sass and Compass on the clients (Developer engines) and build server (Jenkins).

# check for installed libraries
$ gem list

# update gem`s
$ sudo gem update --system

# install sass and compass libraries
$ sudo gem install sass
$ sudo gem install compass

Now we create on one client the project.

# change to specific folder
$ cd ~/path/to/folder

# create compass project
$ compass create --bare --sass-dir "sass" --css-dir "css" --javascripts-dir "js" --images-dir "img"

# create folders
$ mkdir img js css sass/partials

# create files
$ touch index.html js/main.js sass/style.scss sass/partials/_reset.scss sass/partials/_content.scss

Now add and edit some content to the files with your favorite editor and commit all to your repository. The content for the tutorial looks like this:

require 'compass/import-once/activate'
# Require any additional compass plugins here.

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "img"
javascripts_dir = "js"

# You can select your preferred output style here (can be overridden via the command line):
output_style = :compressed

# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true

# To disable debugging comments that display the original location of your selectors. Uncomment:
line_comments = false


# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

<!doctype html>
<head>
	<title>Lorem ipsum</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<link rel="stylesheet" href="css/styles.css">
</head>
<body>
	<header>
		Header Content
	</header>
	<div id="wrapper">
		<h1>Lorem ipsum</h1>
		<article>
			<section>
				<h2>Lorem ipsum</h2>
				<p>Lorem ipsum dolor sit amet</p>
			</section>
			<section>
				<h2>Lorem ipsum</h2>
				<p>Lorem ipsum dolor sit amet</p>
			</section>
		</article>
	</div>
	<footer>
		Footer Content
	</footer>
	<script src="js/main.js"></script>
</body>
</html>

@import "compass";
@import "partials/reset";
@import "partials/content";

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

$color_001: #000000; // Black
$color_002: #FFFFFF; // White
$color_003: #FF0000; // Red

body {
	color: $color_002;
	background-color: $color_001;
}

Okay… now lets go to Jenkins. Here we create a new “Freestyle Job” and configure the Source-Code-Management and insert the following command into “Execute Shell”

rm -fr ${WORKSPACE}/css
compass compile

Thats it… after running the build into the workspace you should see the folder “css” and a file “style.css” the content should look like:

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}body{color:#fff;background-color:#000}

– Softwaretester –

knowledge is power

Month: May 2015