Startup with Jasmine

Jasmine is a free JavaScript testing framework for BDD (Behavior Driven Development). In my opinion Unit-test should be written by developers, but tester you need also to know! This tutorial give you a hint how to use it.

Preparation

Download latest standalone version directly from GitHub and unzip. Now you have some files and folders. The file “SpecRunner.html” and “spec”, “src” folders are important for us. Some examples are allready  included. If you run the “SpecRunner.html” in your browser, you can see the first example results. A look inside this examples help you understand Jasmine!

Short Introduction

In the “src” directory, are the things to be tested. The “spec” directory has the tests. The “SpecRunner.html” link to the all files. The comments describe what you should do. Whenever you want to run the tests, you simply need to load or reload.

Example

Delete all files into “src” and “spec” folders. Create on “src” folder a new file.

function say_hello(name) {
    return "hello from " + name;
}
function simple_calc(value_a, value_b) {
    return value_a + value_b;
}
function return_bool(value_a) {
    return isNaN(value_a);
}
var timo = {human: "male"};
var john = {human: "male"};

And on “spec” folder this file.

describe("my first test suite", function() {
    it("test for correct string", function() {
        expect(say_hello("Lisa")).toContain("hello from Lisa");
    });
    it("test for correct value", function() {
        expect(simple_calc(5, 6)).toEqual(11);
    });
    it("test for not a number", function() {
        expect(return_bool("Hello")).toBeTruthy();
    });
    it("test for same object", function() {
        expect(timo).toBe(john);
    });
});

Now edit the “SpecRunner.html”. Just add the paths for JS files.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Jasmine Spec Runner v2.3.4</title>
  <link rel="shortcut icon" type="image/png" href="lib/jasmine-2.3.4/jasmine_favicon.png">
  <link rel="stylesheet" href="lib/jasmine-2.3.4/jasmine.css">
  <script src="lib/jasmine-2.3.4/jasmine.js"></script>
  <script src="lib/jasmine-2.3.4/jasmine-html.js"></script>
  <script src="lib/jasmine-2.3.4/boot.js"></script>
  <!-- include source files here... -->
  <script src="src/example.js"></script>
  <!-- include spec files here... -->
  <script src="spec/example.spec.js"></script>
</head>
<body></body>
</html>

That is it! 😉 Now your results shows 4 Specs with 1 failure.

Network diagnostic with mtr

MTR is a network diagnostic tool which combine the best from Ping and Traceroute. It helps software tester to diagnose network performance and create helpful reports. By mtr, you could also monitor the network. It sends ICMP ECHO requests to a destination and listens for the answers. Mtr works on both command-line and GUI (depending to installation method).

Installation

# Debian/Ubuntu (text-version only)
$ apt-get install mtr-tiny

# Debian/Ubuntu (gui and text-version)
$ apt-get install mtr

# RedHat/CentOS/Fedora (text-version only)
$ yum install mtr-tiny

# RedHat/CentOS/Fedora (gui and text-version)
$ yum install mtr

# Mac OS X (Homebrew)
$ brew install mtr

# Mac OS X (MacPorts)
$ port install mtr

The mtr project is on GitHub. If you like to compile mtr by your self.

Command-line examples

# basic syntax
$ mtr [options] [target]

# example host
$ mtr google.com

# example IP
$ mtr 173.194.40.70

# force text-mode (-t | --curses)
$ mtr -t google.com

# do not resolve host names (-n | --no-dns)
$ mtr -n google.com

# limit to 5 (-c | --report-cycles)
$ mtr -c 5 173.194.40.70

# report mode (-r | --report)
$ mtr -r -c 5 173.194.40.70

# do not cut long names (-w | --report-wide)
$ mtr -r -w -c 5 173.194.40.70

Note: Read the man page for more options!

