Automating a Dynamically Generated Grid

PROBLEM

You need to automate an ASP .NET Grid control like the one seen here:

http://demos.telerik.com/aspnet-ajax/grid/examples/client/selecting/defaultcs.aspx

(Note: this is a Telerik-manufactured RadControl but this solution applies to generic/custom grids as well).

SOLUTION

This can be achieved in both the Standalone version and Visual Studio plugin through a coded solution. We will use this Grid to demonstrate how to do it:

http://demos.telerik.com/aspnet-ajax/grid/examples/client/selecting/defaultcs.aspx


As you can see this page contains a Grid. Fist we need to add this Grid to our project. From your Test Studio project, start the Recorder and navigate to the page. 

 

Using Hover Over Highlighting, highlight the Grid. Since this is a Telerik-manifactured ASP .Net grid, the Translators will kick-in and you will see multiple options depending on which specific part of the Grid you've hovered over: 

 

 

Each of the orbs represents a specific layer of the Grid. We're interested in the GridTableView, which is the second last orb in the above image. Don't choose the actual GridView - it corresponds to a DIV element. 

 

Now bring up the pop up menu and click on "Add to Project Elements":

 

 (Note: adding a generic Grid into Project Elements will be slightly different because highlighting the actual Grid element might not be so easy. You might need to bring up the DOM Explorer and locate and add the Grid from there).

Going back to Test Studio, you will notice a new element has appeared in Project Elements and it will be highlighted by a yellow arrow:

 

 

Now you are ready to use this element in your coded solution. Let's look at some standard solutions:

 

1) Outputting the content of each (visible) cell to the Log

 

Create a new coded step and add the following lines that go through each (visible) cell in the Grid:

 

foreach (HtmlTableRow r in Pages.ASPNETGridDemo.RadGrid1Table.AllRows)
{
    foreach(HtmlTableCell c in r.Cells)
    {
        Log.WriteLine("Cell found. TextContent:"+c.TextContent); 
    }
}
 

In the above code, "Pages.ASPNETGridDemo.RadGrid1Table" references the GridTableView which we manually added to our project. Because of this you will need to change this to correspond to the actual element in your project:

 

 

Also, you can replace the following line of code with whatever logic you need to implement (currently it pastes the TextContent of each cell to the log):

 

Log.WriteLine("Cell found. TextContent:"+c.TextContent);
 

This is C# code, the VB code will follow the same logic only transcribed in the corresponding syntax. Make sure the coded steps executes at a point in your test when the page congaing the Grid is loaded in the Active Browser.

 

2) Locate a specific row and click on a specific cell in that row

Let's look at the grid in the below image. Let's imagine we want to get the row that contains the Contact Name "Thomas Hardy" and from there we want to click the checkbox in the same Row:

 

enlarge screenshot 

 

In this example we're want to check a checkbox but this could be any kind of control. The code we will use doesn't take into account what the content of the actual cell is: we just click it. Once again we'll be using the definition of the Grid that we've stored in the the Project Elements (as seen in Solution 1 of this article). Here's the code:

 

HtmlTableRow containerRow=null; //The variable that will store the row that contains the name cell and the checkbox cell
 
foreach (HtmlTableRow r in Pages.ASPNETGridDemoWhatS.RadGrid2Table.AllRows)
{
    //Go through all the cells to find the one that contains the name;
    //This assumes you won't know which column has the name.
    foreach(HtmlTableCell c in r.Cells)
    {
         
        if (c.TextContent.Equals("Thomas Hardy")) //The name can be data-driven if you use code that will extract values from a datasource
        {
         containerRow = c.Parent<HtmlTableRow>(); //We want to get the row which has this cell  
        }
             
    }
}
 
HtmlTableCell checkbox = containerRow.Cells[0]; //Get the cell with the checkbox
 
checkbox.ScrollToVisible();
checkbox.MouseClick();