Automatic Testing with People Picker in SharePoint 2007

I have been working on automatic testing for SharePoint 2007 web applications. In our tests, user interaction with the web interface is simulated by clicking links, selecting entries in combo boxes, typing text and so on, just as a normal user would do.
Initially, it is up to a human user to interact with the web application while an external program records all his steps. If all goes well, it is possible to “play” the recorded steps and thus simulate another interaction.
It is also the automatic test’s responsibility to assert that all the expected conditions are met in the end of the test. These assertions determine if a test has passed or if it has failed. This way, repeating previously run tests to ensure backwards compatibility becomes trivial.

To do this, we’ve been using Telerik’s WebUI Test Studio. Although this tool is not exactly SharePoint-oriented, it still allows us to test our SharePoint components in a very satisfactory way.
This does not mean, however, that we are able to use all the recorded steps in an unmodified way. In fact, sometimes we have to tweak the recorded steps manually in order to select the proper UI element. For instance, sometimes the recording tool will assume that we are clicking on an html div element instead of the table cell that is contained in it. Thus, what we usually do is try to narrow down the search criteria of the automation framework by using specific attributes of that table cell or if all else fails, we convert that particular recorded step into manual C# code, which we can manipulate the way we see fit.

In this case, I was trying to simulate a text insertion into the SharePoint people picker control, but the recording tool was not capturing the events correctly.

After exhausting all automatic possibilities (by tweaking the automation framework’s search logic of element attributes) I decided to use manual C# code to solve the problem.

Step 1: I recorded an automatic step, by clicking anywhere on the page. This gave me a step that I could transform into code. Then I converted the recorded step into a coded step.

This creates an automatic C# code file which we can edit to suit our needs. The automatic generated code looks something like this:

[CodedStep(@"Click 'td_73'")]
public void Click_td_73_CodedStep()
{
    // Click 'td_73'
    HtmlTableCell td_73 = Pages.Home__AutoTests.td_73;
    td_73.Wait.ForExists(10000);
    td_73.Click(false);
}

Step 2: In this case, I wanted to simulate the insertion of text into the people picker. Thus, I used WebUI Test Studio’s Overlay Surface feature to correctly identify the element I was trying to manipulate.

By checking the page’s DOM tree, I was able to determine that the element I was trying to manipulate was an HTML textarea, with a div before it. However, when we try to insert text into the textarea element, nothing happens.

Step 3: After a few tests and after discussing the issue in the Telerik support forums, I was able to work around the problem.

In fact, the element that we want to manipulate isn’t the textarea itself, but the div above it. So, we start by adding the div element to the project Elements pane so we can reference it freely in the C# code.

Step 4: After that, we must insert the following code into the recorded step that was converted to manual C# code ( the idea is to replace the automatically generated C# code that was presented in Step 1).

[CodedStep(@"Insert into people picker")]
public void InsertItemInPeoplePicker_CodedStep()
{
    //Note: the div_PlaceHolder__UpLevelDiv object represents the div we want to 
    //manipulate. It was added to the Project Elements in Step 3.
    HtmlControl peoplePicker = Pages.Customize_Workflow.div_PlaceHolder__UpLevelDiv;
    peoplePicker.Wait.ForExists(10000);
    peoplePicker.ScrollToVisible(ArtOfTest.WebAii.Core.ScrollToVisibleType.ElementTopAtWindowTop);
    ActiveBrowser.Window.SetFocus();
    peoplePicker.MouseClick();
    Manager.Desktop.KeyBoard.TypeText("testDeveloper", 200);
}

After the replacement of the automatic code with the code presented above, it is possible to insert the text “testDeveloper” into the people picker. And that’s it.

Hope this helps.