Read more at Matt Cutts’ post about canonical urls.

1) Stores a variable with the number of months into the future that I want my date to be. In this case 4 months. If I put this in a separate variable it will be much easier to change at a later time, rather than searching and replacing in the javascript below.

Command: store
Target: 4
Value: monthsToAdd

2) Formats and stores the date we want to use. Format in this example is Swedish, like so: “2011-02-18“.

Command: store
Target: javascript{var dates = new Date();var day = dates.getDate();if (day < 10){day = ’0′ + day;} month = dates.getMonth() + 1 + parseInt(storedVars['monthsToAdd']);var year = dates.getFullYear();if (month > 12){month = month – 12;year = year + 1;}if (month < 10){month = ’0′ + month;}year + ‘-’ + month + ‘-’ + day}
Value: dynamicDate

3) Types our dynamic date into a textbox, whos id contains “dateInputBox”.

Command: type
Target: //input[contains(@id, 'dateInputBox')]
Value: ${dynamicDate}

You can read more about javascripts and Selenium here. If you feel that I am wrong or you have something to add, please comment.

Why do we want to use automated GUI tests to begin with?

• They are faster than manual tests.
• They do exactly the same thing every time.
• They can be executed automatically after nightly builds which provides quicker feedback to developers.
• They are perfect for regression testing.

Microsoft Coded UI
Visual Studio 2010 Ultimate and Premium comes with support for Coded UI (CUI). What they have that the other version lack is the Test Builder, which is needed to record tests or create GUI mappings. Also included is the Test Manager (also called Camano or Testing Center) which seems to be aimed at testers and test managers rather than developers.

What I like about Microsoft Coded UI:

• Test Manager. For managing test cases and creating automated tests from recorded UI tests. You can also start Test Builder from Test Manager to record a new test.
• You can link recorded tests to work items in Team Foundation Server (TFS).
• Test Builder uses as many attributes as possible to identify UI controls, which makes the tests less vunerable to changes of the UI control attributes. If you for instance change the CSS class of a UI control, the test will still find the control based on other search criteria.
• UI Maps. With detailed UI Maps you can code UI tests without even opening the browser. Working with enterprise webapplications, using UI Maps to divide the website in logical units is a must.
• Handles both web-, Windows and Silverlight applications. You could also run two separate browsers in the same test to see that they don’t affect eachother.
• Is not depending on javascript.

What I don’t like about Microsoft Coded UI:

• Test Manager. It feels like a beta version, very buggy and unstable (often I can’t even close it). I am also having some trouble understanding how to work with the Test Manager, but maybe that’s just me. It doesn’t look or feel like any other program I have ever used. I guess you need some sort of training to use it properly. Rumour has it that Test Manager will be an incorporated part of the next Visual Studio version.
• The Ultimate and Premium versions of Visual Studio are not for free, starting at $799.
• Only supports Internet Explorer. There is a buggy beta release of Coded UI that is supposed to support Firefox, but I exclude that.
• You need to set the ClientIDMode of all your UI controls to not use AutoID.
• No Mac support whatsoever.

Selenium
The Selenium IDE plugin for Firefox allows for recording and playback of tests. You can export recorded tests to various programming languages. In C# they are exported as NUnit tests.

Selenium RC (Remote Control) is a stand alone application that can be used to run tests. Selenium RC starts an instance of Firefox (or other browser) and runs the tests provided. Requires Java.

Selenium Grid is used to distribute a large amount of tests to different Selenium RC (that can be on separate computers, running separate browsers). This effectively cuts the time needed to run all the tests. Requires JDK and Ant.

What I like about Selenium:

