<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Nizar NooraniNizar Noorani</title>
	<atom:link href="http://nizarnoorani.com/feed" rel="self" type="application/rss+xml" />
	<link>http://nizarnoorani.com</link>
	<description>A Software Development Consultant, Mentor &#38; Enthusiast</description>
	<lastBuildDate>Sat, 09 Feb 2013 17:06:10 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.4.1</generator>
		<item>
		<title>Sublime Text 2 Shortcuts for Ruby on Rails</title>
		<link>http://nizarnoorani.com/sublime-text-2-shortcuts-for-ruby-on-rails</link>
		<comments>http://nizarnoorani.com/sublime-text-2-shortcuts-for-ruby-on-rails#comments</comments>
		<pubDate>Sat, 09 Feb 2013 17:06:10 +0000</pubDate>
		<dc:creator>Nizar</dc:creator>
				<category><![CDATA[Ruby on Rails]]></category>
		<category><![CDATA[Tips And Tricks]]></category>
		<category><![CDATA[ruby on rails]]></category>
		<category><![CDATA[shortcuts]]></category>
		<category><![CDATA[sublime text]]></category>

		<guid isPermaLink="false">http://nizarnoorani.com/?p=668</guid>
		<description><![CDATA[When it comes to full-featured text editors for RoR development, Sublime Text is hard to beat. Here are some shortcuts that add to the awesomeness of Sublime Text: Common Shortcuts Ctrl+P: Find Files Ctrl+KB: show/Hide Mini-Bar Ctrl+W: Close file. Shift+Alt+1 OR 2 OR 3: For creating/closing panels Ctrl+[ OR ]: Indent OR Un-indent Ctrl+L: Highlight-line [...]]]></description>
			<content:encoded><![CDATA[<p>When it comes to full-featured text editors for RoR development, Sublime Text is hard to beat.  Here are some shortcuts that add to the awesomeness of Sublime Text:<br />
<br/></p>
<h4>Common Shortcuts</h4>
<p>Ctrl+P: Find Files<br />
Ctrl+KB: show/Hide Mini-Bar<br />
Ctrl+W: Close file.<br />
Shift+Alt+1 OR 2 OR 3: For creating/closing panels<br />
Ctrl+[ OR ]: Indent OR Un-indent<br />
Ctrl+L: Highlight-line<br />
Ctrl+KK: Delete line<br />
Ctrl+G: Go to line<br />
<br/></p>
<h4>For Ruby Tests</h4>
<p>Clone the repo: https://github.com/maltize/sublime-text-2-ruby-tests and follow setup instructions</p>
<p>Ctrl+Shift+T: Run all tests<br />
Ctrl+Shift+R: Run a single test<br />
Ctrl+Shift+E: Run last ruby test<br />
<br/></p>
<h4>ERB commands</h4>
<p>Clone the repo: https://github.com/eddorre/SublimeERB</p>
<p>Ctrl+Shift+.: ERB Snippet<br />
Ctrl+Enter: Move to next line<br />
<br/></p>
<h4>Tab-triggers</h4>
<p>&#8220;des&#8221;+tab for describe<br />
&#8220;it&#8221;+tab for it block<br />
&#8220;before&#8221;+tab<br />
<br/><br />
Sublime Tutorial by Michael Hart:<br />

http://www.youtube.com/watch?v=05x1Jk4rT1A</p>

<p>Happy Coding!</p>
<div class="trackable_sharing"><a href="http://twitter.com/share?url=http%3A%2F%2Fnizarnoorani.com%2Fsublime-text-2-shortcuts-for-ruby-on-rails&text=Sublime+Text+2+Shortcuts+for+Ruby+on+Rails" style="text-decoration: none; white-space: nowrap;" title="Twitter" target="_blank" onclick="that=this;_gaq.push(['_trackEvent','SocialSharing','Twitter','http://nizarnoorani.com/sublime-text-2-shortcuts-for-ruby-on-rails']); _trackableshare_window = window.open(this.href,'share','menubar=0,resizable=1,width=500,height=350'); _trackableshare_window.focus(); return false;"><img align="absmiddle" src="http://nizarnoorani.com/wp-content/uploads/trackableshare//twitter.png" alt="Twitter" width="24" height="24"></a> <a href="mailto:?subject=Check out http%3A%2F%2Fnizarnoorani.com%2Fsublime-text-2-shortcuts-for-ruby-on-rails" style="text-decoration: none; white-space: nowrap;" title="Email" onclick="that=this;_gaq.push(['_trackEvent','SocialSharing','Email','http://nizarnoorani.com/sublime-text-2-shortcuts-for-ruby-on-rails']); "><img align="absmiddle" src="http://nizarnoorani.com/wp-content/uploads/trackableshare//email.png" alt="Email" width="24" height="24"></a> <a href="http://www.linkedin.com/shareArticle?mini=true&url=http%3A%2F%2Fnizarnoorani.com%2Fsublime-text-2-shortcuts-for-ruby-on-rails&title=http%3A%2F%2Fnizarnoorani.com%2Fsublime-text-2-shortcuts-for-ruby-on-rails&ro=false&summary=&source=" style="text-decoration: none; white-space: nowrap;" title="Linkedin" target="_blank" onclick="that=this;_gaq.push(['_trackEvent','SocialSharing','Linkedin','http://nizarnoorani.com/sublime-text-2-shortcuts-for-ruby-on-rails']); _trackableshare_window = window.open(this.href,'share','menubar=0,resizable=1,width=500,height=350'); _trackableshare_window.focus(); return false;"><img align="absmiddle" src="http://nizarnoorani.com/wp-content/uploads/trackableshare//linkedin.png" alt="Linkedin" width="24" height="24"></a> <a href="http://digg.com/submit?partner=addthis&url=http%3A%2F%2Fnizarnoorani.com%2Fsublime-text-2-shortcuts-for-ruby-on-rails&title=Sublime+Text+2+Shortcuts+for+Ruby+on+Rails&bodytext=" style="text-decoration: none; white-space: nowrap;" title="Digg" target="_blank" onclick="that=this;_gaq.push(['_trackEvent','SocialSharing','Digg','http://nizarnoorani.com/sublime-text-2-shortcuts-for-ruby-on-rails']); _trackableshare_window = window.open(this.href,'share','menubar=0,resizable=1,width=750,height=450'); _trackableshare_window.focus(); return false;"><img align="absmiddle" src="http://nizarnoorani.com/wp-content/uploads/trackableshare//digg.png" alt="Digg" width="24" height="24"></a> <a href="http://www.stumbleupon.com/submit?url=http%3A%2F%2Fnizarnoorani.com%2Fsublime-text-2-shortcuts-for-ruby-on-rails&title=http%3A%2F%2Fnizarnoorani.com%2Fsublime-text-2-shortcuts-for-ruby-on-rails" style="text-decoration: none; white-space: nowrap;" title="Stumbleupon" target="_blank" onclick="that=this;_gaq.push(['_trackEvent','SocialSharing','Stumbleupon','http://nizarnoorani.com/sublime-text-2-shortcuts-for-ruby-on-rails']); _trackableshare_window = window.open(this.href,'share','menubar=0,resizable=1,width=750,height=450'); _trackableshare_window.focus(); return false;"><img align="absmiddle" src="http://nizarnoorani.com/wp-content/uploads/trackableshare//stumbleupon.png" alt="Stumbleupon" width="24" height="24"></a> <a href="http://feeds.feedburner.com/NizarNoorani" style="text-decoration: none; white-space: nowrap;" title="Subscribe" target="_blank" onclick="that=this;_gaq.push(['_trackEvent','SocialSharing','Subscribe','http://nizarnoorani.com/sublime-text-2-shortcuts-for-ruby-on-rails']); _trackableshare_window = window.open(this.href,'share','menubar=0,resizable=1,width=,height='); _trackableshare_window.focus(); return false;"><img align="absmiddle" src="http://nizarnoorani.com/wp-content/uploads/trackableshare//subscribe.png" alt="Subscribe" width="24" height="24"></a> ]]></content:encoded>
			<wfw:commentRss>http://nizarnoorani.com/sublime-text-2-shortcuts-for-ruby-on-rails/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Interview Question : Following DRY</title>
		<link>http://nizarnoorani.com/interview-question-following-dry</link>
		<comments>http://nizarnoorani.com/interview-question-following-dry#comments</comments>
		<pubDate>Thu, 11 Oct 2012 13:35:02 +0000</pubDate>
		<dc:creator>Nizar</dc:creator>
				<category><![CDATA[ASP .NET]]></category>
		<category><![CDATA[Interviewing]]></category>
		<category><![CDATA[C#]]></category>
		<category><![CDATA[DRY]]></category>
		<category><![CDATA[interview questions]]></category>

		<guid isPermaLink="false">http://nizarnoorani.com/?p=648</guid>
		<description><![CDATA[I&#8217;ll be posting potential interview questions that I come up with from time to time on my blog &#8211; so that I can refer to it later and also to share them with others. Here is one I came up with today: Re-write the following code-snippet so that it complies with the DRY principle: &#160; [...]]]></description>
			<content:encoded><![CDATA[<p>I&#8217;ll be posting potential interview questions that I come up with from time to time on my blog &#8211; so that I can refer to it later and also to share them with others. Here is one I came up with today:</p>
<p>Re-write the following code-snippet so that it complies with the DRY principle:</p>

<div class="wp_syntax"><div class="code"><pre class="csharp" style="font-family:monospace;">&nbsp;
<span style="color: #0600FF; font-weight: bold;">if</span><span style="color: #008000;">&#40;</span><span style="color: #008000;">!</span>_autoenroll<span style="color: #008000;">&#41;</span>
<span style="color: #008000;">&#123;</span>
     <span style="color: #0600FF; font-weight: bold;">if</span><span style="color: #008000;">&#40;</span>displayEnrollPage <span style="color: #008000;">==</span> <span style="color: #0600FF; font-weight: bold;">true</span><span style="color: #008000;">&#41;</span>
     <span style="color: #008000;">&#123;</span>
        ltlView1<span style="color: #008000;">.</span><span style="color: #0000FF;">Text</span> <span style="color: #008000;">=</span> <span style="color: #666666;">&quot;Enroll Online - Page 1 of 4&quot;</span><span style="color: #008000;">;</span>
        ltlView2<span style="color: #008000;">.</span><span style="color: #0000FF;">Text</span> <span style="color: #008000;">=</span> <span style="color: #666666;">&quot;Enroll Online - Page 2 of 4&quot;</span><span style="color: #008000;">;</span>
        ltlView3<span style="color: #008000;">.</span><span style="color: #0000FF;">Text</span> <span style="color: #008000;">=</span> <span style="color: #666666;">&quot;Enroll Online - Page 3 of 4&quot;</span><span style="color: #008000;">;</span>
        ltlView4<span style="color: #008000;">.</span><span style="color: #0000FF;">Text</span> <span style="color: #008000;">=</span> <span style="color: #666666;">&quot;Enroll Online - Page 4 of 4&quot;</span><span style="color: #008000;">;</span>
     <span style="color: #008000;">&#125;</span>
     <span style="color: #0600FF; font-weight: bold;">else</span>
     <span style="color: #008000;">&#123;</span>
        ltlView1<span style="color: #008000;">.</span><span style="color: #0000FF;">Text</span> <span style="color: #008000;">=</span> <span style="color: #666666;">&quot;Enroll Online - Page 1 of 3&quot;</span><span style="color: #008000;">;</span>
        ltlView2<span style="color: #008000;">.</span><span style="color: #0000FF;">Text</span> <span style="color: #008000;">=</span> <span style="color: #666666;">&quot;Enroll Online - Page 2 of 3&quot;</span><span style="color: #008000;">;</span>
        ltlView3<span style="color: #008000;">.</span><span style="color: #0000FF;">Text</span> <span style="color: #008000;">=</span> <span style="color: #666666;">&quot;Enroll Online - Page 3 of 3&quot;</span><span style="color: #008000;">;</span>
&nbsp;
        <span style="color: #008080; font-style: italic;">// don't set header for the 4th page because it wont be visible.  </span>
    <span style="color: #008000;">&#125;</span>
<span style="color: #008000;">&#125;</span>
<span style="color: #0600FF; font-weight: bold;">else</span> 
<span style="color: #008000;">&#123;</span> 
     <span style="color: #0600FF; font-weight: bold;">if</span><span style="color: #008000;">&#40;</span>displayEnrollPage <span style="color: #008000;">==</span> <span style="color: #0600FF; font-weight: bold;">true</span><span style="color: #008000;">&#41;</span>
     <span style="color: #008000;">&#123;</span>
        ltlView1<span style="color: #008000;">.</span><span style="color: #0000FF;">Text</span> <span style="color: #008000;">=</span> <span style="color: #666666;">&quot;Enroll Online - Page 1 of 3&quot;</span><span style="color: #008000;">;</span>
        ltlView2<span style="color: #008000;">.</span><span style="color: #0000FF;">Text</span> <span style="color: #008000;">=</span> <span style="color: #666666;">&quot;Enroll Online - Page 2 of 3&quot;</span><span style="color: #008000;">;</span>
        ltlView4<span style="color: #008000;">.</span><span style="color: #0000FF;">Text</span> <span style="color: #008000;">=</span> <span style="color: #666666;">&quot;Enroll Online - Page 3 of 3&quot;</span><span style="color: #008000;">;</span>
     <span style="color: #008000;">&#125;</span>
     <span style="color: #0600FF; font-weight: bold;">else</span>
     <span style="color: #008000;">&#123;</span>
        ltlView1<span style="color: #008000;">.</span><span style="color: #0000FF;">Text</span> <span style="color: #008000;">=</span> <span style="color: #666666;">&quot;Enroll Online - Page 1 of 2&quot;</span><span style="color: #008000;">;</span>
        ltlView2<span style="color: #008000;">.</span><span style="color: #0000FF;">Text</span> <span style="color: #008000;">=</span> <span style="color: #666666;">&quot;Enroll Online - Page 2 of 2&quot;</span><span style="color: #008000;">;</span>
&nbsp;
       <span style="color: #008080; font-style: italic;">// don't set header for 4th page because it wont be visible.       </span>
    <span style="color: #008000;">&#125;</span>
<span style="color: #008000;">&#125;</span></pre></div></div>

<p>No, I won&#8217;t be posting the answers.  But feel free to suggest one inside the comments section!</p>
<div class="trackable_sharing"><a href="http://twitter.com/share?url=http%3A%2F%2Fnizarnoorani.com%2Finterview-question-following-dry&text=Interview+Question+%3A+Following+DRY" style="text-decoration: none; white-space: nowrap;" title="Twitter" target="_blank" onclick="that=this;_gaq.push(['_trackEvent','SocialSharing','Twitter','http://nizarnoorani.com/interview-question-following-dry']); _trackableshare_window = window.open(this.href,'share','menubar=0,resizable=1,width=500,height=350'); _trackableshare_window.focus(); return false;"><img align="absmiddle" src="http://nizarnoorani.com/wp-content/uploads/trackableshare//twitter.png" alt="Twitter" width="24" height="24"></a> <a href="mailto:?subject=Check out http%3A%2F%2Fnizarnoorani.com%2Finterview-question-following-dry" style="text-decoration: none; white-space: nowrap;" title="Email" onclick="that=this;_gaq.push(['_trackEvent','SocialSharing','Email','http://nizarnoorani.com/interview-question-following-dry']); "><img align="absmiddle" src="http://nizarnoorani.com/wp-content/uploads/trackableshare//email.png" alt="Email" width="24" height="24"></a> <a href="http://www.linkedin.com/shareArticle?mini=true&url=http%3A%2F%2Fnizarnoorani.com%2Finterview-question-following-dry&title=http%3A%2F%2Fnizarnoorani.com%2Finterview-question-following-dry&ro=false&summary=&source=" style="text-decoration: none; white-space: nowrap;" title="Linkedin" target="_blank" onclick="that=this;_gaq.push(['_trackEvent','SocialSharing','Linkedin','http://nizarnoorani.com/interview-question-following-dry']); _trackableshare_window = window.open(this.href,'share','menubar=0,resizable=1,width=500,height=350'); _trackableshare_window.focus(); return false;"><img align="absmiddle" src="http://nizarnoorani.com/wp-content/uploads/trackableshare//linkedin.png" alt="Linkedin" width="24" height="24"></a> <a href="http://digg.com/submit?partner=addthis&url=http%3A%2F%2Fnizarnoorani.com%2Finterview-question-following-dry&title=Interview+Question+%3A+Following+DRY&bodytext=" style="text-decoration: none; white-space: nowrap;" title="Digg" target="_blank" onclick="that=this;_gaq.push(['_trackEvent','SocialSharing','Digg','http://nizarnoorani.com/interview-question-following-dry']); _trackableshare_window = window.open(this.href,'share','menubar=0,resizable=1,width=750,height=450'); _trackableshare_window.focus(); return false;"><img align="absmiddle" src="http://nizarnoorani.com/wp-content/uploads/trackableshare//digg.png" alt="Digg" width="24" height="24"></a> <a href="http://www.stumbleupon.com/submit?url=http%3A%2F%2Fnizarnoorani.com%2Finterview-question-following-dry&title=http%3A%2F%2Fnizarnoorani.com%2Finterview-question-following-dry" style="text-decoration: none; white-space: nowrap;" title="Stumbleupon" target="_blank" onclick="that=this;_gaq.push(['_trackEvent','SocialSharing','Stumbleupon','http://nizarnoorani.com/interview-question-following-dry']); _trackableshare_window = window.open(this.href,'share','menubar=0,resizable=1,width=750,height=450'); _trackableshare_window.focus(); return false;"><img align="absmiddle" src="http://nizarnoorani.com/wp-content/uploads/trackableshare//stumbleupon.png" alt="Stumbleupon" width="24" height="24"></a> <a href="http://feeds.feedburner.com/NizarNoorani" style="text-decoration: none; white-space: nowrap;" title="Subscribe" target="_blank" onclick="that=this;_gaq.push(['_trackEvent','SocialSharing','Subscribe','http://nizarnoorani.com/interview-question-following-dry']); _trackableshare_window = window.open(this.href,'share','menubar=0,resizable=1,width=,height='); _trackableshare_window.focus(); return false;"><img align="absmiddle" src="http://nizarnoorani.com/wp-content/uploads/trackableshare//subscribe.png" alt="Subscribe" width="24" height="24"></a> ]]></content:encoded>
			<wfw:commentRss>http://nizarnoorani.com/interview-question-following-dry/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Recently launched web application built via Ruby On Rails</title>
		<link>http://nizarnoorani.com/recently-launched-web-application-built-via-ruby-on-rails</link>
		<comments>http://nizarnoorani.com/recently-launched-web-application-built-via-ruby-on-rails#comments</comments>
		<pubDate>Wed, 15 Aug 2012 23:28:40 +0000</pubDate>
		<dc:creator>Nizar</dc:creator>
				<category><![CDATA[Hosting]]></category>
		<category><![CDATA[Ruby on Rails]]></category>
		<category><![CDATA[activity tracker]]></category>
		<category><![CDATA[activity tracking]]></category>
		<category><![CDATA[daily goals]]></category>
		<category><![CDATA[goal tracker]]></category>
		<category><![CDATA[goal tracking]]></category>
		<category><![CDATA[ruby on rails]]></category>

		<guid isPermaLink="false">http://nizarnoorani.com/?p=623</guid>
		<description><![CDATA[Wanted to write a short blurb on a web application that I recently launched. You can visit it at: http://www.spryee.com. It&#8217;s a free and easy-to-use goal &#038; activity tracker. I created the application in Ruby on Rails 3.2 using the following additional languages/packages/tools: - CoffeeScript: For all my UI interactions and making AJAX calls - [...]]]></description>
			<content:encoded><![CDATA[<p>Wanted to write a short blurb on a web application that I recently launched.  You can visit it at: <a href="http://www.spryee.com" target="_blank">http://www.spryee.com</a>. It&#8217;s a free and easy-to-use goal &#038; activity tracker.</p>
<p>I created the application in Ruby on Rails 3.2 using the following additional languages/packages/tools:</p>
<p>- <a href="http://coffeescript.org" target="_blank">CoffeeScript</a>:  For all my UI interactions and making AJAX calls<br />
- <a href="http://twitter.github.com/bootstrap/" target="_blank">Twitter Bootstrap</a>: For my UI framework.<br />
- <a href="https://developers.google.com/chart/interactive/docs/reference" target="_blank">Google Visualization API</a>: For generating charts &#038; graphs<br />
- <a href="http://sass-lang.com/" target="_blank">SASS</a>: For all my style-sheets<br />
- <a href="http://www.w3schools.com/css/css_image_sprites.asp" target="_blank">Image Sprites</a>: For all my images<br />
- <a href="http://www.gimp.org/" target="_blank">GIMP</a>: For doing all types of image manipulation<br />
- <a href="https://github.com/mojombo/jekyll/" target="_blank">Jekyll</a>: For creating the blog<br />
- <a href="http://rspec.info/" target="_blank">RSpec</a>: For all of my unit-testing</p>
<p>In addition to this, I also used the following gems:</p>
<p>- <a href="https://github.com/binarylogic/authlogic/" target="_blank">Authlogic </a>: For user &#038; user-session management.  Takes cares of everything having to do with user creation and session management such as, password encryptions, logins, forgot password functionality, cookies, remember-me, login counts, etc.</p>
<p>- <a href="https://github.com/gazay/gon" target="_blank">GON</a>: Allows you to easily set and send JSON to and from the server to the browser and vice-versa.  Very handy! </p>
<p>- <a href="https://github.com/plataformatec/simple_form/" target="_blank">simple-form</a>: The best at form generation.  Easy to get started and very extendable.</p>
<p>- <a href="https://github.com/nesquena/rabl/" target="_blank">Rabl</a>: Let&#8217;s you define your JSON object using Ruby!  How cool is that?</p>
<p>- <a href="https://github.com/thomas-mcdonald/bootstrap-sass/" target="_blank">bootstrap_sass</a>: Bundling support for twitter bootstrap.</p>
<p>- <a href="https://github.com/mislav/will_paginate/wiki/" target="_blank">will_paginate</a>: For paginations.</p>
<p>- <a href="https://github.com/winston/google_visualr/" target="_blank">google_visular</a>: This gem provides a Ruby-based API for interacting with the Google Visualization APIs (which are js-based).  It doesn&#8217;t support AJAX-based refreshes of the charts but I was able to make it work by making a few modifications.  I&#8217;ll blog on it another day.</p>
<p>- <a href="https://rubygems.org/gems/bloggy" target="_blank">bloggy</a>: This gem creates a Jekyll blog for your existing Rails app.  I had my blog ready to go in just a few hours!</p>
<p>I deployed the web-app on <a href="http://www.heroku.com/" target="_blank">Heroku </a>because 1) it takes away virtually all of pain that&#8217;s associated with deployment and because 2) it&#8217;s completely free until you&#8217;ve got enough users to where an upgrade becomes necessary.  </p>
<p>Hope this helps someone who might be getting started with Ruby on Rails!</p>
<div class="trackable_sharing"><a href="http://twitter.com/share?url=http%3A%2F%2Fnizarnoorani.com%2Frecently-launched-web-application-built-via-ruby-on-rails&text=Recently+launched+web+application+built+via+Ruby+On+Rails" style="text-decoration: none; white-space: nowrap;" title="Twitter" target="_blank" onclick="that=this;_gaq.push(['_trackEvent','SocialSharing','Twitter','http://nizarnoorani.com/recently-launched-web-application-built-via-ruby-on-rails']); _trackableshare_window = window.open(this.href,'share','menubar=0,resizable=1,width=500,height=350'); _trackableshare_window.focus(); return false;"><img align="absmiddle" src="http://nizarnoorani.com/wp-content/uploads/trackableshare//twitter.png" alt="Twitter" width="24" height="24"></a> <a href="mailto:?subject=Check out http%3A%2F%2Fnizarnoorani.com%2Frecently-launched-web-application-built-via-ruby-on-rails" style="text-decoration: none; white-space: nowrap;" title="Email" onclick="that=this;_gaq.push(['_trackEvent','SocialSharing','Email','http://nizarnoorani.com/recently-launched-web-application-built-via-ruby-on-rails']); "><img align="absmiddle" src="http://nizarnoorani.com/wp-content/uploads/trackableshare//email.png" alt="Email" width="24" height="24"></a> <a href="http://www.linkedin.com/shareArticle?mini=true&url=http%3A%2F%2Fnizarnoorani.com%2Frecently-launched-web-application-built-via-ruby-on-rails&title=http%3A%2F%2Fnizarnoorani.com%2Frecently-launched-web-application-built-via-ruby-on-rails&ro=false&summary=&source=" style="text-decoration: none; white-space: nowrap;" title="Linkedin" target="_blank" onclick="that=this;_gaq.push(['_trackEvent','SocialSharing','Linkedin','http://nizarnoorani.com/recently-launched-web-application-built-via-ruby-on-rails']); _trackableshare_window = window.open(this.href,'share','menubar=0,resizable=1,width=500,height=350'); _trackableshare_window.focus(); return false;"><img align="absmiddle" src="http://nizarnoorani.com/wp-content/uploads/trackableshare//linkedin.png" alt="Linkedin" width="24" height="24"></a> <a href="http://digg.com/submit?partner=addthis&url=http%3A%2F%2Fnizarnoorani.com%2Frecently-launched-web-application-built-via-ruby-on-rails&title=Recently+launched+web+application+built+via+Ruby+On+Rails&bodytext=" style="text-decoration: none; white-space: nowrap;" title="Digg" target="_blank" onclick="that=this;_gaq.push(['_trackEvent','SocialSharing','Digg','http://nizarnoorani.com/recently-launched-web-application-built-via-ruby-on-rails']); _trackableshare_window = window.open(this.href,'share','menubar=0,resizable=1,width=750,height=450'); _trackableshare_window.focus(); return false;"><img align="absmiddle" src="http://nizarnoorani.com/wp-content/uploads/trackableshare//digg.png" alt="Digg" width="24" height="24"></a> <a href="http://www.stumbleupon.com/submit?url=http%3A%2F%2Fnizarnoorani.com%2Frecently-launched-web-application-built-via-ruby-on-rails&title=http%3A%2F%2Fnizarnoorani.com%2Frecently-launched-web-application-built-via-ruby-on-rails" style="text-decoration: none; white-space: nowrap;" title="Stumbleupon" target="_blank" onclick="that=this;_gaq.push(['_trackEvent','SocialSharing','Stumbleupon','http://nizarnoorani.com/recently-launched-web-application-built-via-ruby-on-rails']); _trackableshare_window = window.open(this.href,'share','menubar=0,resizable=1,width=750,height=450'); _trackableshare_window.focus(); return false;"><img align="absmiddle" src="http://nizarnoorani.com/wp-content/uploads/trackableshare//stumbleupon.png" alt="Stumbleupon" width="24" height="24"></a> <a href="http://feeds.feedburner.com/NizarNoorani" style="text-decoration: none; white-space: nowrap;" title="Subscribe" target="_blank" onclick="that=this;_gaq.push(['_trackEvent','SocialSharing','Subscribe','http://nizarnoorani.com/recently-launched-web-application-built-via-ruby-on-rails']); _trackableshare_window = window.open(this.href,'share','menubar=0,resizable=1,width=,height='); _trackableshare_window.focus(); return false;"><img align="absmiddle" src="http://nizarnoorani.com/wp-content/uploads/trackableshare//subscribe.png" alt="Subscribe" width="24" height="24"></a> ]]></content:encoded>
			<wfw:commentRss>http://nizarnoorani.com/recently-launched-web-application-built-via-ruby-on-rails/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Rendering Icons as links in ASP .NET MVC</title>
		<link>http://nizarnoorani.com/rendering-icons-as-links-in-asp-net-mvc</link>
		<comments>http://nizarnoorani.com/rendering-icons-as-links-in-asp-net-mvc#comments</comments>
		<pubDate>Thu, 26 Jul 2012 21:20:39 +0000</pubDate>
		<dc:creator>Nizar</dc:creator>
				<category><![CDATA[ASP .NET]]></category>
		<category><![CDATA[UI]]></category>
		<category><![CDATA[asp .net mvc]]></category>
		<category><![CDATA[icons]]></category>
		<category><![CDATA[icons as links]]></category>

		<guid isPermaLink="false">http://nizarnoorani.com/?p=617</guid>
		<description><![CDATA[Modifying the behaviors of HTML helper methods such as ActionLink is a pain and requires quite a bit of code. Sometimes, however, you get lucky and are able to avoid it. What follows is once such case. Here is one quick way that you can use to render an icon as a link in ASP [...]]]></description>
			<content:encoded><![CDATA[<p>Modifying the behaviors of HTML helper methods such as ActionLink is a pain and requires quite a bit of code.  Sometimes, however, you get lucky and are able to avoid it.  What follows is once such case.</p>
<p>Here is one quick way that you can use to render an icon as a link in ASP .NET MVC.  </p>
<p>First, create a CSS style for the icon:</p>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:monospace;"> .print-<span style="color: #993333;">icon</span> <span style="color: #00AA00;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">url</span><span style="color: #00AA00;">&#40;</span><span style="color: #ff0000;">&quot;/assets/print-icon.png&quot;</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span>
 <span style="color: #00AA00;">&#125;</span></pre></div></div>

<p>Next, use it when generating the link:</p>

<div class="wp_syntax"><div class="code"><pre class="csharp" style="font-family:monospace;">  @Html<span style="color: #008000;">.</span><span style="color: #0000FF;">ActionLink</span><span style="color: #008000;">&#40;</span><span style="color: #666666;">&quot; &quot;</span>, <span style="color: #666666;">&quot;Action&quot;</span>, <span style="color: #008000;">new</span> <span style="color: #008000;">&#123;</span> id <span style="color: #008000;">=</span> <span style="color: #008080; font-style: italic;">/* blah */</span> <span style="color: #008000;">&#125;</span>, <span style="color: #008000;">new</span> <span style="color: #008000;">&#123;</span> @<span style="color: #6666cc; font-weight: bold;">class</span> <span style="color: #008000;">=</span> <span style="color: #666666;">&quot;print-icon&quot;</span> <span style="color: #008000;">&#125;</span></pre></div></div>

<p>And, that does it!</p>
<p>Cheers!</p>
<div class="trackable_sharing"><a href="http://twitter.com/share?url=http%3A%2F%2Fnizarnoorani.com%2Frendering-icons-as-links-in-asp-net-mvc&text=Rendering+Icons+as+links+in+ASP+.NET+MVC" style="text-decoration: none; white-space: nowrap;" title="Twitter" target="_blank" onclick="that=this;_gaq.push(['_trackEvent','SocialSharing','Twitter','http://nizarnoorani.com/rendering-icons-as-links-in-asp-net-mvc']); _trackableshare_window = window.open(this.href,'share','menubar=0,resizable=1,width=500,height=350'); _trackableshare_window.focus(); return false;"><img align="absmiddle" src="http://nizarnoorani.com/wp-content/uploads/trackableshare//twitter.png" alt="Twitter" width="24" height="24"></a> <a href="mailto:?subject=Check out http%3A%2F%2Fnizarnoorani.com%2Frendering-icons-as-links-in-asp-net-mvc" style="text-decoration: none; white-space: nowrap;" title="Email" onclick="that=this;_gaq.push(['_trackEvent','SocialSharing','Email','http://nizarnoorani.com/rendering-icons-as-links-in-asp-net-mvc']); "><img align="absmiddle" src="http://nizarnoorani.com/wp-content/uploads/trackableshare//email.png" alt="Email" width="24" height="24"></a> <a href="http://www.linkedin.com/shareArticle?mini=true&url=http%3A%2F%2Fnizarnoorani.com%2Frendering-icons-as-links-in-asp-net-mvc&title=http%3A%2F%2Fnizarnoorani.com%2Frendering-icons-as-links-in-asp-net-mvc&ro=false&summary=&source=" style="text-decoration: none; white-space: nowrap;" title="Linkedin" target="_blank" onclick="that=this;_gaq.push(['_trackEvent','SocialSharing','Linkedin','http://nizarnoorani.com/rendering-icons-as-links-in-asp-net-mvc']); _trackableshare_window = window.open(this.href,'share','menubar=0,resizable=1,width=500,height=350'); _trackableshare_window.focus(); return false;"><img align="absmiddle" src="http://nizarnoorani.com/wp-content/uploads/trackableshare//linkedin.png" alt="Linkedin" width="24" height="24"></a> <a href="http://digg.com/submit?partner=addthis&url=http%3A%2F%2Fnizarnoorani.com%2Frendering-icons-as-links-in-asp-net-mvc&title=Rendering+Icons+as+links+in+ASP+.NET+MVC&bodytext=" style="text-decoration: none; white-space: nowrap;" title="Digg" target="_blank" onclick="that=this;_gaq.push(['_trackEvent','SocialSharing','Digg','http://nizarnoorani.com/rendering-icons-as-links-in-asp-net-mvc']); _trackableshare_window = window.open(this.href,'share','menubar=0,resizable=1,width=750,height=450'); _trackableshare_window.focus(); return false;"><img align="absmiddle" src="http://nizarnoorani.com/wp-content/uploads/trackableshare//digg.png" alt="Digg" width="24" height="24"></a> <a href="http://www.stumbleupon.com/submit?url=http%3A%2F%2Fnizarnoorani.com%2Frendering-icons-as-links-in-asp-net-mvc&title=http%3A%2F%2Fnizarnoorani.com%2Frendering-icons-as-links-in-asp-net-mvc" style="text-decoration: none; white-space: nowrap;" title="Stumbleupon" target="_blank" onclick="that=this;_gaq.push(['_trackEvent','SocialSharing','Stumbleupon','http://nizarnoorani.com/rendering-icons-as-links-in-asp-net-mvc']); _trackableshare_window = window.open(this.href,'share','menubar=0,resizable=1,width=750,height=450'); _trackableshare_window.focus(); return false;"><img align="absmiddle" src="http://nizarnoorani.com/wp-content/uploads/trackableshare//stumbleupon.png" alt="Stumbleupon" width="24" height="24"></a> <a href="http://feeds.feedburner.com/NizarNoorani" style="text-decoration: none; white-space: nowrap;" title="Subscribe" target="_blank" onclick="that=this;_gaq.push(['_trackEvent','SocialSharing','Subscribe','http://nizarnoorani.com/rendering-icons-as-links-in-asp-net-mvc']); _trackableshare_window = window.open(this.href,'share','menubar=0,resizable=1,width=,height='); _trackableshare_window.focus(); return false;"><img align="absmiddle" src="http://nizarnoorani.com/wp-content/uploads/trackableshare//subscribe.png" alt="Subscribe" width="24" height="24"></a> ]]></content:encoded>
			<wfw:commentRss>http://nizarnoorani.com/rendering-icons-as-links-in-asp-net-mvc/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Cloning an object for creation in Ruby</title>
		<link>http://nizarnoorani.com/cloning-an-object-for-creation-in-ruby</link>
		<comments>http://nizarnoorani.com/cloning-an-object-for-creation-in-ruby#comments</comments>
		<pubDate>Sun, 27 May 2012 16:19:35 +0000</pubDate>
		<dc:creator>Nizar</dc:creator>
				<category><![CDATA[Ruby on Rails]]></category>
		<category><![CDATA[clone]]></category>
		<category><![CDATA[clone vs dup]]></category>
		<category><![CDATA[dup]]></category>
		<category><![CDATA[object creation]]></category>
		<category><![CDATA[object graph]]></category>
		<category><![CDATA[persistence]]></category>

		<guid isPermaLink="false">http://nizarnoorani.com/?p=605</guid>
		<description><![CDATA[Ruby provides two methods for creating a copy of an object: clone() and dup(). Starting from Rails 3.1, the behavior of these methods has somewhat changed. In this post, I&#8217;ll point out some of the differences as they relate to record creation and also share some helpful pointers when constructing and saving a new object-graph. [...]]]></description>
			<content:encoded><![CDATA[<p>Ruby provides two methods for creating a copy of an object: clone() and dup().  Starting from Rails 3.1, the behavior of these methods has somewhat changed.  In this post, I&#8217;ll point out some of the differences as they relate to record creation and also share some helpful pointers when constructing and saving a new object-graph. </p>
<p>Let&#8217;s say we&#8217;ve got the following classes:</p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family:monospace;"><span style="color:#9966CC; font-weight:bold;">class</span> Unit
  attr_accessible <span style="color:#ff3333; font-weight:bold;">:name</span>, <span style="color:#ff3333; font-weight:bold;">:division_id</span>
  belongs_to <span style="color:#ff3333; font-weight:bold;">:division</span>
&nbsp;
  validates <span style="color:#ff3333; font-weight:bold;">:name</span>, presence :<span style="color:#0000FF; font-weight:bold;">true</span>
  validates <span style="color:#ff3333; font-weight:bold;">:division</span>, presence :<span style="color:#0000FF; font-weight:bold;">true</span>
&nbsp;
  validates_uniqueness_of <span style="color:#ff3333; font-weight:bold;">:name</span>, <span style="color:#ff3333; font-weight:bold;">:scope</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#ff3333; font-weight:bold;">:division_id</span><span style="color:#006600; font-weight:bold;">&#93;</span>, <span style="color:#ff3333; font-weight:bold;">:case_sensitive</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#0000FF; font-weight:bold;">false</span>, <span style="color:#ff3333; font-weight:bold;">:on</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#ff3333; font-weight:bold;">:create</span>	 
<span style="color:#9966CC; font-weight:bold;">end</span>
&nbsp;
<span style="color:#9966CC; font-weight:bold;">class</span> Division
  attr_accessible <span style="color:#ff3333; font-weight:bold;">:name</span>, <span style="color:#ff3333; font-weight:bold;">:user_id</span>
  belongs_to <span style="color:#ff3333; font-weight:bold;">:user</span>
&nbsp;
  validates <span style="color:#ff3333; font-weight:bold;">:name</span>, presence :<span style="color:#0000FF; font-weight:bold;">true</span>
  validates <span style="color:#ff3333; font-weight:bold;">:user</span>, presence :<span style="color:#0000FF; font-weight:bold;">true</span>
<span style="color:#9966CC; font-weight:bold;">end</span>
&nbsp;
<span style="color:#9966CC; font-weight:bold;">class</span> User
  <span style="color:#008000; font-style:italic;">#... your good 'ole user class</span>
<span style="color:#9966CC; font-weight:bold;">end</span></pre></div></div>

<h1>The Scenario</h1>
<p>What we&#8217;d like to do is create a copy of an existing unit, add it to a brand-new division that belongs to some user and then call user.save().  What we&#8217;d expect to see is that:</p>
<p>- A new division is created and associated with the user<br />
- A new unit is created and associated with the newly created division</p>
<h1>Understanding clone vs. dup</h1>
<p>Let&#8217;s first look at the major differences between clone() and dup() so we know which method to use for our specific scenario. </p>
<p>One difference is that clone() does not mark the copy as a new_record while dup() does:</p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family:monospace;">  <span style="color:#006600; font-weight:bold;">&gt;&gt;</span> u_clone = Unit.<span style="color:#9900CC;">first</span>.<span style="color:#9900CC;">clone</span>
  <span style="color:#006600; font-weight:bold;">&gt;&gt;</span> u_clone.<span style="color:#9900CC;">new_record</span>?
  <span style="color:#006600; font-weight:bold;">&gt;&gt;</span> = <span style="color:#0000FF; font-weight:bold;">false</span>
  <span style="color:#006600; font-weight:bold;">&gt;&gt;</span>
  <span style="color:#006600; font-weight:bold;">&gt;&gt;</span> u_dup = Unit.<span style="color:#9900CC;">first</span>.<span style="color:#9900CC;">dup</span>
  <span style="color:#006600; font-weight:bold;">&gt;&gt;</span> u_dup.<span style="color:#9900CC;">new_record</span>?
  <span style="color:#006600; font-weight:bold;">&gt;&gt;</span> = <span style="color:#0000FF; font-weight:bold;">true</span></pre></div></div>

<p>As a consequence, dup() blanks out the id, created_at and updated_at attributes whereas clone() does not.  </p>
<p>Another difference is that clone() copies over the contents plus the internal state and singleton methods whereas dup() only copies over the contents.</p>
<h1>Creating and persisting our object graph</h1>
<p>In our case, because we wish to create a new unit and add it to a new division, it looks like dup() is what we need.  Let&#8217;s give it a shot and see what happens:</p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family:monospace;"> <span style="color:#006600; font-weight:bold;">&gt;&gt;</span> usr = User.<span style="color:#9900CC;">first</span>
 <span style="color:#006600; font-weight:bold;">&gt;&gt;</span> d1 = usr.<span style="color:#9900CC;">divisions</span>.<span style="color:#9900CC;">build</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#123;</span> name: <span style="color:#996600;">&quot;Divison 1&quot;</span> <span style="color:#006600; font-weight:bold;">&#125;</span><span style="color:#006600; font-weight:bold;">&#41;</span>
 <span style="color:#006600; font-weight:bold;">&gt;&gt;</span> d1.<span style="color:#9900CC;">units</span> <span style="color:#006600; font-weight:bold;">&lt;&lt;</span> Unit.<span style="color:#9900CC;">first</span>.<span style="color:#9900CC;">dup</span>
 <span style="color:#006600; font-weight:bold;">&gt;&gt;</span> usr.<span style="color:#9900CC;">save</span>
 <span style="color:#006600; font-weight:bold;">&gt;&gt;</span></pre></div></div>

<p>What we are doing in the code snippet above is picking the first user, adding a new Division to the user&#8217;s divisions collection, adding a new Unit to the divison and then calling save on the user.  Think it&#8217;ll work?  Let&#8217;s look at the next line to see what transpired:</p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family:monospace;">  <span style="color:#006600; font-weight:bold;">&gt;&gt;</span> usr.<span style="color:#9900CC;">save</span>
  <span style="color:#006600; font-weight:bold;">&gt;&gt;</span> = <span style="color:#0000FF; font-weight:bold;">false</span></pre></div></div>

<p>Oops, didn&#8217;t work!  Let&#8217;s look at the error messages to see what went wrong:</p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family:monospace;">  <span style="color:#006600; font-weight:bold;">&gt;&gt;</span> usr.<span style="color:#9900CC;">save</span>
  <span style="color:#006600; font-weight:bold;">&gt;&gt;</span> = <span style="color:#0000FF; font-weight:bold;">false</span>
  <span style="color:#006600; font-weight:bold;">&gt;&gt;</span> usr.<span style="color:#9900CC;">errors</span>
  <span style="color:#006600; font-weight:bold;">&gt;&gt;</span> <span style="color:#006600; font-weight:bold;">&#91;</span>divisions: <span style="color:#996600;">'is invalid'</span><span style="color:#006600; font-weight:bold;">&#93;</span>
  <span style="color:#006600; font-weight:bold;">&gt;&gt;</span> usr.<span style="color:#9900CC;">divisions</span>.<span style="color:#9900CC;">last</span>.<span style="color:#9900CC;">errors</span>
  <span style="color:#006600; font-weight:bold;">&gt;&gt;</span> <span style="color:#006600; font-weight:bold;">&#91;</span>units: <span style="color:#996600;">'is invalid'</span><span style="color:#006600; font-weight:bold;">&#93;</span>
  <span style="color:#006600; font-weight:bold;">&gt;&gt;</span> usr.<span style="color:#9900CC;">divisions</span>.<span style="color:#9900CC;">last</span>.<span style="color:#9900CC;">units</span>.<span style="color:#9900CC;">first</span>.<span style="color:#9900CC;">errors</span>
  <span style="color:#006600; font-weight:bold;">&gt;&gt;</span> <span style="color:#006600; font-weight:bold;">&#91;</span>division: <span style="color:#996600;">&quot;can't be blank&quot;</span><span style="color:#006600; font-weight:bold;">&#93;</span></pre></div></div>

<p>Hmm&#8230;division can&#8217;t be blank!  If you scroll to the class definition of Unit, you&#8217;ll notice that we have a validation rule that enforces that division can&#8217;t be blank.  If we got rid of that validation rule then the above usr.save() would passed.  This is because Rails is smart enough to recognize that a new unit is being added to a new division and so it&#8217;ll first create the division inside the database, assign the division to unit and the create the unit inside the database.  </p>
<p>So, why doesn&#8217;t that work with the validation rule being present?  Because Rails runs validation on the entire object graph before persisting anything to the database!  Since, in our case, we are adding a new unit to a new division, unit.division is nil and hence our validation that states &#8220;Unit must have division&#8221; fails and nothing is persisted.  To make this work without removing the validation rule, what we&#8217;ll need to do is add the following additional lines:</p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family:monospace;"> <span style="color:#006600; font-weight:bold;">&gt;&gt;</span> u_dup = Unit.<span style="color:#9900CC;">first</span>.<span style="color:#9900CC;">dup</span>
 <span style="color:#006600; font-weight:bold;">&gt;&gt;</span> u_dup.<span style="color:#9900CC;">division</span> = d1</pre></div></div>

<p>Or a better approach is to override the dup() method so that it accepts division as a parameter:</p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family:monospace;"><span style="color:#9966CC; font-weight:bold;">class</span> Unit
   ...
&nbsp;
  <span style="color:#9966CC; font-weight:bold;">def</span> dup<span style="color:#006600; font-weight:bold;">&#40;</span>division<span style="color:#006600; font-weight:bold;">&#41;</span> 
    u_dup = <span style="color:#9966CC; font-weight:bold;">super</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#41;</span>
    u_dup.<span style="color:#9900CC;">division</span> = divison
    u_dup
  <span style="color:#9966CC; font-weight:bold;">end</span>	 
&nbsp;
  ...
<span style="color:#9966CC; font-weight:bold;">end</span></pre></div></div>

<p>And now the following will work successfully:</p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family:monospace;"> <span style="color:#006600; font-weight:bold;">&gt;&gt;</span> usr = User.<span style="color:#9900CC;">first</span>
 <span style="color:#006600; font-weight:bold;">&gt;&gt;</span> d1 = usr.<span style="color:#9900CC;">divisions</span>.<span style="color:#9900CC;">build</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#123;</span> name: <span style="color:#996600;">&quot;Divison 1&quot;</span> <span style="color:#006600; font-weight:bold;">&#125;</span><span style="color:#006600; font-weight:bold;">&#41;</span>
 <span style="color:#006600; font-weight:bold;">&gt;&gt;</span> d1.<span style="color:#9900CC;">units</span> <span style="color:#006600; font-weight:bold;">&lt;&lt;</span> Unit.<span style="color:#9900CC;">first</span>.<span style="color:#9900CC;">dup</span>
 <span style="color:#006600; font-weight:bold;">&gt;&gt;</span> usr.<span style="color:#9900CC;">save</span>
 <span style="color:#006600; font-weight:bold;">&gt;&gt;</span> = <span style="color:#0000FF; font-weight:bold;">true</span></pre></div></div>

<p>Hopefully, this gave you some insight into how clone() and dup() work and it&#8217;ll save you some headache the next time you need to persist an object graph!</p>
<div class="trackable_sharing"><a href="http://twitter.com/share?url=http%3A%2F%2Fnizarnoorani.com%2Fcloning-an-object-for-creation-in-ruby&text=Cloning+an+object+for+creation+in+Ruby" style="text-decoration: none; white-space: nowrap;" title="Twitter" target="_blank" onclick="that=this;_gaq.push(['_trackEvent','SocialSharing','Twitter','http://nizarnoorani.com/cloning-an-object-for-creation-in-ruby']); _trackableshare_window = window.open(this.href,'share','menubar=0,resizable=1,width=500,height=350'); _trackableshare_window.focus(); return false;"><img align="absmiddle" src="http://nizarnoorani.com/wp-content/uploads/trackableshare//twitter.png" alt="Twitter" width="24" height="24"></a> <a href="mailto:?subject=Check out http%3A%2F%2Fnizarnoorani.com%2Fcloning-an-object-for-creation-in-ruby" style="text-decoration: none; white-space: nowrap;" title="Email" onclick="that=this;_gaq.push(['_trackEvent','SocialSharing','Email','http://nizarnoorani.com/cloning-an-object-for-creation-in-ruby']); "><img align="absmiddle" src="http://nizarnoorani.com/wp-content/uploads/trackableshare//email.png" alt="Email" width="24" height="24"></a> <a href="http://www.linkedin.com/shareArticle?mini=true&url=http%3A%2F%2Fnizarnoorani.com%2Fcloning-an-object-for-creation-in-ruby&title=http%3A%2F%2Fnizarnoorani.com%2Fcloning-an-object-for-creation-in-ruby&ro=false&summary=&source=" style="text-decoration: none; white-space: nowrap;" title="Linkedin" target="_blank" onclick="that=this;_gaq.push(['_trackEvent','SocialSharing','Linkedin','http://nizarnoorani.com/cloning-an-object-for-creation-in-ruby']); _trackableshare_window = window.open(this.href,'share','menubar=0,resizable=1,width=500,height=350'); _trackableshare_window.focus(); return false;"><img align="absmiddle" src="http://nizarnoorani.com/wp-content/uploads/trackableshare//linkedin.png" alt="Linkedin" width="24" height="24"></a> <a href="http://digg.com/submit?partner=addthis&url=http%3A%2F%2Fnizarnoorani.com%2Fcloning-an-object-for-creation-in-ruby&title=Cloning+an+object+for+creation+in+Ruby&bodytext=" style="text-decoration: none; white-space: nowrap;" title="Digg" target="_blank" onclick="that=this;_gaq.push(['_trackEvent','SocialSharing','Digg','http://nizarnoorani.com/cloning-an-object-for-creation-in-ruby']); _trackableshare_window = window.open(this.href,'share','menubar=0,resizable=1,width=750,height=450'); _trackableshare_window.focus(); return false;"><img align="absmiddle" src="http://nizarnoorani.com/wp-content/uploads/trackableshare//digg.png" alt="Digg" width="24" height="24"></a> <a href="http://www.stumbleupon.com/submit?url=http%3A%2F%2Fnizarnoorani.com%2Fcloning-an-object-for-creation-in-ruby&title=http%3A%2F%2Fnizarnoorani.com%2Fcloning-an-object-for-creation-in-ruby" style="text-decoration: none; white-space: nowrap;" title="Stumbleupon" target="_blank" onclick="that=this;_gaq.push(['_trackEvent','SocialSharing','Stumbleupon','http://nizarnoorani.com/cloning-an-object-for-creation-in-ruby']); _trackableshare_window = window.open(this.href,'share','menubar=0,resizable=1,width=750,height=450'); _trackableshare_window.focus(); return false;"><img align="absmiddle" src="http://nizarnoorani.com/wp-content/uploads/trackableshare//stumbleupon.png" alt="Stumbleupon" width="24" height="24"></a> <a href="http://feeds.feedburner.com/NizarNoorani" style="text-decoration: none; white-space: nowrap;" title="Subscribe" target="_blank" onclick="that=this;_gaq.push(['_trackEvent','SocialSharing','Subscribe','http://nizarnoorani.com/cloning-an-object-for-creation-in-ruby']); _trackableshare_window = window.open(this.href,'share','menubar=0,resizable=1,width=,height='); _trackableshare_window.focus(); return false;"><img align="absmiddle" src="http://nizarnoorani.com/wp-content/uploads/trackableshare//subscribe.png" alt="Subscribe" width="24" height="24"></a> ]]></content:encoded>
			<wfw:commentRss>http://nizarnoorani.com/cloning-an-object-for-creation-in-ruby/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Bulk INSERT from within a Rake task</title>
		<link>http://nizarnoorani.com/bulk-insert-from-within-a-rake-task</link>
		<comments>http://nizarnoorani.com/bulk-insert-from-within-a-rake-task#comments</comments>
		<pubDate>Thu, 24 May 2012 14:10:10 +0000</pubDate>
		<dc:creator>Nizar</dc:creator>
				<category><![CDATA[Ruby on Rails]]></category>
		<category><![CDATA[bulk insert]]></category>
		<category><![CDATA[populate sample data]]></category>
		<category><![CDATA[rake task]]></category>
		<category><![CDATA[transaction]]></category>

		<guid isPermaLink="false">http://nizarnoorani.com/?p=600</guid>
		<description><![CDATA[Recently, I had to insert a ton of sample data into our test database to facilitate testing. My first attempt was to use the activerecord-import gem. Looks pretty promising but for some odd reason I just couldn&#8217;t get it work from inside a Rake task. It kept inserting data in sequential order instead of doing [...]]]></description>
			<content:encoded><![CDATA[<p>Recently, I had to insert a ton of sample data into our test database to facilitate testing.  My first attempt was to use the <a href="https://github.com/zdennis/activerecord-import">activerecord-import</a> gem.  Looks pretty promising but for some odd reason I just couldn&#8217;t get it work from inside a Rake task. It kept inserting data in sequential order instead of doing BULK inserts.  </p>
<p>Well, after some R&#038;D, I came across a &#8220;simpler&#8221; solution that doesn&#8217;t require the use of any additional gems.  It turns out that all I had to do was wrap all of my inserts inside one transaction.  This speeds up the inserts by a HUGE factor when compared with sequential inserts &#8211; ~200 ms vs. 1000 ms for about 10 records!  An additional benefit of this approach is that all of your model validations still run as they normally would.</p>
<p>Below is a code snippet:</p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family:monospace;"><span style="color:#9966CC; font-weight:bold;">def</span> make_users
  <span style="color:#CC0066; font-weight:bold;">puts</span> <span style="color:#996600;">&quot;Creating users...&quot;</span>
  users = <span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#006600; font-weight:bold;">&#93;</span>
  <span style="color:#006666;">10</span>.<span style="color:#9900CC;">times</span> <span style="color:#9966CC; font-weight:bold;">do</span> <span style="color:#006600; font-weight:bold;">|</span>n<span style="color:#006600; font-weight:bold;">|</span>
    users <span style="color:#006600; font-weight:bold;">&lt;&lt;</span> User.<span style="color:#9900CC;">new</span><span style="color:#006600; font-weight:bold;">&#40;</span>
      full_name: <span style="color:#996600;">&quot;User #{n}&quot;</span>, 
      email: <span style="color:#996600;">&quot;user_#{n}@test.com&quot;</span>, 
      password: <span style="color:#996600;">&quot;foobar&quot;</span>,
      password_confirmation: <span style="color:#996600;">&quot;foobar&quot;</span><span style="color:#006600; font-weight:bold;">&#41;</span>
  <span style="color:#9966CC; font-weight:bold;">end</span>
  User.<span style="color:#9900CC;">transaction</span> <span style="color:#9966CC; font-weight:bold;">do</span> 
    users.<span style="color:#9900CC;">each</span> <span style="color:#006600; font-weight:bold;">&#123;</span> <span style="color:#006600; font-weight:bold;">|</span>u<span style="color:#006600; font-weight:bold;">|</span> u.<span style="color:#9900CC;">save</span> <span style="color:#006600; font-weight:bold;">&#125;</span>
  <span style="color:#9966CC; font-weight:bold;">end</span>
  <span style="color:#CC0066; font-weight:bold;">puts</span> <span style="color:#996600;">&quot;Finished creating users.&quot;</span>
<span style="color:#9966CC; font-weight:bold;">end</span></pre></div></div>

<p>Bye bye, activerecord-import gem!  I am sticking with the transaction wrapper!</p>
<div class="trackable_sharing"><a href="http://twitter.com/share?url=http%3A%2F%2Fnizarnoorani.com%2Fbulk-insert-from-within-a-rake-task&text=Bulk+INSERT+from+within+a+Rake+task" style="text-decoration: none; white-space: nowrap;" title="Twitter" target="_blank" onclick="that=this;_gaq.push(['_trackEvent','SocialSharing','Twitter','http://nizarnoorani.com/bulk-insert-from-within-a-rake-task']); _trackableshare_window = window.open(this.href,'share','menubar=0,resizable=1,width=500,height=350'); _trackableshare_window.focus(); return false;"><img align="absmiddle" src="http://nizarnoorani.com/wp-content/uploads/trackableshare//twitter.png" alt="Twitter" width="24" height="24"></a> <a href="mailto:?subject=Check out http%3A%2F%2Fnizarnoorani.com%2Fbulk-insert-from-within-a-rake-task" style="text-decoration: none; white-space: nowrap;" title="Email" onclick="that=this;_gaq.push(['_trackEvent','SocialSharing','Email','http://nizarnoorani.com/bulk-insert-from-within-a-rake-task']); "><img align="absmiddle" src="http://nizarnoorani.com/wp-content/uploads/trackableshare//email.png" alt="Email" width="24" height="24"></a> <a href="http://www.linkedin.com/shareArticle?mini=true&url=http%3A%2F%2Fnizarnoorani.com%2Fbulk-insert-from-within-a-rake-task&title=http%3A%2F%2Fnizarnoorani.com%2Fbulk-insert-from-within-a-rake-task&ro=false&summary=&source=" style="text-decoration: none; white-space: nowrap;" title="Linkedin" target="_blank" onclick="that=this;_gaq.push(['_trackEvent','SocialSharing','Linkedin','http://nizarnoorani.com/bulk-insert-from-within-a-rake-task']); _trackableshare_window = window.open(this.href,'share','menubar=0,resizable=1,width=500,height=350'); _trackableshare_window.focus(); return false;"><img align="absmiddle" src="http://nizarnoorani.com/wp-content/uploads/trackableshare//linkedin.png" alt="Linkedin" width="24" height="24"></a> <a href="http://digg.com/submit?partner=addthis&url=http%3A%2F%2Fnizarnoorani.com%2Fbulk-insert-from-within-a-rake-task&title=Bulk+INSERT+from+within+a+Rake+task&bodytext=" style="text-decoration: none; white-space: nowrap;" title="Digg" target="_blank" onclick="that=this;_gaq.push(['_trackEvent','SocialSharing','Digg','http://nizarnoorani.com/bulk-insert-from-within-a-rake-task']); _trackableshare_window = window.open(this.href,'share','menubar=0,resizable=1,width=750,height=450'); _trackableshare_window.focus(); return false;"><img align="absmiddle" src="http://nizarnoorani.com/wp-content/uploads/trackableshare//digg.png" alt="Digg" width="24" height="24"></a> <a href="http://www.stumbleupon.com/submit?url=http%3A%2F%2Fnizarnoorani.com%2Fbulk-insert-from-within-a-rake-task&title=http%3A%2F%2Fnizarnoorani.com%2Fbulk-insert-from-within-a-rake-task" style="text-decoration: none; white-space: nowrap;" title="Stumbleupon" target="_blank" onclick="that=this;_gaq.push(['_trackEvent','SocialSharing','Stumbleupon','http://nizarnoorani.com/bulk-insert-from-within-a-rake-task']); _trackableshare_window = window.open(this.href,'share','menubar=0,resizable=1,width=750,height=450'); _trackableshare_window.focus(); return false;"><img align="absmiddle" src="http://nizarnoorani.com/wp-content/uploads/trackableshare//stumbleupon.png" alt="Stumbleupon" width="24" height="24"></a> <a href="http://feeds.feedburner.com/NizarNoorani" style="text-decoration: none; white-space: nowrap;" title="Subscribe" target="_blank" onclick="that=this;_gaq.push(['_trackEvent','SocialSharing','Subscribe','http://nizarnoorani.com/bulk-insert-from-within-a-rake-task']); _trackableshare_window = window.open(this.href,'share','menubar=0,resizable=1,width=,height='); _trackableshare_window.focus(); return false;"><img align="absmiddle" src="http://nizarnoorani.com/wp-content/uploads/trackableshare//subscribe.png" alt="Subscribe" width="24" height="24"></a> ]]></content:encoded>
			<wfw:commentRss>http://nizarnoorani.com/bulk-insert-from-within-a-rake-task/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Show/hide various sections of a page using JQuery and CSS</title>
		<link>http://nizarnoorani.com/showhide-various-sections-of-a-page-using-jquery-and-css</link>
		<comments>http://nizarnoorani.com/showhide-various-sections-of-a-page-using-jquery-and-css#comments</comments>
		<pubDate>Fri, 04 May 2012 15:51:40 +0000</pubDate>
		<dc:creator>Nizar</dc:creator>
				<category><![CDATA[CodeProject]]></category>
		<category><![CDATA[UI]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[show hide div]]></category>
		<category><![CDATA[show/hide sections]]></category>
		<category><![CDATA[toggle visibility]]></category>

		<guid isPermaLink="false">http://nizarnoorani.com/?p=579</guid>
		<description><![CDATA[In this post I&#8217;ll go over how you can utilize JQuery and CSS classes to show/hide various parts across the different sections of a page without creating a mess! The Challenge You&#8217;ve got a wizard-like page with multiple steps and you want to be able to show/hide various elements based upon the current step. Below [...]]]></description>
			<content:encoded><![CDATA[<p>In this post I&#8217;ll go over how you can utilize JQuery and CSS classes to show/hide various parts across the different sections of a page <i>without</i> creating a mess!</p>
<p><strong>The Challenge</strong><br />
You&#8217;ve got a wizard-like page with multiple steps and you want to be able to show/hide various elements based upon the current step.  Below is a dumbed-down example:</p>
<p><img alt="" src="http://nizarnoorani.com/wp-content/uploads/sections.png" title="Page Sections" class="alignnone" width="1100" height="560" /></p>
<p>The colored boxes represent the parts that are being shared across the various sections of the page. For instance, the green box is being shared by the &#8216;Image Selection&#8217; and &#8216;Order Confirmation&#8217; sections.  While the red box is being shared by all three sections.</p>
<p>So the challenge is: How do we show/hide these various parts across the sections of the page without making a mess?  And by mess, I refer to duplicate code and/or little <% if..then %> snippets scattered throughout the page.</p>
<p><strong>The Solution</strong><br />
By using some CSS/JQuery trickery, of course!  What we&#8217;ll do is introduce some CSS classes that we will then apply to the various parts for which we need to handle visibility.  Here are the classes that we will need:</p>
<ul>
<li>section &#8211; Represents a section</li>
<li>requestor &#8211; Represents the requestor section</li>
<li>image-selection &#8211; Represents the image selection section</li>
<li>confirmation &#8211; Represents the order confirmation section</li>
</ul>
<p>The CSS classes will then be applied to the various parts based upon the section inside which the part is to be shown:</p>

<div class="wp_syntax"><div class="code"><pre class="html" style="font-family:monospace;">&lt;div&gt;
  &lt;input type='hidden' id='section-to-show' /&gt;
  &lt;table&gt;
    &lt;tr&gt;
      &lt;td&gt;Request Type:&lt;/td&gt;
      &lt;td class='section requestor'&gt;
        &lt;select&gt;...&lt;/select&gt;
      &lt;/td&gt;
      &lt;td class='section image-selection confirmation'&gt;
        &lt;%= selectedRequestType %&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
    ...
    &lt;tr&gt;
      &lt;td&gt;First Name:&lt;/td&gt;
      &lt;td&gt;&lt;%= firstName %&gt;&lt;/td&gt;
    &lt;/tr&gt; 
    &lt;tr&gt;
      &lt;td&gt;Last Name:&lt;/td&gt;
      &lt;td&gt;&lt;%= lastName %&gt;&lt;/td&gt;
    &lt;/tr&gt; 
    &lt;tr class='section requestor confirmation'&gt;
      &lt;td&gt;Email&lt;/td&gt;
      &lt;td&gt;&lt;%= email %&gt;&lt;/td&gt; 
    &lt;/tr&gt;
    ...
    ...
    &lt;tr class='section image-selection confirmation'&gt;
      &lt;td&gt;Image&lt;/td&gt;
      &lt;td class='section image-selection'&gt;
        Browse...
      &lt;/td&gt;
      &lt;td class='section confirmation'&gt;
        &lt;img src='..' /&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
    ...
  &lt;/table&gt;
&lt;/div&gt;</pre></div></div>

<p>A few things to highlight:</p>
<p> &#8211; The hidden input field &#8216;section-to-show&#8217; indicates the section to display.  It&#8217;s value is set by the server-side code.<br />
 &#8211; There are two table columns inside the first table row.  Only one will be visible based up the section that is being displayed.<br />
 &#8211; The first name and last name table rows don&#8217;t have any classes applied to them.  This is because they are always visible.<br />
 &#8211; The last table row shown above gives an example of how you can make the visibility conditional for both the table row and the table column.<br />
 &#8211; I skipped various rows in the HTML form above to save some typing and to avoid being repetitive.</p>
<p>And now for the JQuery:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">  $<span style="color: #009900;">&#40;</span>document<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">ready</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
&nbsp;
    <span style="color: #006600; font-style: italic;">// hide all sections to begin with</span>
    $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.section'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">hide</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
    current_section <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#section-to-show'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;.&quot;</span> <span style="color: #339933;">+</span> current_section<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">show</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>And there you have it &#8211; a cleaner alternative to showing and hiding various parts across the sections of a page!</p>
<div class="trackable_sharing"><a href="http://twitter.com/share?url=http%3A%2F%2Fnizarnoorani.com%2Fshowhide-various-sections-of-a-page-using-jquery-and-css&text=Show%2Fhide+various+sections+of+a+page+using+JQuery+and+CSS" style="text-decoration: none; white-space: nowrap;" title="Twitter" target="_blank" onclick="that=this;_gaq.push(['_trackEvent','SocialSharing','Twitter','http://nizarnoorani.com/showhide-various-sections-of-a-page-using-jquery-and-css']); _trackableshare_window = window.open(this.href,'share','menubar=0,resizable=1,width=500,height=350'); _trackableshare_window.focus(); return false;"><img align="absmiddle" src="http://nizarnoorani.com/wp-content/uploads/trackableshare//twitter.png" alt="Twitter" width="24" height="24"></a> <a href="mailto:?subject=Check out http%3A%2F%2Fnizarnoorani.com%2Fshowhide-various-sections-of-a-page-using-jquery-and-css" style="text-decoration: none; white-space: nowrap;" title="Email" onclick="that=this;_gaq.push(['_trackEvent','SocialSharing','Email','http://nizarnoorani.com/showhide-various-sections-of-a-page-using-jquery-and-css']); "><img align="absmiddle" src="http://nizarnoorani.com/wp-content/uploads/trackableshare//email.png" alt="Email" width="24" height="24"></a> <a href="http://www.linkedin.com/shareArticle?mini=true&url=http%3A%2F%2Fnizarnoorani.com%2Fshowhide-various-sections-of-a-page-using-jquery-and-css&title=http%3A%2F%2Fnizarnoorani.com%2Fshowhide-various-sections-of-a-page-using-jquery-and-css&ro=false&summary=&source=" style="text-decoration: none; white-space: nowrap;" title="Linkedin" target="_blank" onclick="that=this;_gaq.push(['_trackEvent','SocialSharing','Linkedin','http://nizarnoorani.com/showhide-various-sections-of-a-page-using-jquery-and-css']); _trackableshare_window = window.open(this.href,'share','menubar=0,resizable=1,width=500,height=350'); _trackableshare_window.focus(); return false;"><img align="absmiddle" src="http://nizarnoorani.com/wp-content/uploads/trackableshare//linkedin.png" alt="Linkedin" width="24" height="24"></a> <a href="http://digg.com/submit?partner=addthis&url=http%3A%2F%2Fnizarnoorani.com%2Fshowhide-various-sections-of-a-page-using-jquery-and-css&title=Show%2Fhide+various+sections+of+a+page+using+JQuery+and+CSS&bodytext=" style="text-decoration: none; white-space: nowrap;" title="Digg" target="_blank" onclick="that=this;_gaq.push(['_trackEvent','SocialSharing','Digg','http://nizarnoorani.com/showhide-various-sections-of-a-page-using-jquery-and-css']); _trackableshare_window = window.open(this.href,'share','menubar=0,resizable=1,width=750,height=450'); _trackableshare_window.focus(); return false;"><img align="absmiddle" src="http://nizarnoorani.com/wp-content/uploads/trackableshare//digg.png" alt="Digg" width="24" height="24"></a> <a href="http://www.stumbleupon.com/submit?url=http%3A%2F%2Fnizarnoorani.com%2Fshowhide-various-sections-of-a-page-using-jquery-and-css&title=http%3A%2F%2Fnizarnoorani.com%2Fshowhide-various-sections-of-a-page-using-jquery-and-css" style="text-decoration: none; white-space: nowrap;" title="Stumbleupon" target="_blank" onclick="that=this;_gaq.push(['_trackEvent','SocialSharing','Stumbleupon','http://nizarnoorani.com/showhide-various-sections-of-a-page-using-jquery-and-css']); _trackableshare_window = window.open(this.href,'share','menubar=0,resizable=1,width=750,height=450'); _trackableshare_window.focus(); return false;"><img align="absmiddle" src="http://nizarnoorani.com/wp-content/uploads/trackableshare//stumbleupon.png" alt="Stumbleupon" width="24" height="24"></a> <a href="http://feeds.feedburner.com/NizarNoorani" style="text-decoration: none; white-space: nowrap;" title="Subscribe" target="_blank" onclick="that=this;_gaq.push(['_trackEvent','SocialSharing','Subscribe','http://nizarnoorani.com/showhide-various-sections-of-a-page-using-jquery-and-css']); _trackableshare_window = window.open(this.href,'share','menubar=0,resizable=1,width=,height='); _trackableshare_window.focus(); return false;"><img align="absmiddle" src="http://nizarnoorani.com/wp-content/uploads/trackableshare//subscribe.png" alt="Subscribe" width="24" height="24"></a> ]]></content:encoded>
			<wfw:commentRss>http://nizarnoorani.com/showhide-various-sections-of-a-page-using-jquery-and-css/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Writing Integration Tests for ASP .NET with Selenium 2.0 &#8211; Part 2</title>
		<link>http://nizarnoorani.com/writing-integration-tests-for-asp-net-with-selenium-2-0-part-2</link>
		<comments>http://nizarnoorani.com/writing-integration-tests-for-asp-net-with-selenium-2-0-part-2#comments</comments>
		<pubDate>Mon, 16 Apr 2012 20:45:45 +0000</pubDate>
		<dc:creator>Nizar</dc:creator>
				<category><![CDATA[ASP .NET]]></category>
		<category><![CDATA[CodeProject]]></category>
		<category><![CDATA[Integration Tests]]></category>
		<category><![CDATA[Testing]]></category>
		<category><![CDATA[integration testing]]></category>
		<category><![CDATA[integration tests]]></category>
		<category><![CDATA[re-use driver]]></category>
		<category><![CDATA[re-use login]]></category>
		<category><![CDATA[selenium]]></category>
		<category><![CDATA[selenuim 2.0]]></category>
		<category><![CDATA[speeding up tests]]></category>

		<guid isPermaLink="false">http://nizarnoorani.com/?p=551</guid>
		<description><![CDATA[This is the second in a series of posts on writing integration tests for ASP .NET using the Selenium 2.0 web application testing system. In this post, I&#8217;ll go over how to write and run C# test-cases using Selenium 2.0. I&#8217;ve also provided a base-class that contains helper methods for repetitive stuff like typing inside [...]]]></description>
			<content:encoded><![CDATA[<p>This is the second in a <a href="http://nizarnoorani.com/tag/selenium">series</a> of posts on writing integration tests for ASP .NET using the Selenium 2.0 web application testing system.</p>
<p>In this post, I&#8217;ll go over how to write and run C# test-cases using Selenium 2.0.  I&#8217;ve also provided a base-class that contains helper methods for repetitive stuff like typing inside input fields.   The base-class also speeds up the tests by re-using the same driver and preserving logins across tests.</p>
<p><b>Getting ready to write your first test-case&#8230;</b><br />
Make sure your test project references the following assemblies:</p>
<p>- WebDriver.dll<br />
- WebDriver.Support.dll<br />
- Newtonsoft.Json.dll<br />
- Ionic.Zip.dll<br />
- Castle.Core.dll</p>
<p>Refer back to my <a href="http://nizarnoorani.com/writing-integration-tests-for-asp-net-with-selenium-part-1">first</a> post on Selenium to learn about how to configure Selenium and where to grab these DLLs from.</p>
<p><b>Your first test-case</b><br />
For the purposes of writing our test case, we will assume that we have a web application that allows a user to login, fill out a form and submit it.  Below are basic HTML elements that we care about:</p>
<p><b>Login.aspx</b></p>

<div class="wp_syntax"><div class="code"><pre class="html" style="font-family:monospace;">  &lt;input type=&quot;text&quot; id=&quot;userId&quot; /&gt;
  &lt;input type=&quot;password&quot; id=&quot;password&quot; /&gt;
  &lt;input type=&quot;submit&quot; id=&quot;btnLogin&quot; value=&quot;Log In&quot; /&gt;</pre></div></div>

<p><b>FillForm.aspx</b></p>

<div class="wp_syntax"><div class="code"><pre class="html" style="font-family:monospace;">  &lt;input type=&quot;text&quot; id=&quot;firstName&quot; /&gt;
  &lt;input type=&quot;text&quot; id=&quot;lastName&quot; /&gt;
  &lt;input type=&quot;text&quot; id=&quot;address1&quot; /&gt;
  &lt;input type=&quot;text&quot; id=&quot;city&quot; /&gt;
  &lt;input type=&quot;text&quot; id=&quot;state&quot; /&gt;
  &lt;input type=&quot;submit&quot; name=&quot;btnSubmit&quot; value=&quot;Submit&quot; /&gt;</pre></div></div>

<p>Here is what our test-class would look like:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">using System<span style="color: #339933;">;</span>
using Microsoft.<span style="color: #660066;">VisualStudio</span>.<span style="color: #660066;">TestTools</span>.<span style="color: #660066;">UnitTesting</span><span style="color: #339933;">;</span>
using OpenQA.<span style="color: #660066;">Selenium</span><span style="color: #339933;">;</span>
using OpenQA.<span style="color: #660066;">Selenium</span>.<span style="color: #660066;">Firefox</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">namespace</span> Web.<span style="color: #660066;">UI</span>.<span style="color: #660066;">Tests</span>
<span style="color: #009900;">&#123;</span>
    <span style="color: #009900;">&#91;</span>TestClass<span style="color: #009900;">&#93;</span>
    <span style="color: #003366; font-weight: bold;">public</span> <span style="color: #003366; font-weight: bold;">class</span> FillFormIntegrationTest
    <span style="color: #009900;">&#123;</span>
        <span style="color: #003366; font-weight: bold;">public</span> static string BaseUrl <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;http://localhost:8080&quot;</span><span style="color: #339933;">;</span>
&nbsp;
        <span style="color: #006600; font-style: italic;">// the max. time to wait before timing out.</span>
        <span style="color: #003366; font-weight: bold;">public</span> <span style="color: #003366; font-weight: bold;">const</span> int TimeOut <span style="color: #339933;">=</span> <span style="color: #CC0000;">30</span><span style="color: #339933;">;</span>
&nbsp;
        <span style="color: #009900;">&#91;</span>TestMethod<span style="color: #009900;">&#93;</span>
        <span style="color: #003366; font-weight: bold;">public</span> <span style="color: #000066; font-weight: bold;">void</span> CanFillAndSubmitFormAfterLogin<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            <span style="color: #003366; font-weight: bold;">var</span> driver <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> FirefoxDriver<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
            <span style="color: #006600; font-style: italic;">// we need to setup implicit wait times so that selenium waits for some time and </span>
            <span style="color: #006600; font-style: italic;">// re-checks if an element isn't found.</span>
            <span style="color: #006600; font-style: italic;">// This is useful to ensure that a page gets fully loaded before selenium tries to look for stuff.</span>
            driver.<span style="color: #660066;">Manage</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">Timeouts</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">ImplicitlyWait</span><span style="color: #009900;">&#40;</span>TimeSpan.<span style="color: #660066;">FromSeconds</span><span style="color: #009900;">&#40;</span>TimeOut<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
            driver.<span style="color: #000066;">Navigate</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">GoToUrl</span><span style="color: #009900;">&#40;</span>BaseUrl <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;/Login.aspx&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
            driver.<span style="color: #660066;">FindElement</span><span style="color: #009900;">&#40;</span>By.<span style="color: #660066;">Id</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;userId&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">SendKeys</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;testUser&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            driver.<span style="color: #660066;">FindElement</span><span style="color: #009900;">&#40;</span>By.<span style="color: #660066;">Id</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;password&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">SendKeys</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;foobar&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
            driver.<span style="color: #660066;">FindElement</span><span style="color: #009900;">&#40;</span>By.<span style="color: #660066;">Id</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;btnLogin&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">Click</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
            Assert.<span style="color: #660066;">AreEqual</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Fill out form&quot;</span><span style="color: #339933;">,</span> driver.<span style="color: #660066;">Title</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
            driver.<span style="color: #660066;">FindElement</span><span style="color: #009900;">&#40;</span>By.<span style="color: #660066;">Id</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;firstName&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">SendKeys</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;User&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            driver.<span style="color: #660066;">FindElement</span><span style="color: #009900;">&#40;</span>By.<span style="color: #660066;">Id</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;lastName&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">SendKeys</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;One&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            driver.<span style="color: #660066;">FindElement</span><span style="color: #009900;">&#40;</span>By.<span style="color: #660066;">Id</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;address1&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">SendKeys</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;99 Test Street&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            driver.<span style="color: #660066;">FindElement</span><span style="color: #009900;">&#40;</span>By.<span style="color: #660066;">Id</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;city&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">SendKeys</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Test City&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            driver.<span style="color: #660066;">FindElement</span><span style="color: #009900;">&#40;</span>By.<span style="color: #660066;">Id</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;state&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">SendKeys</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;TX&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
            driver.<span style="color: #660066;">FindElement</span><span style="color: #009900;">&#40;</span>By.<span style="color: #660066;">Id</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;btnSubmit&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">Click</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
            Assert.<span style="color: #660066;">IsTrue</span><span style="color: #009900;">&#40;</span>driver.<span style="color: #660066;">FindElement</span><span style="color: #009900;">&#40;</span>By.<span style="color: #660066;">CssSelector</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;confirm-label&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">Text</span>.
                   <span style="color: #660066;">Contains</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Submission successful.&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
    <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>And there it is!  If you run this test case, you&#8217;ll see the Firefox browser come up and go through actions specified in the test case above.</p>
<p><b>Saving our fingers and speeding up our tests!</b><br />
If you happen to find the Selenium API a little verbose then you&#8217;re not alone.  I feel the same way.  Having to type &#8216;driver.FindElement(By.Name(&#8220;firstName&#8221;))&#8217; for every single action starts getting tedious pretty quick &#8211; even with IntelliSense!  The other issue that you&#8217;ll notice as soon as you have more than one test-case is that starting up the FirefoxDriver takes a bit of time.  What we really want is a way to create the driver once and then simply re-use it across all our tests.  Another pain point are logins.  For most apps, a great majority of tests will require that a user be logged in.  Furthermore, you&#8217;re likely re-use the same login across most of your test-cases.  Instead of having each of our tests log the user in every single time, why not skip the login process if the user is already logged in?  Both these changes will make a significant impact in speeding up our tests.  So let&#8217;s add them!  </p>
<p>Below is a base-level class that contains the improvements pointed out above and also provides some helper methods to give our fingers a break!</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">&nbsp;
    <span style="color: #003366; font-weight: bold;">public</span> <span style="color: #003366; font-weight: bold;">class</span> BaseIntegrationTest
    <span style="color: #009900;">&#123;</span>
        <span style="color: #003366; font-weight: bold;">public</span> <span style="color: #003366; font-weight: bold;">const</span> string BaseUrl <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;http://localhost:8888&quot;</span><span style="color: #339933;">;</span>
&nbsp;
        <span style="color: #006600; font-style: italic;">// specify if our web-app uses a virtual path   </span>
        <span style="color: #003366; font-weight: bold;">private</span> <span style="color: #003366; font-weight: bold;">const</span> string VirtualPath <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;&quot;</span><span style="color: #339933;">;</span>
&nbsp;
        <span style="color: #003366; font-weight: bold;">private</span> <span style="color: #003366; font-weight: bold;">const</span> int TimeOut <span style="color: #339933;">=</span> <span style="color: #CC0000;">30</span><span style="color: #339933;">;</span>
        <span style="color: #003366; font-weight: bold;">private</span> static int _testClassesRunning<span style="color: #339933;">;</span>
&nbsp;
        <span style="color: #003366; font-weight: bold;">private</span> static readonly IWebDriver StaticDriver <span style="color: #339933;">=</span> CreateDriverInstance<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #003366; font-weight: bold;">private</span> static Login _currentlyLoggedInAs<span style="color: #339933;">;</span>
&nbsp;
        static BaseIntegrationTest<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            StaticDriver.<span style="color: #660066;">Manage</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">Timeouts</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">ImplicitlyWait</span><span style="color: #009900;">&#40;</span>
               TimeSpan.<span style="color: #660066;">FromSeconds</span><span style="color: #009900;">&#40;</span>TimeOut<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
        <span style="color: #006600; font-style: italic;">// Pass in null if want to run your test-case without logging in.</span>
        <span style="color: #003366; font-weight: bold;">public</span> static <span style="color: #000066; font-weight: bold;">void</span> ClassInitialize<span style="color: #009900;">&#40;</span>Login login <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">null</span><span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            _testClassesRunning<span style="color: #339933;">++;</span>
            <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>login <span style="color: #339933;">==</span> <span style="color: #003366; font-weight: bold;">null</span><span style="color: #009900;">&#41;</span>
            <span style="color: #009900;">&#123;</span>
                Logoff<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            <span style="color: #009900;">&#125;</span>
            <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span>IsCurrentlyLoggedInAs<span style="color: #009900;">&#40;</span>login<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>
            <span style="color: #009900;">&#123;</span>
                Logon<span style="color: #009900;">&#40;</span>login<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            <span style="color: #009900;">&#125;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
        <span style="color: #003366; font-weight: bold;">public</span> static <span style="color: #000066; font-weight: bold;">void</span> ClassCleanup<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            <span style="color: #000066; font-weight: bold;">try</span>
            <span style="color: #009900;">&#123;</span>
                _testClassesRunning<span style="color: #339933;">--;</span>
                <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>_testClassesRunning <span style="color: #339933;">==</span> <span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span>
                <span style="color: #009900;">&#123;</span>
                    StaticDriver.<span style="color: #660066;">Quit</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                <span style="color: #009900;">&#125;</span>
            <span style="color: #009900;">&#125;</span>
            <span style="color: #000066; font-weight: bold;">catch</span> <span style="color: #009900;">&#40;</span>Exception<span style="color: #009900;">&#41;</span>
            <span style="color: #009900;">&#123;</span>
                <span style="color: #006600; font-style: italic;">// Ignore errors if unable to close the browser</span>
            <span style="color: #009900;">&#125;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
        <span style="color: #003366; font-weight: bold;">public</span> IWebDriver Driver
        <span style="color: #009900;">&#123;</span>
            get <span style="color: #009900;">&#123;</span> <span style="color: #000066; font-weight: bold;">return</span> StaticDriver<span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
        <span style="color: #003366; font-weight: bold;">public</span> <span style="color: #000066; font-weight: bold;">void</span> <span style="color: #000066;">Open</span><span style="color: #009900;">&#40;</span>string url<span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            Driver.<span style="color: #000066;">Navigate</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">GoToUrl</span><span style="color: #009900;">&#40;</span>BaseUrl <span style="color: #339933;">+</span> VirtualPath <span style="color: #339933;">+</span> url.<span style="color: #660066;">Trim</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'~'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
        <span style="color: #003366; font-weight: bold;">public</span> <span style="color: #000066; font-weight: bold;">void</span> Click<span style="color: #009900;">&#40;</span>string id<span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            Click<span style="color: #009900;">&#40;</span>By.<span style="color: #660066;">Id</span><span style="color: #009900;">&#40;</span>id<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
        <span style="color: #003366; font-weight: bold;">public</span> <span style="color: #000066; font-weight: bold;">void</span> Click<span style="color: #009900;">&#40;</span>By locator<span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            Driver.<span style="color: #660066;">FindElement</span><span style="color: #009900;">&#40;</span>locator<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">Click</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
        <span style="color: #003366; font-weight: bold;">public</span> <span style="color: #000066; font-weight: bold;">void</span> ClickAndWait<span style="color: #009900;">&#40;</span>string id<span style="color: #339933;">,</span> string newUrl<span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            ClickAndWait<span style="color: #009900;">&#40;</span>By.<span style="color: #660066;">Id</span><span style="color: #009900;">&#40;</span>id<span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> newUrl<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> 
        <span style="color: #009900;">&#125;</span>
&nbsp;
        <span style="color: #006600; font-style: italic;">/// &lt;summary&gt;</span>
        <span style="color: #006600; font-style: italic;">/// Use when you are navigating via a hyper-link and need for the page to fully load before </span>
        <span style="color: #006600; font-style: italic;">/// moving further.  </span>
        <span style="color: #006600; font-style: italic;">/// &lt;/summary&gt;</span>
        <span style="color: #003366; font-weight: bold;">public</span> <span style="color: #000066; font-weight: bold;">void</span> ClickAndWait<span style="color: #009900;">&#40;</span>By locator<span style="color: #339933;">,</span> string newUrl<span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            Driver.<span style="color: #660066;">FindElement</span><span style="color: #009900;">&#40;</span>locator<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">Click</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            WebDriverWait wait <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> WebDriverWait<span style="color: #009900;">&#40;</span>Driver<span style="color: #339933;">,</span> 
                  TimeSpan.<span style="color: #660066;">FromSeconds</span><span style="color: #009900;">&#40;</span>TimeOut<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            wait.<span style="color: #660066;">Until</span><span style="color: #009900;">&#40;</span>d <span style="color: #339933;">=&gt;</span> d.<span style="color: #660066;">Url</span>.<span style="color: #660066;">Contains</span><span style="color: #009900;">&#40;</span>newUrl.<span style="color: #660066;">Trim</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'~'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
        <span style="color: #003366; font-weight: bold;">public</span> <span style="color: #000066; font-weight: bold;">void</span> AssertCurrentPage<span style="color: #009900;">&#40;</span>string pageUrl<span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            <span style="color: #003366; font-weight: bold;">var</span> absoluteUrl <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Uri<span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">new</span> Uri<span style="color: #009900;">&#40;</span>BaseUrl<span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> VirtualPath <span style="color: #339933;">+</span> 
                   pageUrl.<span style="color: #660066;">Trim</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'~'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">ToString</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>    
            Assert.<span style="color: #660066;">AreEqual</span><span style="color: #009900;">&#40;</span>absoluteUrl<span style="color: #339933;">,</span> Driver.<span style="color: #660066;">Url</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
        <span style="color: #003366; font-weight: bold;">public</span> <span style="color: #000066; font-weight: bold;">void</span> AssertTextContains<span style="color: #009900;">&#40;</span>string id<span style="color: #339933;">,</span> string text<span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            AssertTextContains<span style="color: #009900;">&#40;</span>By.<span style="color: #660066;">Id</span><span style="color: #009900;">&#40;</span>id<span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> text<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
        <span style="color: #003366; font-weight: bold;">public</span> <span style="color: #000066; font-weight: bold;">void</span> AssertTextContains<span style="color: #009900;">&#40;</span>By locator<span style="color: #339933;">,</span> string text<span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            Assert.<span style="color: #660066;">IsTrue</span><span style="color: #009900;">&#40;</span>Driver.<span style="color: #660066;">FindElement</span><span style="color: #009900;">&#40;</span>locator<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">Text</span>.<span style="color: #660066;">Contains</span><span style="color: #009900;">&#40;</span>text<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
        <span style="color: #003366; font-weight: bold;">public</span> <span style="color: #000066; font-weight: bold;">void</span> AssertTextEquals<span style="color: #009900;">&#40;</span>string id<span style="color: #339933;">,</span> string text<span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            AssertTextEquals<span style="color: #009900;">&#40;</span>By.<span style="color: #660066;">Id</span><span style="color: #009900;">&#40;</span>id<span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> text<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
        <span style="color: #003366; font-weight: bold;">public</span> <span style="color: #000066; font-weight: bold;">void</span> AssertTextEquals<span style="color: #009900;">&#40;</span>By locator<span style="color: #339933;">,</span> string text<span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            Assert.<span style="color: #660066;">AreEqual</span><span style="color: #009900;">&#40;</span>text<span style="color: #339933;">,</span> Driver.<span style="color: #660066;">FindElement</span><span style="color: #009900;">&#40;</span>locator<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">Text</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
        <span style="color: #003366; font-weight: bold;">public</span> <span style="color: #000066; font-weight: bold;">void</span> AssertValueContains<span style="color: #009900;">&#40;</span>string id<span style="color: #339933;">,</span> string text<span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            AssertValueContains<span style="color: #009900;">&#40;</span>By.<span style="color: #660066;">Id</span><span style="color: #009900;">&#40;</span>id<span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> text<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
        <span style="color: #003366; font-weight: bold;">public</span> <span style="color: #000066; font-weight: bold;">void</span> AssertValueContains<span style="color: #009900;">&#40;</span>By locator<span style="color: #339933;">,</span> string text<span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            Assert.<span style="color: #660066;">IsTrue</span><span style="color: #009900;">&#40;</span>GetValue<span style="color: #009900;">&#40;</span>locator<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">Contains</span><span style="color: #009900;">&#40;</span>text<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
        <span style="color: #003366; font-weight: bold;">public</span> <span style="color: #000066; font-weight: bold;">void</span> AssertValueEquals<span style="color: #009900;">&#40;</span>string id<span style="color: #339933;">,</span> string text<span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            AssertValueEquals<span style="color: #009900;">&#40;</span>By.<span style="color: #660066;">Id</span><span style="color: #009900;">&#40;</span>id<span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> text<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
        <span style="color: #003366; font-weight: bold;">public</span> <span style="color: #000066; font-weight: bold;">void</span> AssertValueEquals<span style="color: #009900;">&#40;</span>By locator<span style="color: #339933;">,</span> string text<span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            Assert.<span style="color: #660066;">AreEqual</span><span style="color: #009900;">&#40;</span>text<span style="color: #339933;">,</span> GetValue<span style="color: #009900;">&#40;</span>locator<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
        <span style="color: #003366; font-weight: bold;">public</span> IWebElement GetElement<span style="color: #009900;">&#40;</span>string id<span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            <span style="color: #000066; font-weight: bold;">return</span> Driver.<span style="color: #660066;">FindElement</span><span style="color: #009900;">&#40;</span>By.<span style="color: #660066;">Id</span><span style="color: #009900;">&#40;</span>id<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
        <span style="color: #003366; font-weight: bold;">public</span> string GetValue<span style="color: #009900;">&#40;</span>By locator<span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            <span style="color: #000066; font-weight: bold;">return</span> Driver.<span style="color: #660066;">FindElement</span><span style="color: #009900;">&#40;</span>locator<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">GetAttribute</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;value&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
        <span style="color: #003366; font-weight: bold;">public</span> string GetText<span style="color: #009900;">&#40;</span>By locator<span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            <span style="color: #000066; font-weight: bold;">return</span> Driver.<span style="color: #660066;">FindElement</span><span style="color: #009900;">&#40;</span>locator<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">Text</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
        <span style="color: #003366; font-weight: bold;">public</span> <span style="color: #000066; font-weight: bold;">void</span> Type<span style="color: #009900;">&#40;</span>string id<span style="color: #339933;">,</span> string text<span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            <span style="color: #003366; font-weight: bold;">var</span> element <span style="color: #339933;">=</span> GetElement<span style="color: #009900;">&#40;</span>id<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            element.<span style="color: #660066;">Clear</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            element.<span style="color: #660066;">SendKeys</span><span style="color: #009900;">&#40;</span>text<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
        <span style="color: #003366; font-weight: bold;">public</span> <span style="color: #000066; font-weight: bold;">void</span> Uncheck<span style="color: #009900;">&#40;</span>string id<span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            Uncheck<span style="color: #009900;">&#40;</span>By.<span style="color: #660066;">Id</span><span style="color: #009900;">&#40;</span>id<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
        <span style="color: #003366; font-weight: bold;">public</span> <span style="color: #000066; font-weight: bold;">void</span> Uncheck<span style="color: #009900;">&#40;</span>By locator<span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            <span style="color: #003366; font-weight: bold;">var</span> element <span style="color: #339933;">=</span> Driver.<span style="color: #660066;">FindElement</span><span style="color: #009900;">&#40;</span>locator<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>element.<span style="color: #660066;">Selected</span><span style="color: #009900;">&#41;</span>
                element.<span style="color: #660066;">Click</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
        <span style="color: #006600; font-style: italic;">// Selects an element from a drop-down list.</span>
        <span style="color: #003366; font-weight: bold;">public</span> <span style="color: #000066; font-weight: bold;">void</span> Select<span style="color: #009900;">&#40;</span>string id<span style="color: #339933;">,</span> string valueToBeSelected<span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            <span style="color: #003366; font-weight: bold;">var</span> options <span style="color: #339933;">=</span> GetElement<span style="color: #009900;">&#40;</span>id<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">FindElements</span><span style="color: #009900;">&#40;</span>By.<span style="color: #660066;">TagName</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;option&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            foreach <span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> option <span style="color: #000066; font-weight: bold;">in</span> options<span style="color: #009900;">&#41;</span>
            <span style="color: #009900;">&#123;</span>
                <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>valueToBeSelected <span style="color: #339933;">==</span> option.<span style="color: #660066;">Text</span><span style="color: #009900;">&#41;</span>
                    option.<span style="color: #660066;">Click</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            <span style="color: #009900;">&#125;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
        <span style="color: #003366; font-weight: bold;">private</span> static IWebDriver CreateDriverInstance<span style="color: #009900;">&#40;</span>string baseUrl <span style="color: #339933;">=</span> BaseUrl<span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">new</span> FirefoxDriver<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>       
&nbsp;
        <span style="color: #003366; font-weight: bold;">private</span> static bool IsCurrentlyLoggedInAs<span style="color: #009900;">&#40;</span>Login login<span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            <span style="color: #000066; font-weight: bold;">return</span> _currentlyLoggedInAs <span style="color: #339933;">!=</span> <span style="color: #003366; font-weight: bold;">null</span> <span style="color: #339933;">&amp;&amp;</span> 
                   _currentlyLoggedInAs.<span style="color: #660066;">Equals</span><span style="color: #009900;">&#40;</span>login<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
        <span style="color: #003366; font-weight: bold;">private</span> static <span style="color: #000066; font-weight: bold;">void</span> Logon<span style="color: #009900;">&#40;</span>Login login<span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            StaticDriver.<span style="color: #000066;">Navigate</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">GoToUrl</span><span style="color: #009900;">&#40;</span>BaseUrl <span style="color: #339933;">+</span> VirtualPath <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;/Logon.aspx&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
            StaticDriver.<span style="color: #660066;">FindElement</span><span style="color: #009900;">&#40;</span>By.<span style="color: #660066;">Id</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;userId&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">SendKeys</span><span style="color: #009900;">&#40;</span>login.<span style="color: #660066;">Username</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            StaticDriver.<span style="color: #660066;">FindElement</span><span style="color: #009900;">&#40;</span>By.<span style="color: #660066;">Id</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;password&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">SendKeys</span><span style="color: #009900;">&#40;</span>login.<span style="color: #660066;">Password</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            StaticDriver.<span style="color: #660066;">FindElement</span><span style="color: #009900;">&#40;</span>By.<span style="color: #660066;">Id</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;btnLogin&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">Click</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
            _currentlyLoggedInAs <span style="color: #339933;">=</span> login<span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
        <span style="color: #003366; font-weight: bold;">private</span> static <span style="color: #000066; font-weight: bold;">void</span> Logoff<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            StaticDriver.<span style="color: #000066;">Navigate</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">GoToUrl</span><span style="color: #009900;">&#40;</span>
                VirtualPath <span style="color: #339933;">+</span> RedirectLinks.<span style="color: #660066;">SignOff</span>.<span style="color: #660066;">Trim</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'~'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            _currentlyLoggedInAs <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">null</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
    <span style="color: #009900;">&#125;</span>
&nbsp;
    <span style="color: #003366; font-weight: bold;">public</span> <span style="color: #003366; font-weight: bold;">class</span> Login
    <span style="color: #009900;">&#123;</span>
        <span style="color: #003366; font-weight: bold;">public</span> Login<span style="color: #009900;">&#40;</span>string username<span style="color: #339933;">,</span> string password<span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            Username <span style="color: #339933;">=</span> username<span style="color: #339933;">;</span>
            Password <span style="color: #339933;">=</span> password<span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
        <span style="color: #003366; font-weight: bold;">public</span> string Username <span style="color: #009900;">&#123;</span> get<span style="color: #339933;">;</span> <span style="color: #003366; font-weight: bold;">private</span> set<span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span>
&nbsp;
        <span style="color: #003366; font-weight: bold;">public</span> string Password <span style="color: #009900;">&#123;</span> get<span style="color: #339933;">;</span> <span style="color: #003366; font-weight: bold;">private</span> set<span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span>
&nbsp;
        <span style="color: #003366; font-weight: bold;">public</span> override bool Equals<span style="color: #009900;">&#40;</span>object obj<span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            Login compareTo <span style="color: #339933;">=</span> obj <span style="color: #000066; font-weight: bold;">as</span> Login<span style="color: #339933;">;</span>
            <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>compareTo <span style="color: #339933;">==</span> <span style="color: #003366; font-weight: bold;">null</span><span style="color: #009900;">&#41;</span>
                <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
&nbsp;
            <span style="color: #000066; font-weight: bold;">return</span> compareTo.<span style="color: #660066;">Username</span> <span style="color: #339933;">==</span> Username <span style="color: #339933;">&amp;&amp;</span> 
                   compareTo.<span style="color: #660066;">Password</span> <span style="color: #339933;">==</span> Password<span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
    <span style="color: #009900;">&#125;</span>
&nbsp;
    <span style="color: #003366; font-weight: bold;">public</span> <span style="color: #003366; font-weight: bold;">class</span> Logins
    <span style="color: #009900;">&#123;</span>
        <span style="color: #003366; font-weight: bold;">public</span> static Login UserOne
        <span style="color: #009900;">&#123;</span>
            get
            <span style="color: #009900;">&#123;</span>
                <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">new</span> Login<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;user_1&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;foobar1&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            <span style="color: #009900;">&#125;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
        <span style="color: #003366; font-weight: bold;">public</span> static Login UserTwo
        <span style="color: #009900;">&#123;</span>
            get
            <span style="color: #009900;">&#123;</span>
                <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">new</span> Login<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;user_2&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;foobar2&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            <span style="color: #009900;">&#125;</span>
        <span style="color: #009900;">&#125;</span>
    <span style="color: #009900;">&#125;</span></pre></div></div>

<p>Upon inheriting from BaseIntegrationTest class, our test-case will look like the following:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">using System<span style="color: #339933;">;</span>
using Microsoft.<span style="color: #660066;">VisualStudio</span>.<span style="color: #660066;">TestTools</span>.<span style="color: #660066;">UnitTesting</span><span style="color: #339933;">;</span>
using OpenQA.<span style="color: #660066;">Selenium</span><span style="color: #339933;">;</span>
using OpenQA.<span style="color: #660066;">Selenium</span>.<span style="color: #660066;">Firefox</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">namespace</span> Web.<span style="color: #660066;">UI</span>.<span style="color: #660066;">Tests</span>
<span style="color: #009900;">&#123;</span>
    <span style="color: #009900;">&#91;</span>TestClass<span style="color: #009900;">&#93;</span>
    <span style="color: #003366; font-weight: bold;">public</span> <span style="color: #003366; font-weight: bold;">class</span> FillFormIntegrationTest <span style="color: #339933;">:</span> BaseIntegrationTest
    <span style="color: #009900;">&#123;</span>
        <span style="color: #009900;">&#91;</span>ClassInitialize<span style="color: #009900;">&#93;</span>
        <span style="color: #003366; font-weight: bold;">public</span> static <span style="color: #000066; font-weight: bold;">void</span> ClassInitialize<span style="color: #009900;">&#40;</span>TestContext context<span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
           ClassInitialize<span style="color: #009900;">&#40;</span>Logins.<span style="color: #660066;">UserOne</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
        <span style="color: #009900;">&#91;</span>ClassCleanup<span style="color: #009900;">&#93;</span>
        <span style="color: #003366; font-weight: bold;">public</span> static <span style="color: #000066; font-weight: bold;">void</span> ClassCleanup<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            BaseIntegrationTest.<span style="color: #660066;">ClassCleanup</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
        <span style="color: #009900;">&#91;</span>TestMethod<span style="color: #009900;">&#93;</span>
        <span style="color: #003366; font-weight: bold;">public</span> <span style="color: #000066; font-weight: bold;">void</span> CanFillAndSubmitFormAfterLogin<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            <span style="color: #000066;">Open</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;~/FillOutForm.aspx&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> 
&nbsp;
            Assert.<span style="color: #660066;">AreEqual</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Fill out form&quot;</span><span style="color: #339933;">,</span> driver.<span style="color: #660066;">Title</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
            Type<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;firstName&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;User&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            Type<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;lastName&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;One&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            Type<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;address1&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;99 Test Street&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            Type<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;city&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;Test City&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            Type<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;state&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;TX&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
            Click<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;btnSubmit&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
            AssertTextContains<span style="color: #009900;">&#40;</span>By.<span style="color: #660066;">CssSelector</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;confirm-label&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;Submission successful.&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> 
        <span style="color: #009900;">&#125;</span>
    <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>Much better, don&#8217;t you think? <img src='http://nizarnoorani.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p>In my next and final post on Selenium, I&#8217;ll go over the use of cookies to simulate and test various scenarios when integrating with 3rd party software.</p>
<p>Cheers! </p>
<div class="trackable_sharing"><a href="http://twitter.com/share?url=http%3A%2F%2Fnizarnoorani.com%2Fwriting-integration-tests-for-asp-net-with-selenium-2-0-part-2&text=Writing+Integration+Tests+for+ASP+.NET+with+Selenium+2.0+%26%238211%3B+Part+2" style="text-decoration: none; white-space: nowrap;" title="Twitter" target="_blank" onclick="that=this;_gaq.push(['_trackEvent','SocialSharing','Twitter','http://nizarnoorani.com/writing-integration-tests-for-asp-net-with-selenium-2-0-part-2']); _trackableshare_window = window.open(this.href,'share','menubar=0,resizable=1,width=500,height=350'); _trackableshare_window.focus(); return false;"><img align="absmiddle" src="http://nizarnoorani.com/wp-content/uploads/trackableshare//twitter.png" alt="Twitter" width="24" height="24"></a> <a href="mailto:?subject=Check out http%3A%2F%2Fnizarnoorani.com%2Fwriting-integration-tests-for-asp-net-with-selenium-2-0-part-2" style="text-decoration: none; white-space: nowrap;" title="Email" onclick="that=this;_gaq.push(['_trackEvent','SocialSharing','Email','http://nizarnoorani.com/writing-integration-tests-for-asp-net-with-selenium-2-0-part-2']); "><img align="absmiddle" src="http://nizarnoorani.com/wp-content/uploads/trackableshare//email.png" alt="Email" width="24" height="24"></a> <a href="http://www.linkedin.com/shareArticle?mini=true&url=http%3A%2F%2Fnizarnoorani.com%2Fwriting-integration-tests-for-asp-net-with-selenium-2-0-part-2&title=http%3A%2F%2Fnizarnoorani.com%2Fwriting-integration-tests-for-asp-net-with-selenium-2-0-part-2&ro=false&summary=&source=" style="text-decoration: none; white-space: nowrap;" title="Linkedin" target="_blank" onclick="that=this;_gaq.push(['_trackEvent','SocialSharing','Linkedin','http://nizarnoorani.com/writing-integration-tests-for-asp-net-with-selenium-2-0-part-2']); _trackableshare_window = window.open(this.href,'share','menubar=0,resizable=1,width=500,height=350'); _trackableshare_window.focus(); return false;"><img align="absmiddle" src="http://nizarnoorani.com/wp-content/uploads/trackableshare//linkedin.png" alt="Linkedin" width="24" height="24"></a> <a href="http://digg.com/submit?partner=addthis&url=http%3A%2F%2Fnizarnoorani.com%2Fwriting-integration-tests-for-asp-net-with-selenium-2-0-part-2&title=Writing+Integration+Tests+for+ASP+.NET+with+Selenium+2.0+%26%238211%3B+Part+2&bodytext=" style="text-decoration: none; white-space: nowrap;" title="Digg" target="_blank" onclick="that=this;_gaq.push(['_trackEvent','SocialSharing','Digg','http://nizarnoorani.com/writing-integration-tests-for-asp-net-with-selenium-2-0-part-2']); _trackableshare_window = window.open(this.href,'share','menubar=0,resizable=1,width=750,height=450'); _trackableshare_window.focus(); return false;"><img align="absmiddle" src="http://nizarnoorani.com/wp-content/uploads/trackableshare//digg.png" alt="Digg" width="24" height="24"></a> <a href="http://www.stumbleupon.com/submit?url=http%3A%2F%2Fnizarnoorani.com%2Fwriting-integration-tests-for-asp-net-with-selenium-2-0-part-2&title=http%3A%2F%2Fnizarnoorani.com%2Fwriting-integration-tests-for-asp-net-with-selenium-2-0-part-2" style="text-decoration: none; white-space: nowrap;" title="Stumbleupon" target="_blank" onclick="that=this;_gaq.push(['_trackEvent','SocialSharing','Stumbleupon','http://nizarnoorani.com/writing-integration-tests-for-asp-net-with-selenium-2-0-part-2']); _trackableshare_window = window.open(this.href,'share','menubar=0,resizable=1,width=750,height=450'); _trackableshare_window.focus(); return false;"><img align="absmiddle" src="http://nizarnoorani.com/wp-content/uploads/trackableshare//stumbleupon.png" alt="Stumbleupon" width="24" height="24"></a> <a href="http://feeds.feedburner.com/NizarNoorani" style="text-decoration: none; white-space: nowrap;" title="Subscribe" target="_blank" onclick="that=this;_gaq.push(['_trackEvent','SocialSharing','Subscribe','http://nizarnoorani.com/writing-integration-tests-for-asp-net-with-selenium-2-0-part-2']); _trackableshare_window = window.open(this.href,'share','menubar=0,resizable=1,width=,height='); _trackableshare_window.focus(); return false;"><img align="absmiddle" src="http://nizarnoorani.com/wp-content/uploads/trackableshare//subscribe.png" alt="Subscribe" width="24" height="24"></a> ]]></content:encoded>
			<wfw:commentRss>http://nizarnoorani.com/writing-integration-tests-for-asp-net-with-selenium-2-0-part-2/feed</wfw:commentRss>
		<slash:comments>11</slash:comments>
		</item>
		<item>
		<title>Writing integration tests for ASP .NET with Selenium 2.0 &#8211; Part 1</title>
		<link>http://nizarnoorani.com/writing-integration-tests-for-asp-net-with-selenium-part-1</link>
		<comments>http://nizarnoorani.com/writing-integration-tests-for-asp-net-with-selenium-part-1#comments</comments>
		<pubDate>Wed, 11 Apr 2012 21:03:28 +0000</pubDate>
		<dc:creator>Nizar</dc:creator>
				<category><![CDATA[CodeProject]]></category>
		<category><![CDATA[Integration Tests]]></category>
		<category><![CDATA[Testing]]></category>
		<category><![CDATA[ASP .NET]]></category>
		<category><![CDATA[integration tests]]></category>
		<category><![CDATA[selenium]]></category>
		<category><![CDATA[selenuim 2.0]]></category>
		<category><![CDATA[Unit Tests]]></category>

		<guid isPermaLink="false">http://nizarnoorani.com/?p=519</guid>
		<description><![CDATA[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 [...]]]></description>
			<content:encoded><![CDATA[<p>This is the first in a <a href="http://nizarnoorani.com/tag/selenium">series</a> of posts on writing integration tests for ASP .NET using the Selenium 2.0 web application testing system.</p>
<p><b>UPDATE</b>: This post was updated on April 15, 2012 to explain how to setup and configure Selenium 2.0. </p>
<p>In this post, I explain what Selenium is, why use it and how to setup and configure it.  In the next subsequent posts, I&#8217;ll do a code walk-thru and also share some advanced scenarios.</p>
<p><strong>What is Selenium?</strong><br />
The best description of Selenium is probably the one mentioned on their website:
<p>&#8220;Selenium automates browsers. That&#8217;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.&#8221;</p>
<p><strong>Why use Selenium?</strong><br />
There are other integration testing web frameworks out there such as <a href="http://watin.org/">WaitN </a> or the <a href="http://ltaf.codeplex.com/">Lightweight Test Automation Framework</a> for testing ASP .NET web apps.  So, why use Selenium?  Here are the main reasons why picked it:</p>
<ol>
<li>
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&#8217;s.  You can even use a combination of recorded test scenarios and C# test cases to integration test your application.
</li>
<li>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&#8217;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.
</li>
<li>
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.
</li>
<li>
Finally, the test recorder is a small Firefox plugin and integrates real nice with Firefox.
</li>
</ol>
<p>Convinced?  Awesome!  Let&#8217;s move on to setting up Selenium&#8230;</p>
<p><strong>Initial Setup</strong><br />
There are two parts to setting up Selenium:</p>
<ol>
<li>Installing the Selenium IDE: A Firefox plugin that allows you to manually record test scenarios.  Find and download the Selenium IDE plugin from the <a href="http://seleniumhq.org/download/">Selenium Downloads</a> 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.
</li>
<li>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 &#8220;Default project&#8221; inside the Package Manager Console before running the commands.  This way the DLLs will get added to the correct project.<br />
</p>

<div class="wp_syntax"><div class="code"><pre class="bat" style="font-family:monospace;">Install-Package Selenium.WebDriver
Install-Package Selenium.Support</pre></div></div>

<p>Okay, at this point, we should be all set with Selenium.  Verify the following:</p>
<p>- 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&#8217;ll help you out and I only charge a $150/hr.  Just kidding.  If it doesn&#8217;t work then try re-installing the plugin, I guess. <img src='http://nizarnoorani.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p>- You are able to write and run C# integration test-cases using Selenium &#8211; This is what I go over in my <a href="http://nizarnoorani.com/writing-integration-tests-for-asp-net-with-selenium-2-0-part-2">next post</a> on Selenium.</p>
<div class="trackable_sharing"><a href="http://twitter.com/share?url=http%3A%2F%2Fnizarnoorani.com%2Fwriting-integration-tests-for-asp-net-with-selenium-part-1&text=Writing+integration+tests+for+ASP+.NET+with+Selenium+2.0+%26%238211%3B+Part+1" style="text-decoration: none; white-space: nowrap;" title="Twitter" target="_blank" onclick="that=this;_gaq.push(['_trackEvent','SocialSharing','Twitter','http://nizarnoorani.com/writing-integration-tests-for-asp-net-with-selenium-part-1']); _trackableshare_window = window.open(this.href,'share','menubar=0,resizable=1,width=500,height=350'); _trackableshare_window.focus(); return false;"><img align="absmiddle" src="http://nizarnoorani.com/wp-content/uploads/trackableshare//twitter.png" alt="Twitter" width="24" height="24"></a> <a href="mailto:?subject=Check out http%3A%2F%2Fnizarnoorani.com%2Fwriting-integration-tests-for-asp-net-with-selenium-part-1" style="text-decoration: none; white-space: nowrap;" title="Email" onclick="that=this;_gaq.push(['_trackEvent','SocialSharing','Email','http://nizarnoorani.com/writing-integration-tests-for-asp-net-with-selenium-part-1']); "><img align="absmiddle" src="http://nizarnoorani.com/wp-content/uploads/trackableshare//email.png" alt="Email" width="24" height="24"></a> <a href="http://www.linkedin.com/shareArticle?mini=true&url=http%3A%2F%2Fnizarnoorani.com%2Fwriting-integration-tests-for-asp-net-with-selenium-part-1&title=http%3A%2F%2Fnizarnoorani.com%2Fwriting-integration-tests-for-asp-net-with-selenium-part-1&ro=false&summary=&source=" style="text-decoration: none; white-space: nowrap;" title="Linkedin" target="_blank" onclick="that=this;_gaq.push(['_trackEvent','SocialSharing','Linkedin','http://nizarnoorani.com/writing-integration-tests-for-asp-net-with-selenium-part-1']); _trackableshare_window = window.open(this.href,'share','menubar=0,resizable=1,width=500,height=350'); _trackableshare_window.focus(); return false;"><img align="absmiddle" src="http://nizarnoorani.com/wp-content/uploads/trackableshare//linkedin.png" alt="Linkedin" width="24" height="24"></a> <a href="http://digg.com/submit?partner=addthis&url=http%3A%2F%2Fnizarnoorani.com%2Fwriting-integration-tests-for-asp-net-with-selenium-part-1&title=Writing+integration+tests+for+ASP+.NET+with+Selenium+2.0+%26%238211%3B+Part+1&bodytext=" style="text-decoration: none; white-space: nowrap;" title="Digg" target="_blank" onclick="that=this;_gaq.push(['_trackEvent','SocialSharing','Digg','http://nizarnoorani.com/writing-integration-tests-for-asp-net-with-selenium-part-1']); _trackableshare_window = window.open(this.href,'share','menubar=0,resizable=1,width=750,height=450'); _trackableshare_window.focus(); return false;"><img align="absmiddle" src="http://nizarnoorani.com/wp-content/uploads/trackableshare//digg.png" alt="Digg" width="24" height="24"></a> <a href="http://www.stumbleupon.com/submit?url=http%3A%2F%2Fnizarnoorani.com%2Fwriting-integration-tests-for-asp-net-with-selenium-part-1&title=http%3A%2F%2Fnizarnoorani.com%2Fwriting-integration-tests-for-asp-net-with-selenium-part-1" style="text-decoration: none; white-space: nowrap;" title="Stumbleupon" target="_blank" onclick="that=this;_gaq.push(['_trackEvent','SocialSharing','Stumbleupon','http://nizarnoorani.com/writing-integration-tests-for-asp-net-with-selenium-part-1']); _trackableshare_window = window.open(this.href,'share','menubar=0,resizable=1,width=750,height=450'); _trackableshare_window.focus(); return false;"><img align="absmiddle" src="http://nizarnoorani.com/wp-content/uploads/trackableshare//stumbleupon.png" alt="Stumbleupon" width="24" height="24"></a> <a href="http://feeds.feedburner.com/NizarNoorani" style="text-decoration: none; white-space: nowrap;" title="Subscribe" target="_blank" onclick="that=this;_gaq.push(['_trackEvent','SocialSharing','Subscribe','http://nizarnoorani.com/writing-integration-tests-for-asp-net-with-selenium-part-1']); _trackableshare_window = window.open(this.href,'share','menubar=0,resizable=1,width=,height='); _trackableshare_window.focus(); return false;"><img align="absmiddle" src="http://nizarnoorani.com/wp-content/uploads/trackableshare//subscribe.png" alt="Subscribe" width="24" height="24"></a> ]]></content:encoded>
			<wfw:commentRss>http://nizarnoorani.com/writing-integration-tests-for-asp-net-with-selenium-part-1/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Dynamically creating input fields on tab via CoffeeScript and JQuery</title>
		<link>http://nizarnoorani.com/dynamically-creating-input-fields-on-tab-via-coffeescript-and-jquery</link>
		<comments>http://nizarnoorani.com/dynamically-creating-input-fields-on-tab-via-coffeescript-and-jquery#comments</comments>
		<pubDate>Tue, 10 Apr 2012 13:02:15 +0000</pubDate>
		<dc:creator>Nizar</dc:creator>
				<category><![CDATA[CodeProject]]></category>
		<category><![CDATA[JQuery]]></category>
		<category><![CDATA[UI]]></category>
		<category><![CDATA[coffeescript]]></category>
		<category><![CDATA[dynamic input field]]></category>
		<category><![CDATA[dynamic jquery]]></category>
		<category><![CDATA[jquery]]></category>

		<guid isPermaLink="false">http://nizarnoorani.com/?p=475</guid>
		<description><![CDATA[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; &#160; jQuery -&#62; $&#40;&#34;#fields :input&#34;&#41;.live 'keydown', &#40;e&#41; [...]]]></description>
			<content:encoded><![CDATA[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!
<div style="clear: both"><br /></div>
<div style="float: left;">


<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">inputId <span style="color: #339933;">=</span> <span style="color: #CC0000;">1</span><span style="color: #339933;">;</span>
&nbsp;
jQuery <span style="color: #339933;">-&gt;</span> 
  $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#fields :input&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">live</span> <span style="color: #3366CC;">'keydown'</span><span style="color: #339933;">,</span> <span style="color: #009900;">&#40;</span>e<span style="color: #009900;">&#41;</span> <span style="color: #339933;">-&gt;</span>
    <span style="color: #000066; font-weight: bold;">if</span> isModifierKeyPressed e
      <span style="color: #000066; font-weight: bold;">return</span> 
&nbsp;
    <span style="color: #000066; font-weight: bold;">if</span> e.<span style="color: #660066;">keyCode</span> <span style="color: #000066; font-weight: bold;">in</span> <span style="color: #009900;">&#91;</span><span style="color: #CC0000;">9</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">13</span><span style="color: #009900;">&#93;</span>
      e.<span style="color: #660066;">preventDefault</span>
&nbsp;
      <span style="color: #000066; font-weight: bold;">if</span> isLastActivity<span style="color: #009900;">&#40;</span>$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">attr</span> <span style="color: #3366CC;">'id'</span><span style="color: #009900;">&#41;</span>
	addAnotherTextInput<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
      $<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">next</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #000066;">focus</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
      <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span>
&nbsp;
isModifierKeyPressed <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span>e<span style="color: #009900;">&#41;</span> <span style="color: #339933;">-&gt;</span>
  e.<span style="color: #660066;">ctrlKey</span> or e.<span style="color: #660066;">altKey</span> or e.<span style="color: #660066;">shiftKey</span>
&nbsp;
isLastActivity <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span>inputFieldId<span style="color: #009900;">&#41;</span> <span style="color: #339933;">-&gt;</span>
  inputNumber <span style="color: #339933;">=</span> 
    <span style="color: #009900;">&#40;</span>Number<span style="color: #009900;">&#41;</span> inputFieldId.<span style="color: #660066;">split</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'activity'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span>
  inputNumber <span style="color: #339933;">==</span> inputId
&nbsp;
addAnotherTextInput <span style="color: #339933;">=</span> <span style="color: #339933;">-&gt;</span>
  inputId<span style="color: #339933;">++</span>
  $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#fields&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">append</span> getInputField inputId
&nbsp;
getInputField <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span>inputId<span style="color: #009900;">&#41;</span> <span style="color: #339933;">-&gt;</span>
  <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #3366CC;">&quot;&lt;input type='text' id='activity#{inputId}' 
                 class='input-super-large' 
                 placeholder='Type something and then press tab' /&gt;&quot;</span></pre></div></div>



</div>
<div id="fields" style="float: right;">
<input id="activity1" class="input-super-large" type="text" placeholder="Type something and then press tab" />
</div>
<div style="clear: both;"></div>


<style type="text/css">
  .input-super-large { width: 250px; height: 30px; font-weight: 1.2em; display: block; }
</style>
<script type="text/javascript">
  var addAnotherTextInput, getInputField, inputId, isLastActivity, isModifierKeyPressed;

inputId = 1;
  jQuery(document).ready(function() {
    jQuery("#fields :input").live('keydown', function(e) {
      if (isModifierKeyPressed(e)) return;
      if (e.keyCode === 9 || e.keyCode === 13) {
        e.preventDefault();
        if (isLastActivity(jQuery(this).attr('id'))) addAnotherTextInput();
        jQuery(this).next().focus();
        return false;
      }
    });
  });

  isModifierKeyPressed = function(e) {
    return e.ctrlKey || e.altKey || e.shiftKey;
  };

  isLastActivity = function(inputFieldId) {
    var inputNumber;
    inputNumber = Number(inputFieldId.split('activity')[1]);
    if (inputNumber === inputId) return true;
  };

  addAnotherTextInput = function() {
    inputId++;
    return jQuery("#fields").append(getInputField(inputId));
  };

  getInputField = function(inputId) {
    return "<input type='text' id='activity" + inputId + "' class='input-super-large' placeholder='Type something and then press tab' />";
  };
</script>
<div class="trackable_sharing"><a href="http://twitter.com/share?url=http%3A%2F%2Fnizarnoorani.com%2Fdynamically-creating-input-fields-on-tab-via-coffeescript-and-jquery&text=Dynamically+creating+input+fields+on+tab+via+CoffeeScript+and+JQuery" style="text-decoration: none; white-space: nowrap;" title="Twitter" target="_blank" onclick="that=this;_gaq.push(['_trackEvent','SocialSharing','Twitter','http://nizarnoorani.com/dynamically-creating-input-fields-on-tab-via-coffeescript-and-jquery']); _trackableshare_window = window.open(this.href,'share','menubar=0,resizable=1,width=500,height=350'); _trackableshare_window.focus(); return false;"><img align="absmiddle" src="http://nizarnoorani.com/wp-content/uploads/trackableshare//twitter.png" alt="Twitter" width="24" height="24"></a> <a href="mailto:?subject=Check out http%3A%2F%2Fnizarnoorani.com%2Fdynamically-creating-input-fields-on-tab-via-coffeescript-and-jquery" style="text-decoration: none; white-space: nowrap;" title="Email" onclick="that=this;_gaq.push(['_trackEvent','SocialSharing','Email','http://nizarnoorani.com/dynamically-creating-input-fields-on-tab-via-coffeescript-and-jquery']); "><img align="absmiddle" src="http://nizarnoorani.com/wp-content/uploads/trackableshare//email.png" alt="Email" width="24" height="24"></a> <a href="http://www.linkedin.com/shareArticle?mini=true&url=http%3A%2F%2Fnizarnoorani.com%2Fdynamically-creating-input-fields-on-tab-via-coffeescript-and-jquery&title=http%3A%2F%2Fnizarnoorani.com%2Fdynamically-creating-input-fields-on-tab-via-coffeescript-and-jquery&ro=false&summary=&source=" style="text-decoration: none; white-space: nowrap;" title="Linkedin" target="_blank" onclick="that=this;_gaq.push(['_trackEvent','SocialSharing','Linkedin','http://nizarnoorani.com/dynamically-creating-input-fields-on-tab-via-coffeescript-and-jquery']); _trackableshare_window = window.open(this.href,'share','menubar=0,resizable=1,width=500,height=350'); _trackableshare_window.focus(); return false;"><img align="absmiddle" src="http://nizarnoorani.com/wp-content/uploads/trackableshare//linkedin.png" alt="Linkedin" width="24" height="24"></a> <a href="http://digg.com/submit?partner=addthis&url=http%3A%2F%2Fnizarnoorani.com%2Fdynamically-creating-input-fields-on-tab-via-coffeescript-and-jquery&title=Dynamically+creating+input+fields+on+tab+via+CoffeeScript+and+JQuery&bodytext=" style="text-decoration: none; white-space: nowrap;" title="Digg" target="_blank" onclick="that=this;_gaq.push(['_trackEvent','SocialSharing','Digg','http://nizarnoorani.com/dynamically-creating-input-fields-on-tab-via-coffeescript-and-jquery']); _trackableshare_window = window.open(this.href,'share','menubar=0,resizable=1,width=750,height=450'); _trackableshare_window.focus(); return false;"><img align="absmiddle" src="http://nizarnoorani.com/wp-content/uploads/trackableshare//digg.png" alt="Digg" width="24" height="24"></a> <a href="http://www.stumbleupon.com/submit?url=http%3A%2F%2Fnizarnoorani.com%2Fdynamically-creating-input-fields-on-tab-via-coffeescript-and-jquery&title=http%3A%2F%2Fnizarnoorani.com%2Fdynamically-creating-input-fields-on-tab-via-coffeescript-and-jquery" style="text-decoration: none; white-space: nowrap;" title="Stumbleupon" target="_blank" onclick="that=this;_gaq.push(['_trackEvent','SocialSharing','Stumbleupon','http://nizarnoorani.com/dynamically-creating-input-fields-on-tab-via-coffeescript-and-jquery']); _trackableshare_window = window.open(this.href,'share','menubar=0,resizable=1,width=750,height=450'); _trackableshare_window.focus(); return false;"><img align="absmiddle" src="http://nizarnoorani.com/wp-content/uploads/trackableshare//stumbleupon.png" alt="Stumbleupon" width="24" height="24"></a> <a href="http://feeds.feedburner.com/NizarNoorani" style="text-decoration: none; white-space: nowrap;" title="Subscribe" target="_blank" onclick="that=this;_gaq.push(['_trackEvent','SocialSharing','Subscribe','http://nizarnoorani.com/dynamically-creating-input-fields-on-tab-via-coffeescript-and-jquery']); _trackableshare_window = window.open(this.href,'share','menubar=0,resizable=1,width=,height='); _trackableshare_window.focus(); return false;"><img align="absmiddle" src="http://nizarnoorani.com/wp-content/uploads/trackableshare//subscribe.png" alt="Subscribe" width="24" height="24"></a> ]]></content:encoded>
			<wfw:commentRss>http://nizarnoorani.com/dynamically-creating-input-fields-on-tab-via-coffeescript-and-jquery/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
	</channel>
</rss>
<!-- This Quick Cache file was built for (  nizarnoorani.com/feed ) in 1.02953 seconds, on Jun 19th, 2013 at 2:16 pm UTC. -->
<!-- This Quick Cache file will automatically expire ( and be re-built automatically ) on Jun 19th, 2013 at 3:16 pm UTC -->
<!-- +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
<!-- Quick Cache Is Fully Functional :-) ... A Quick Cache file was just served for (  nizarnoorani.com/feed ) in 0.00732 seconds, on Jun 19th, 2013 at 2:57 pm UTC. -->