Report analysis

  • Loss% – Shows packets loss at each hop
  • Snt – Number of packets being sent
  • Last – Latency of the last packet
  • Avg – Average latency of all packets
  • Best – Best round trip time
  • Wrst – Worst round trip time
  • StDev – Standard deviation of the latencies to each host

HAR with Python WebDriver and BrowserMob Proxy

This time is shown how to automate performance test for web sites. Tools in usage are Python Selenium WebDriver and BrowserMob proxy. The results are HAR files which can be viewed in HAR Viewer.

Precondition

  • JAVA installed
  • Python Packages for selenium and browsermob-proxy
selenium
browsermob-proxy

Preparation

Download BrowserMob Proxy and check if proxy can started by command-line.

# change to 
$ cd browsermob-proxy-2.1.0-beta-1/bin/

# start proxy on port 9090
$ ./browsermob-proxy -port 9090

Create Python Class

#!/usr/bin/env python
# -*- coding: utf-8 -*-
"""Python - BrowserMob - WebDriver"""
from browsermobproxy import Server
from selenium import webdriver
import json


class CreateHar(object):
    """create HTTP archive file"""

    def __init__(self, mob_path):
        """initial setup"""
        self.browser_mob = mob_path
        self.server = self.driver = self.proxy = None

    @staticmethod
    def __store_into_file(title, result):
        """store result"""
        har_file = open(title + '.har', 'w')
        har_file.write(str(result))
        har_file.close()

    def __start_server(self):
        """prepare and start server"""
        self.server = Server(self.browser_mob)
        self.server.start()
        self.proxy = self.server.create_proxy()

    def __start_driver(self):
        """prepare and start driver"""
        profile = webdriver.FirefoxProfile()
        profile.set_proxy(self.proxy.selenium_proxy())
        self.driver = webdriver.Firefox(firefox_profile=profile)

    def start_all(self):
        """start server and driver"""
        self.__start_server()
        self.__start_driver()

    def create_har(self, title, url):
        """start request and parse response"""
        self.proxy.new_har(title)
        self.driver.get(url)
        result = json.dumps(self.proxy.har, ensure_ascii=False)
        self.__store_into_file(title, result)

    def stop_all(self):
        """stop server and driver"""
        self.server.stop()
        self.driver.quit()


if __name__ == '__main__':
    path = "browsermob-proxy-2.1.0-beta-1/bin/browsermob-proxy"
    RUN = CreateHar(path)
    RUN.start_all()
    RUN.create_har('google', 'http://google.com')
    RUN.create_har('stackoverflow', 'http://stackoverflow.com')
    RUN.stop_all()

Note: The highlighted line must contain the path to BrowserMob Proxy!
Happy testing! If you use PhantomJS instead of Firefox, you can use this on Build server like Jenkins/Hudson and so on, too.

Create templates for Vim

Developers should follow not only the rules and processes of quality assurance. They must also have advantages for motivation from QA! As QA, you can already achieve more with less. Templates would be a possibility. This guide shows you how to deploy templates for Vim.

Preparation

In order to provide templates, check if the personal vimrc file exists. Do not use the global vimrc! Whatever you configure in the personal vimrc file will overrule any setting in the global vimrc file.

# start vim
$ vim

# the global vimrc file can found by
:echo $VIM

# the home directory can found by
:echo $HOME

# the personal vimrc can found by
:echo $MYVIMRC

# exit vim
:q!

# if no personal vimrc exists
$ touch /home/<user>/.vimrc

# create folder for templates
$ mkdir /home/<user>/templates

Create some templates

Now place some files with in the templates directory.

<!DOCTYPE html>
<html lang="">
<head>
	<title></title>
	<meta charset="UTF-8">
	<meta name="description" content="">
	<meta name="author" content="">
	<meta name="keywords" content="">
	<meta name="robots" content="noindex,follow" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="" type="text/css" rel="stylesheet" />
</head>
<body>
	<!-- Content goes here... -->