• It’s free!
• There is a very low threshold to get started and you can gradually make your work with the Selenium applications as complex as you want. I use Selenium IDE for every day work when I need to do mundane tasks repeatedly. You don’t have to be a system developer to start using Selenium.
• Tests and test suites are saved as HTML files and you can therefor edit them with any editing tool, like Notepad. Also, imagine a scenario where you generate the tests based on templates using Perl or PowerShell scripting and thereby controlling parameters in the tests without having to write code and compile.
• The possibility to export tests to different programming languages.
• Expandable. Selenium uses javascript to record and run the tests and you can write your own user-extensions. For instance, you may want to add an assert or change the how the C# code is generated (so that it’s not NUnit tests but Microsoft Unit tests).
• Selenium RC allows running Selenium tests in all common browsers (Firefox, Internet Explorer, Opera, Safari, Chrome etc).
• Using Selenium RC and Grid, you can distribute tests on multiple platforms, cutting execution time and adding Mac support.

What I don’t like about Selenium:

• Only for web. You can’t test Windows applications.
• Requires javascript. Recording and playback of tests require that javscript is available in the web browser.
• Selenium IDE is only available as plugin to Firefox. You have to use Selenium RC to test in Internet Explorer.
• Only records a flow of action as a test. It is twisty to add for instance a login action in the middle of a test, especially if you have exported the test to code.

Conclusion
If you want to test a Windows application, Coded UI is your choice. I think the UI Maps with support for a logical structure is great, but is mainly for large companies, with dedicated test developers.

Selenium is free and easy to use. If you haven’t tried it yet, start right away by downloading Selenium IDE for Firefox and play with it a bit. I mainly work with web application development so Selenium is my first hand choice. At the moment…

If you have something to add or you feel that I am wrong about any of this, please comment.

Command: click
Target: ctl00_ctl00_ctl00_MainPlaceHolder_MainContentPlaceHolder_Main_c7c270_btnNavigateNext
Value:

The problem with this is that the id recorded by Selenium IDE is automatically generated by .NET at runtime, and therefor it could change at anytime without your control (sort of, but let’s not get into that right now). The id I specified at designtime was of course “btnNavigateNext” and the long prefix is added by .NET to make sure no two controls in the same page end up having the same id. What we really want to do here is click a button that I have named “btnNavigateNext”, and as long I don’t give any other control in the same page the same name, here’s how you could change the Selenium command:

Command: click
Target: //input[contains(@id, 'btnNavigateNext')]
Value:

The target is now specified by an Xpath, which you can tell by the initial two slashes. First we specify what type of control to look for, in this case an input control, and then how to identify it. I used the contains function in Xpath to specify that the id attribute (marked with the at sign) should contain “btnNavigateNext”. Try the Locate button next to the Target input in Selenium IDE – your button should get a green frame in the browser window if correct. Otherwise you get an error in the log.

When recording a selection in a dropdown control you get something like this in Selenium IDE:

Command: select
Target: ctl00_ctl00_ctl00_MainPlaceHolder_MainContentPlaceHolder_Main_c7c30_lvItems_ctrl0_ddlColor
Value: label=Pale blue

Here, we experience the same problem with the id as with the example above – we need to change the logic for identifying the control. The second problem with this is that the values in my dropdown are dynamic, and I can’t be sure that “Pale blue” is an option when I want to run this test later. Therefor, I will have to change the identifying logic for the value as well. No need to do this if your dropdown values are static. Here’s what I changed my command to:

Command: select
Target: //select[contains(@id, 'lvItems_ctrl0_ddlColor')]
Value: index=1

Now the test will pick the first color in my dropdown list. The downside of this is of course that I can’t tell what color will be chosen so if some later part of this test is counting on a specific color this approach won’t do.

• Change the IPv6 setting.
• Simply change localhost to 127.0.0.1 or your local computer name.

This effectively cut response times for me while debugging from 25-30 s to 3-4 s. A MAJOR difference.

In this post, I will try to explain how I setup automated testing with Selenium RC and some custom C# code in Visual Studio 2010. I will assume you are somewhat familiar with Visual Studio and C#.

