TwitterFacebookGoogle

Writing integration tests for ASP .NET with Selenium 2.0 – Part 1

This is the first in a series of posts on writing integration tests for ASP .NET using the Selenium 2.0 web application testing system.

UPDATE: This post was updated on April 15, 2012 to explain how to setup and configure Selenium 2.0.

In this post, I explain what Selenium is, why use it and how to setup and configure it. In the next subsequent posts, I’ll do a code walk-thru and also share some advanced scenarios.

What is Selenium?
The best description of Selenium is probably the one mentioned on their website:

“Selenium automates browsers. That’s it. What you do with that power is entirely up to you. Primarily it is for automating web applications for testing purposes, but is certainly not limited to just that. Boring web-based administration tasks can (and should!) also be automated as well.”

Why use Selenium?
There are other integration testing web frameworks out there such as WaitN or the Lightweight Test Automation Framework for testing ASP .NET web apps. So, why use Selenium? Here are the main reasons why picked it:

  1. Selenium allows you to record test scenarios manually (by browsing to specific pages and clicking buttons, etc.) as well as programmatically (by coding up a test case). Thus the tool can be used by both developers and QA’s. You can even use a combination of recorded test scenarios and C# test cases to integration test your application.
  2. One feature that I really liked is that you can export a recorded test scenario as a C# test-case! This technique can be used to drastically speed up the Selenium learning curve since it spits out code that you can use inside C# test-case. For instance, when you’re unsure how to code up a specific scenario you can manually record it and then export it to see what the code needs to look like.
  3. The recorded scripts can be used as a tool to speed up manual testing. For example, I never manually login into the web application that I am currently implementing anymore. Instead I run a test scenario that I had previously recorded, conveniently named Login, that logs me in. No more manually typing in username/password! You can use this technique to directly land on specific pages and/or fill-in and submit forms as well. This adds up to save you boat loads of time during your manual testing.
  4. Finally, the test recorder is a small Firefox plugin and integrates real nice with Firefox.

Convinced? Awesome! Let’s move on to setting up Selenium…

Initial Setup
There are two parts to setting up Selenium:

  1. Installing the Selenium IDE: A Firefox plugin that allows you to manually record test scenarios. Find and download the Selenium IDE plugin from the Selenium Downloads section. After it downloads, fire up the Firefox browser -> Go to Add Ons from the Main Menu -> Click the Settings icon -> Select the Install Add-On From File option -> Click Install Add-On.
  2. Installing the Selenium 2.0 WebDriver for .NET: Accepts commands from your C# test cases and automates the browser. Using the NuGet Package Manager Console, run the below commands to install the Selenium packages. Make sure you select your test project as the “Default project” inside the Package Manager Console before running the commands. This way the DLLs will get added to the correct project.

    Install-Package Selenium.WebDriver
    Install-Package Selenium.Support

    Okay, at this point, we should be all set with Selenium. Verify the following:

    - You are able to record a test scenario: Fire up Firefox. On the Main Menu, under Web Developer, you should now see a Selenium IDE option. Or you can use the Ctrl+Alt+S shortcut key to bring it up. Click the record button on the top right, browse to goggle.com, and search for something. Click the record button again to stop the recording. Now try running the script by clicking the play button and see what happens. Make sure you are already on the google.com page when you click the Play button. Hopefully, it worked. If not, call me. I’ll help you out and I only charge a $150/hr. Just kidding. If it doesn’t work then try re-installing the plugin, I guess. :)

    - You are able to write and run C# integration test-cases using Selenium – This is what I go over in my next post on Selenium.

    Twitter Email Linkedin Digg Stumbleupon Subscribe

Dynamically creating input fields on tab via CoffeeScript and JQuery

Below is my very own, very first, super-clean, super-sexy CoffeeScript snippet that dynamically appends input fields as the user tabs through the current input field. The source-code is on the left. On the right you can actually play with it and see it in action!

inputId = 1;
 
jQuery -> 
  $("#fields :input").live 'keydown', (e) ->
    if isModifierKeyPressed e
      return 
 
    if e.keyCode in [9, 13]
      e.preventDefault
 
      if isLastActivity($(this).attr 'id')
	addAnotherTextInput();
 
      $(this).next().focus();
      return false
 
isModifierKeyPressed = (e) ->
  e.ctrlKey or e.altKey or e.shiftKey
 
isLastActivity = (inputFieldId) ->
  inputNumber = 
    (Number) inputFieldId.split('activity')[1]
  inputNumber == inputId
 
addAnotherTextInput = ->
  inputId++
  $("#fields").append getInputField inputId
 
getInputField = (inputId) ->
  return "<input type='text' id='activity#{inputId}' 
                 class='input-super-large' 
                 placeholder='Type something and then press tab' />"
Twitter Email Linkedin Digg Stumbleupon Subscribe

Getting WordPress URL migrations to work when all else fails!

Recently, I modified the permalinks for my blog posts from: http://nizarnoorani.com/index.php/archives/%postid% to just be: http://nizarnoorani.com/%postname% This new permalink structure will now apply to any new posts that I create. Which of course begs the question: Will the links to all my existing blog posts break?? And the answer sadly and obviously is: Yes, they will! Can we fix this unfortunate issue? Sure, we can! And there are quite a few WordPress plugins that do exactly this. A search for "Wordpress URL migration plugins" will serve up links to many such plugins. One that I particularly liked and recommend is Advanced Permalinks. If installing/activating/configuring one of these plugins fixes your problem - great! Things for me, however, weren't quite so easy. For some reason, which I still haven't been able to figure out, none of the migration plugins worked for me! Maybe its because my blog was originally hosted under Windows and then I later moved it to Linux. Or maybe I wasn't configuring the plugins correctly. Or maybe something else. I don't know. Anyways, IF you are in the same boat then here is one hacky solution to get your existing permalinks working again. Once again - Only do this IF you can't get the WP migration plugins to work! Okay, here goes:
  1. Log in to your WordPress Dashboard: http://yourwebsite.com/wp-login
  2. Set up your new permalink structure by navigating to Settings -> Permalinks. After you set up your new permalink structure, you'll notice that your existing permalinks will now be re-directed to a 404 Not Found page. Browse to one of your existing permalinks to verify that this is the the case.
  3. Okay, time to put in our little hack to get the existing permalinks working again. Open up the WordPress 404 template page inside the WordPress editor by navigating to Appearance -> Editor and clicking on the 404 Template link on the right-hand side bar.
  4. Insert the following code snippet just below the get_header() line:
    <script type='text/javascript'>
     
    <?php 
     
         // extract the post_id from the URL. In my case, my existing permalink was of the 
         // structure http://nizarnoorani.com/archives/%postid%.
         // modify the extraction code below for our particular structure as needed.
         $postId = (int)trim($_SERVER['REQUEST_URI'], '/archives/');
     
         $post = get_post($postId);
     
          if($post != null) {
             // again, modify the URL as needed to match your new permalink structure.
             echo "window.location = 'http://nizarnoorani.com/".$post->post_name."';"; 
         }  
    ?>
     
    </script>
    Note: Be sure to modify the code snippet to match your specific new and old permalink structures!
  5. Save your changes. Your existing permalinks should start working again!
Basically, what we've done here is added some logic to extract the post_id from the old link, retrieve the post with that post_id from the database, construct the new URL and then re-direct the user to the new URL. Cheers!
Twitter Email Linkedin Digg Stumbleupon Subscribe
CyberChimps