</body>
</html>
#!/usr/bin/env python
# -*- coding: utf-8 -*-
"""Missing docstring"""


class Lorem(object):
    """Missing docstring"""
    
    def __init__(self):
        """Missing docstring"""


if __name__ == '__main__':
    

and so on… . Open the personal vimrc file and add the following auto-command.

# open personal vimrc
$ vim /home/<user>/.vimrc

# change into insert mode
i

# add command
autocmd BufNewFile * silent! 0r $HOME/templates/%:e.tpl

# exit insert mode
<ESC>

# store change and close
:x

Whenever a Developer create now a new file, Vim looks for a template that matches the extension of the file. If there is no template for the file type, then Vim simply creates an empty file as usual.

My vimrc example

" Set color scheme
colorscheme peachpuff

"Show current position
set ruler

" Enable syntax highlighting
syntax enable

" Set standard encoding
set encoding=utf8

" Set standard file type
set ffs=unix,mac,dos

" Use spaces instead of tabs
set expandtab

" Use smart tabs
set smarttab

" 1 tab == 4 spaces
set shiftwidth=4
set tabstop=4

autocmd BufNewFile * silent! 0r $HOME/templates/%:e.tpl

 

Test XML command line with xmllint

In most Linux and BSD, xmllint is delivered or very easy to install. Xmllint can parse and validate one or more XML files with output as reports. A version for Windows is available, too!

The tiny example XML file:

<?xml version="1.0" encoding="UTF-8"?>
<company>
	<branch lang="de-DE">
		<team id="011">
			<name status="on">Develop</name>
			<size>8</size>
		</team>
	</branch>
	<branch lang="en-US">
		<team id="021">
			<name status="off">Sales</name>
			<size>5</size>
		</team>
		<team id="022">
			<name status="on">QA</name>
			<size>2</size>
		</team>
	</branch>
	<branch lang="de-CH">
		<team id="031">
			<name status="on">Develop</name>
			<size>5</size>
		</team>
		<team id="032">
			<name status="off">Consultant</name>
			<size>3</size>
		</team>
	</branch>
</company>

Usage Examples:

# simple validation
$ xmllint --valid example.xml

# validation but without result tree
$ xmllint --valid --noout example.xml

# validation agains a specific DTD schema
$ xmllint --noout --dtdvalid <URL> example.xml

# again RelaxNG schema
$ xmllint --relaxng <schema> example.xml

# again WXS schema
$ xmllint --schema <schema> example.xml

# again schematron
$ xmllint --schematron <schema> example.xml

Query with xmllint

$ xmllint --shell example.xml

# with cat
/ > cat //name
 -------
<name status="on">Develop</name>
 -------
<name status="off">Sales</name>
 -------
<name status="on">QA</name>
 -------
<name status="on">Develop</name>
 -------
<name status="off">Consultant</name>

# with cat and xpath 
/ > cat //*[contains(*,"Consultant")] 
 -------
<team id="032">
	<name status="off">Consultant</name>
	<size>3</size>
</team>

# with grep
/ > grep QA
/company/branch[2]/team[2]/name : ta-        2 QA

# exit
/ > exit

XPath with xmllint

# by root element
$ xmllint --xpath //company example.xml

# by child elements
$ xmllint --xpath //name example.xml 

# by specific child element
$ xmllint --xpath //branch[3] example.xml

# by last child element
$ xmllint --xpath '/company/branch[last()]' example.xml

# path expression
$ xmllint --xpath 'child::*/child::*/team' example.xml

# by attribute
$ xmllint --xpath '//branch[@lang="de-CH"]' example.xml

Test responsive webpages online

Of course it is better to test webpages directly on devices, but in case of costs not possible. A first good and cheap possibility is the use of online resources, next to browser Add-ons. Developer and software tester can use this services for a good impression. In most cases, the specifying of the URL and sizes are sufficient. This topic show some good free services. Which is the right one for you, you must decide for yourself.

Online Services