First off, download the Selenium RC and unpack the zip-file to a folder of your choice. Selenium RC contains two folders that are of interest to us, the selenium-dotnet-client-driver-1.0.1 and selenium-server-1.0.3 folders. Since Selenium RC requires Java to run, make sure you have Java installed. Start Selenium RC with the following command (I created a desktop shortcut that looks like this):

“C:\Program Files (x86)\Java\jre6\bin\java.exe” -jar C:\Selenium\selenium-remote-control-1.0.3\selenium-server-1.0.3\selenium-server.jar

With that taken care of, I generated the code for the automated tests using Selenium IDE with Firefox. After recording a simple test, save it as a cs-file:

Archive -> Export test case as… -> C# – Selenium RC

If you open the test case cs-file you will notice that the code generated is actually a NUnit test class. There are NUnit attributes like TextFixture, SetUp, TearDown and Test. If you use NUnit, you can now run this test with NUnit.

If not, and you want to use Visual Studios built in unit test support, create a new Visual C# Test project in Visual Studio and include your Selenium cs-file. You have to change the class in the following way:

• TextFixture -> TestClass
• SetUp -> ClassInitialize
• TearDown -> ClassCleanup
• Test -> TestMethod

You might also want to change namespace of the class to match you project name. Add a reference to ThoughtWorks.Selenium.Core.dll that is located in the selenium-dotnet-client-driver-1.0.1 folder. Provided that the Selenium RC server is still running, you should now be able to run your coded automated test by right-clicking the file in Visual Studio and choose Run Unit Tests.

You can now start to manipulate the automated tests by adding your own code. This setup is very powerful if you want to add automated tests to your build server. There is, however, no problem creating for example a console application to run the tests instead of running them as unit tests. Just make sure you do the setup, testing and teardown in correct order.

Coded automated test with Selenium RC is an alternative to using the new Coded UI feature in Visual Studio.

1. Relaunching an existing website on a completely new domain.

   Why change the main domain of your website, if your company hasn’t changed name? Don’t! An important factor in SEO is how old your website is and how trusted it is. This is of course based on the domain name.

   Read more about changing domain name.

2. Changing the URL-structure of your website.

   This will effectively break all incoming links, and memorized addresses that people use will not work. At least if you don’t redirect all requests to the old structure to the new structure.

   Read more about changing the URL structure of your website.

3. Not bothering with redirects from the old website structure to the new one.

   For me, this is just unimaginable. How could you not do this? They had top search engine listings on thousands of topics. When searching for something even remotely related to the Swedish military, you always found their website among the top search results. Just after their relaunch, the top results when googling “Swedish military” pointed to various forums, www.soldf.com among others. Soldf.com is a Swedish forum for military nerds, where they can compete in fantasy facts about how far bullets can travel. Not the best promotion for the real Swedish military. Their website was nowhere to be found for quite a while.

   What they should have done is of course set up 301-redirects for all old URLs to corresponding pages in the new website. Read more about 301-redirects.

   The only redirects used seemed to be from the general start page and the start pages in some subcategories of the old website to the general start page of the new website. Not enough!

4. Removing all content.

   That’s right. Why not? You’re changing the entire structure and layout of the website anyway. Thousands of pages with articles and facts about the Swedish military, right down the drain.

   Removing all content effectively removes the option to have redirects from old to new website structure even if you wanted to.

The conclusion is that the Swedish military simply removed their entire website, a highly trusted, old website containing a high amount of reliable content, and started a new, completely separate website.

As a developer with high interest in SEO-related topics, I sincerely hope they had really good reasons to treat their website, virtual visitors, coworkers and all the search engines this way, IF they actually knew the consequences of their actions.

By the way, I think the Swedish military’s new website looks much better than the old one.

For testing purposes, I solved this by adding some code to the Application_BeginRequest method in Global.asax. I was only interested in seeing if the request for my static log.htm file was actually received. This piece of code simply writes some info to the System.Diagnostics.Debug output when log.htm is requested.

