Web page BDD test with selenium specflow nunit

I have looked around the internet to find a simple example of how to implement web UI BDD with Selenium,Specflowand nunit . However some tutorials are either too long or too complicated.Thus I spent some time on that, and it ends up very simple.To save someone’s future researching time I also created a nuget package-SeleniumNUnitSpecflow.

TL;DR, 3 simple steps to create a specflow web test project to check if google can find my blog.

After 3 steps, you will get a skeleton of using selenium (firefox webdriver),specflow to do a webtest.
2013-12-31 12_03_37-ClassLibrary1 - Microsoft Visual Studio (Administrator)

The Scenario in the test is quite simple:

Feature: US001_GoogleSearch
As a google public user
I want to search my blog
@web
Scenario: Type in my blogs'name in google search should return my blog url in search result page
Given I have 'home' page opened
And I have entered 'cybtamin codelife' into the text box of which id is 'gbqfq'
When I press button of which id is 'gbqfb'
Then I should be navigated to search result page with 'codelife.cybtamin.com' on it

Drop the dll to Nunit and run it.
2013-12-31 13_00_12-ClassLibrary1.dll - NUnit

If there are any issues please let me know.

CoderCharts puzzle journey – Guess number

Input:the number I guessed
Output: <,> or =

Say I first guessed number N.

  • If the N is > the number
  • then guess N/2
  • if N/2 < the numer
  • then we know the range [N/2,N]
  • Guess the new number N = (N/2+N)/2, till guess out the number

Assume the initial range of  the number is 1 and N, then the Binary Search runs in O(log(N)) time

Mozila’s looping closure example

Through some real experience in life, I thought I understand the JavaScript Closures well till I read this example.
The code snippet below is from mozila MDN


Helpful notes will appear here

E-mail: <input id="email" type="text" name="email" />

Name: <input id="name" type="text" name="name" />

Age: <input id="age" type="text" name="age" />

 

function showHelp(help) {
  document.getElementById('help').innerHTML = help;
}

function setupHelp() {
  var helpText = [
      {'id': 'email', 'help': 'Your e-mail address'},
      {'id': 'name', 'help': 'Your full name'},
      {'id': 'age', 'help': 'Your age (you must be over 16)'}
    ];

  for (var i = 0; i < helpText.length; i++) {
    var item = helpText[i];
    document.getElementById(item.id).onfocus = function() {
      showHelp(item.help);
    }
  }
}

setupHelp();

I thought the result will be “email,name,age”, but actually it will be “age,age,age”.

How to understand this example?

1.Javascript does not have block scope, but only function scope.

So in this example, defining variable in loop has no different with defining it outside of loop.

  for (var i = 0; i < helpText.length; i++) {
    var item = helpText[i];
    document.getElementById(item.id).onfocus = function() {
      showHelp(item.help);
    }
  }
//equals
  var item;
  for (var i = 0; i < helpText.length; i++) {
    item = helpText[i];
    document.getElementById(item.id).onfocus = function() {
      showHelp(item.help);
    }
  }

2.Variable scope of “item” is the function “setupHelp”

When the loop is finished,the item’s value will be the last index of array helpText.

3.Closure

a closure is the local variables for a function — kept alive after the function has returned, or
a closure is a stack-frame which is not deallocated when the function returns (as if a ‘stack-frame’ were malloc’ed instead of being on the stack!).

So when the event “onfocus” of textbox is fired, the anonymous function will be executed.Because the function can not find “item.help”‘s in its scope,it will try to find the variable outer level which is function “setupHelp”. At that time “item.help” equals last index value of helpText.

4.How to “fix” this? Passing a variable to freeze the value

 for (var i = 0; i < helpText.length; i++) {
    item = helpText[i];
    document.getElementById(item.id).onfocus = function (help) {
      return function() {
        showHelp(help);
      };
    }(item.help);
  }

Passing a variable to a function makes it considered a different ‘environment’ of sorts. The “help” inside of the function is frozen at the time the function was called. The inner closure then uses that “help”.

Plus ‘+’ symbol in URL

Today I came cross a error when I was trying to decrpt a varieble passed through URL. I thought it was due to i did not html decode the value. However after I did that, i still got the error.

The encrypt and decrypt functions are all tested and work well. Thus the only possiable reason is the varieble been changed. I compared the original value with the value get from Request.QueryString(“xxx”).

I found the ‘+’ symbol been replaced by ” “.

Let’s say, the raw value is “abcd+efg==”, then after passing it through http get, it will become “abcd ef==”.

Why?

According to this answer http://stackoverflow.com/a/1006074/407183,

  • Percent encoding in the path section of a URL is expected to be decoded, but any + characters in the path component is expected to be treated literally.
  • To be explicit: + is only a special character in the query component.

Then if I want to use “+”, I have to encode it as “%2b”.

A demo about how to generate a link properly.Reference from http://stackoverflow.com/a/5450212/407183

class Program
{
    static void Main()
    {
        var uriBuilder = new UriBuilder("https://localhost/testsite");
        var values = HttpUtility.ParseQueryString(string.Empty);
        values["key1"] = "abc def";
        values["key2"] = "abc+def";
        uriBuilder.Query = values.ToString();
        var url = uriBuilder.ToString();
        Console.WriteLine(url);
    }
}

Windows phone’s TDD framework and tools of JSON format

Recently I started working on a windows phone app in my spare time. The purpose of that it to practice TDD on a windows phone platform. IMO, it is always good to wait for a period before working on a brand new platform, or a new technology or a new methodology, new stuff do not always mean good.

My windows phone app is actually for a forum that provides a api with json format data. So the workflow is quite straight forward.

  1. send a request
  2. get the response
  3. deserialise json data
  4. render the data on screen

Framework

There are not a lot options there for a wp7 test framework. Everyone will find jeff.wilcox ‘s post about his work and other tutorial of how to use that.
Thanks to michaellperry who contribute a nuget package.
PM> Install-Package Silverlight.UnitTest

JSON tools

A JSON formatter and validator.
http://jsonformatter.curiousconcept.com

JSON POCO object generater

It is not very clever to manually generate these poco class.

http://jsonclassgenerator.codeplex.com/