protected void Application_BeginRequest(object sender, EventArgs e) {
if(Request.Path != "/log.htm") return;

string link = Request.QueryString["url"];
string timestamp = Request.QueryString["timestamp"];
string referer = Request.QueryString["referer"];
System.Diagnostics.Debug.WriteLine("Request received: " + link + " " + referer + " " + timestamp);
}

Now when I debug my earlier example with Visual Studio I get a row in the Output window looking like this:

Request recieved: http://www.netlight.se http://localhost:60877/ExternalLinks.htm 1270545819906

If you want to log to a file, exactly like IIS does, that should be no problem. Just change the output code to write to a file instead.

Let me know if you have something useful to add or you feel that I am wrong in any way.

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Tracking clicks on outbound links</title>
<script type="text/javascript" src="mootools-1.2.4-core-nc.js"></script>
<script type="text/javascript">
/*
Change to suitable way of finding all external links.
$$ can be timeconsuming.
*/
function AddLogFunctionality() {
var links = $$(‘a[rel=external]‘),
referer = document.location;
for (var i = 0, l = links.length; i < l; i++) {
var link = links[i];
link.addEvent(‘click’, function(e) {
e.stop();
TrackClick(this, e, referer);
});
}
}

/*
This should point to your log page where you handle the information.
The log page should return an empty HTML page (HTTP status = 200).
*/
var _logUrl = "/Log.aspx?",
_timestampParam = "&timestamp=",
_urlParam = "&url=",
_refererParam = "&referer=";

function TrackClick(link, event, referer) {
var linkurl = link.href;
/*
Here’s where Mootools comes in handy, making the AJAX request.
onSuccess triggers when response (HTTP status = 200) is received.
*/
var htmlRequest = new Request.HTML({
url: _logUrl + _urlParam + linkurl + _refererParam + referer + _timestampParam + (new Date()).getTime(),
onSuccess: function() {
window.location = linkurl;
}
}).get(); } </script>
</head>
<body onload="AddLogFunctionality()">
Here’s an outbound link: <a href="http://www.netlight.se" rel="external">Netlight Consulting AB</a>
</body>
</html>

I used Mootools, but you can also use jQuery just as well.

I tried this approach first:

<a href="somepage.htm" onclick="(new Image()).src = ‘log.aspx?url=somepage.htm&timestamp=’ + (new Date()).getTime()">Some page</a>

But this doesn’t work because the request to the log page is cut short when the request to somepage.htm starts and the server never receives any log request.

Google has a whole API for tracking that provides data through Google Analytics, if you use that. I haven’t tried this yet, but to use it for tracking clicks on outbound links seems pretty easy.

Excuse the bad format of the code above. WordPress and I are not the best of friends… yet. Also, let me know if you feel this post is wrong in any way or you have something useful to add.

EDIT:
There’s a bug in Mootools that appears if you do window.open() in onSuccess event on Request.HTML in Google Chrome. You will get a “ghost” frame in Chrome that you can’t see. I discovered it because the page I opened with window.open had a video clip on it that played some music.

1. URL. The further to the left, the better. Domain and subdomain names should really be something you wish your website to be associated with. Also, be careful if you are thinking about changing the URL structure of your website if it is old and trusted. You could render large portions of the search engines indexes that already points to your website useless.
2. Title attribute. The further to the left, the better. The title should reflect what the page is about, otherwise you might get penalized.
3. Headers. The H1 tag is most valuable, then H2, H3 and so on. H1 must only exist once on each page, otherwise you might get penalized.
4. Links (anchors). Make sure the links to each page reflects what the page is about. Always set the alt attribute. This apply to both inbound and outbound links.
5. Metadata. Don’t spam metadata with keywords, but define what the page is about.
6. Bread text. The earlier in the page and the more frequent (to a certain degree) the better. Don’t spam the text with keywords.
7. Images. The alt attribute.

Let me know if you feel that I am wrong or you have something you want to add.