Functional Testing of ASP.NET Web Pages With TestComplete

Requirements
Files

Author: SmartBear Software
Applies to: TestComplete 9.30 Enterprise and TestComplete 10 with the Web module

QA testing is an important part of web application design. Functional testing allows checking how an object works, in our case it allows determining whether a web page is functioning properly. You can effectively organize the testing process by using special automated testing environments. TestComplete, a functional testing tool, supports testing of any web controls, from simple HTML inputs, up to complex navigation, and grid controls placed on a web page. Table or grid controls often represent data from a database on a company’s web pages. Therefore it is very important to have useful methods to perform functional testing of such controls. With TestComplete, you can easily create such methods, write tests based on them and then automate testing of whole pages. This testing approach allows saving time and money, especially if you have a lot of web pages with many complex controls on them.

Note: For functional testing of web pages, you must have TestComplete’s Web module. It provides TestComplete plug-ins required for testing web applications, and allows you to get access to internal objects, methods and properties of browsers and web page.

Functional testing of web sites includes testing of each particular page of the site. This article describes how to create tests checking the ASP.NET page functionality and how to automate the QA testing process with TestComplete. We will also give examples of methods performing common tasks in testing of grid controls. After inspecting your custom grid, you will be able to create your own methods performing similar tasks.

You can download a TestComplete project using the links from the box on the right.

Note: Before you run the downloaded project on your computer, make sure that the correct path to the tested application is specified in the project.

Planning ASP.NET Tests

So, we have a tested object, it is an ASP.NET page. According to certain business rules, our page must load properly and correctly represent data from the database. Every control on the page must also behave as intended by the developer.

To demonstrate testing of the ASP.NET page functionality, we will test a page with a grid control placed on it. To do this, we will create a TestComplete project, write all necessary tests and then automate all actions with it.

We will also write a number of procedures that perform common tasks in testing pages: finding the needed cell, getting a value from a cell, searching a value by key in the table, obtaining values from specified columns and so on. It becomes possible because TestComplete provides specific methods and properties giving access to controls and other elements of your ASP.NET page. These methods and properties simplify the test development process greatly.

We will implement helper procedures as scripting routines. You can modify the code in compliance with your application’s peculiarities and then use these procedures in QA testing of your particular grid.

So, the test we are going to create will include the following steps:

  • Determining the tested object (the ASP.NET page)
  • Creating a TestComplete project
  • Creating Functional Tests
  • Automating Functional Tests
  • Running Functional Tests and Viewing Results

About Tested Page

In this article, we will create tests for the following ASP.NET page: /Samples/TestComplete9/WebOrders/

We will not consider the page design because the goal of our article is functional testing, not design. So, we will work with a ready-made page.

The page contains a table with a list of orders. You can create new orders, modify or delete existing ones.

The Tested Page

Picture 1 - The Tested Page

Of course, you can use any other ASP.NET controls on your pages and test these pages with TestComplete. The common principles of functional testing described in this article are suitable for testing pages with any kind of ASP.NET controls. However, different controls have some peculiarities, so you should inspect your control’s structure before you will write tests for it.

Which Browser to Choose

In general, to test ASP.NET pages, you can use any web browser. TestComplete can record and simulate user actions with any window existing in the operating system. However, to make the testing really powerful, we’d recommend that you use the browsers which TestComplete supports for web testing:

  • Microsoft Internet Explorer 7-11 (both 32-bit and 64-bit versions)
    Note: The Modern UI (Metro) version of Internet Explorer 10 and 11 is not currently supported.
  • Mozilla Firefox 24-26
  • Google Chrome 31
  • Opera Software Opera 12.10 - 12.15, 17, 18 (both 32-bit and 64-bit versions)
  • Apple Safari for Windows 5.1.7
  • Any web browser based on the Microsoft WebBrowser control.

The benefit is that the test engine provides access to elements of web pages that are shown in these browsers, so you can use the elements’ methods and properties in your tests. Also, access to web page elements makes the tests object-oriented. Without this access, TestComplete will simply emulate coordinate-based mouse clicks.

About Cross-Browser Testing

One of typical tasks when testing web pages is to check whether the web application under test behaves correctly in any browser or at least in the most popular ones. TestComplete offers you a number of special testing abilities that make cross-browser testing of web pages easier.

In this article, we create a test that will test a web page under Internet Explorer. Make sure that you can easily modify it to test your ASP.NET page under any other supported browser.

Creating a TestComplete Project

TestComplete works with automated tests organized into projects. For instance, it is useful to have a particular project for each website. Each project consists of project items that perform automatic testing operations or assist in performing these operations. So, we will start creating our tests with creating a TestComplete project:

  1. Launch TestComplete. Click the Create a New Project item in the Start Page. The Create New Project wizard will appear.

    In the wizard, type the name of the future project, in our case it will be "ASP.NET_PageTesting". Then specify the project location in the computer.

    Creating New Project

    Picture 2 - Creating New Project

    After you have specified the needed settings on the page, click Finish to create a new project with the specified name or click Next to define the project scripting language and some other project settings. We create a project that will use JScript.

    After you click the Finish button, a new project suite will be generated and the ASP.NET_PageTesting project with the default content will be added to it.

    A new project in the Project Explorer

    Picture 3 - A new project in the Project Explorer.

    We will use the following project items:

    • Script - here we define functional tests and some helper scripting routines
    • KeywordTests - here we automate launching and stopping the browser
    • NameMapping – here we specify custom mapped names for objects used in testing.

    You can delete TestedApps and Stores since we will not use them in our test. Also, we rename Unit 1 to RecordedTests.

Note that in our article we will create a test based on JScript. Other possible scripting languages are VBScript, DelphiScript, C++Script and C#Script.

Creating Functional ASP.NET Tests

What tests do we need? On the one hand, tests must check whether the page responds to user actions correctly. On the other hand, we need universal enough tests that we can also apply to testing other ASP.NET pages. So, we will create a number of tests checking the following:

  1. The visitor must be able to log into the application.
  2. There must be a table with data on the page and it must contain data.
  3. There must be data for Paul Brown and Clare Jefferson in the table.
  4. The visitor must be able to select certain rows in a table, select all rows in it as well as deselect them.
  5. The visitor must be able to modify the existing order.
  6. The visitor must be able to create a new order.
  7. The visitor must be able to delete multiple items from the table.
  8. The visitor must be able to log out from the application after he has finished working.

We will implement these functional tests as scripting routines. We chose scripting, because it is quite an obvious way of creating short and effective tests. All the more so because TestComplete provides enhanced name mapping that simplifies working with objects and makes the script code easier to understand.

We will also automate launching and stopping the browser, logging into and out from the application by creating two simple keyword tests. A keyword test is another test implementation approach. It does not require any programming experience for creating tests. So, we use both keyword tests and scripting routines to demonstrate basic principles of working with them. You can compare these implementation techniques and choose the one that suits your QA testing tasks.

Recording a Simple Functional Test

To understand how to write automated tests, we can record some testing actions over the page with TestComplete. Then, after analyzing the recorded test, we will be able to write our functional tests. User actions over the tested object can be recorded as keyword tests, scripting routines and low-level procedures. We will record a scripting routine. Then, after inspecting how the recorded test is organized, we can write our own tests in a similar way.

To record a script routine:

  1. Select Test | Record | Record Script from the main menu of TestComplete.
  2. After TestComplete has started recording, perform the following sequence of user actions over the page:
    • Launch Internet Explorer and open the http://support.smartbear.com/Samples/TestComplete10/WebOrders/ link in it.
    • Enter “Tester” and “test” in the Username and Password boxes and click Login.
    • Click Check All.
    • Clear a check box in the first row.
    • Click Delete Selected.
    • Click Edit in the remaining row.
    • Change Paul Brown to Stan Smith.
    • Click Update.
    • Click Logout at the top right corner of the page.
    • Close Internet Explorer.
  3. The test is finished. Click the Stop button on the Recording toolbar.

The recorded test (you can find it in the RecordedTests script unit) will look as follows:

function Test1 ()
{
  var browser;
  var page;
  var panel;
  var page2;
  var cell;
  var table;
  var cell2;
  var textbox;
  Browsers.Item(btIExplorer).Run("/Samples/TestComplete9/WebOrders/");
  browser = Aliases.browser;
  page = browser.pageWebOrdersLogin;
  page.Wait();
  panel = page.formAspnetform.panelLogin;
  panel.textboxCtl00MaincontentUsername.SetText("Tester");
  panel.passwordboxCtl00MaincontentPassw.SetText("test");
  panel.submitbuttonCtl00MaincontentLogi.Click();
  page2 = browser.pageWebOrders1;
  page2.Wait();
  page2.formAspnetform.table.cell.panelContent.linkCtl00MaincontentBtncheckall.Click();
  page2 = browser.pageWebOrders;
  page2.Wait();
  cell = page2.formAspnetform.table.cell;
  panel = cell.panelContent;
  table = panel.panel.tableCtl00MaincontentOrdergrid;
  table.cell.checkboxCtl00MaincontentOrdergri.ClickChecked(false);
  panel.submitbuttonCtl00MaincontentBtnd.Click();
  page2.Wait();
  table.cell1.imagebuttonEdit.Click();
  page2.Wait();
  cell2 = panel.tableCtl00MaincontentFmworder.cell;
  textbox = cell2.textboxCtl00MaincontentFmworderT;
  textbox.SetText("Stan Smith");
  cell2.panelButtonsProcess.linkCtl00MaincontentFmworderUpda.Click();
  page2.Wait();
  cell.panelLoginInfo.textnode.linkCtl00Logout.Click();
  page.Wait();
  browser.BrowserWindow.Close();
}

As you can see, TestComplete generates short names, which are called aliases, for objects on which we perform testing actions during recording. Aliases are available via the Aliases object. For instance, here is a short name for the browser process:

Aliases.browser;

You can also refer to objects by their short names via the NameMapping object. For instance, you can refer to the browser process as follows:

NameMapping.Sys.browser;

Now we can also refer to the tested page by its alias:

Aliases.browser.pageWebOrders;

Referring the object by its short name, we can invoke methods, obtain property values and so on. For instance, to click the Submit button on the login page, we can use the following code:

panel.submitbuttonCtl00MaincontentLogi.Click();

Where submitbuttonCtl00MaincontentLogi is the alias for the Submit button.

Using aliases makes scripting routines shorter and more readable. You can also create short names for objects manually, modify automatically generated names and so on. To create an alias for the object, you should specify the property collection which identifies the object in the system. Further we will refer to objects only by their aliases.

Creating Helper Routines

As we will work with a table that contains data, we will need methods obtaining values from particular cells, methods searching for values within the table and so on. It is useful to implement these actions as additional helper routines in an individual script unit. For this purpose, you can add a new unit to the project and name it, for instance, "WorkingWithGrid". However, before testing we should make sure that the tested page is completely loaded to the browser. We can also implement this checking as an individual helper routine.

First of all we should define the URL of our tested web page. To do this, you can open the newly created WorkingWithGrid unit and define a variable that will contain the page’s URL:

var pageURL = "/Samples/TestComplete9/WebOrders/*";

Further we will use this variable in our tests.

Checking the Page Loading

Now we should define a method checking whether the page is loaded to the browser. First of all we should check whether the browser is running. To do this, we will use the Exists property. If the browser is launched, we will call the same property for the page object to determine whether it is loaded to the browser. To obtain the list of processes, we will use the Sys object. Note that we refer to objects by their aliases in the following code:

function ASPPage() 
{ 
  var p, i; 
  if (!Aliases.browser.Exists) 
    { return "The browser is not found."; } 
  else 
    { 
      p = Aliases.browser; 
      // Wait for the page to load i = 0;
      while ((!p.WaitPage(pageURL,0).Exists)&&(i<10)) 
        { aqUtils.Delay(500); i++; } 
        if (!p.WaitPage(pageURL,0).Exists) 
        { return "The page is not found."; }
    } 
  asppage = p.pageWebOrders;
 return asppage;  
}
Note: It is important to make sure that the desired object is running or loaded before you start testing it. We recommend that you use the Exists property for checking whether the object exists in the system when starting test execution. In most cases, it is enough to check the object existence once before testing. However we will demonstrate this from each particular test to emphasize this testing peculiarity.

We use objects’ short names, or in other words, aliases, in the script code above. TestComplete automatically generates them when you are recording tests. You can also create and modify aliases manually using the Object Browser panel or the NameMapping project item.

Determining the Object on the Page

After we make sure that the tested page is loaded, we can obtain individual values in the table.

How can we determine the object on the page? TestComplete provides a useful tool for finding the needed element quickly - Object Spy. Suppose we need to get the name of the object corresponding to a certain cell in the table control.

  1. Open the tested page in the browser (we use Internet Explorer).
  2. Select the Object Properties  Display Object Spy button from the Tools toolbar. This will invoke the Object Spy dialog.
  3. Drag the Finder Tool Finder tool to the desired element on the page.

While dragging, TestComplete will highlight objects under the mouse cursor with the red frame. Release the mouse button when the cursor is over the desired object and TestComplete highlights it with the red frame.

The Object Spy Window

Picture 4 - The web page under test and the Object Spy Window

Now the Object Spy window shows properties of the specified object. To find the object in the Object Browser, click the The Highlight In Object Tree Command button. We can determine various objects in the same way: cells from the grid and table controls, buttons and check boxes on the page form and so on.

After we have found the object in the Object Browser panel, we can map its name and create an alias to address the object easily. To do this, select the object in the tree and choose Map Object from the context menu. In our tests, we will use custom names that are automatically generated by TestComplete, but make sure you can rename names and aliases assigned to mapped objects as you wish.

Mapping the Object

Picture 5 - Mapping an object from the Object Browser

Writing Helper Routines

Now we know how to refer to objects on the page. Let’s define some helper scripting routines that we will further use in functional tests. These routines will perform working with values in the table, searching and so on.

However, before we start writing tests, we should have a better look at the page under test. The main control on our page is the table. Generally, we will test the table functionality, so we should inspect the table in more detail. What structure does it have? Our table consists of cells, and each cell can be addressed by its column and row index within the table. For instance, cell [2,5] is located in the second row and in the 5th column. The first row contains field headers. Moreover, we have two special columns without a header. First, one contains check boxes that allow you to select several rows in a table. The second column is displayed after all other columns and contains “Edit Order” icons. You can click the “Edit Order” icon to start editing the table record.

By clicking Check All and Uncheck All, you can select or unselect all rows in the table. By clicking Delete Selected, you can delete all selected table rows. You can also click the links on the left to switch between application pages.

How can we obtain values from the table? First of all, we can obtain the table object and then call appropriate methods and properties to get information about it. For instance, we can obtain the number of columns in the table using the ColumnCount property. Similarly, the number of rows is contained in the RowCount property. To obtain a particular value stored in a cell, we can use the cell’s contentText property. So we can implement some helper routines in the WorkingWithGrid unit to use them further in functional tests.

Note: In our application, we are using a web table. If you are using any other supported third-party grid control, appropriate properties are called wRowCount, wColumnCount and wValue. TestComplete also extends supported grid controls with a number of control-specific properties and methods that you can use in your tests. Inspect your grid control in the Object Browser to find out which properties and methods are available for your grid.

Finding the Column Number by its Name

We can find the number of any column by its name. We will search the name as text of the header cell. And then, after we have found text that matches, we can obtain the column index of the cell:

function FindColNumberByName(colName) 
{ 
  var page, mainTable; 
 // page = ASPPage(); 
  mainTable = Aliases.browser.pageWebOrders.formAspnetform.table.cell.panelContent.panel.tableCtl00MaincontentOrdergrid;
  var i = 0, k, colNumber = -1; 
  colcount = mainTable.ColumnCount(0); 
  while (i<=colcount-1) 
  { 
    if (mainTable.Cell(0,i).contentText == colName) 
    { colNumber = i; } 
    i++; 
  } 
  return colNumber; 
}

Finding Row Number by Value

We can obtain the row number in the same way:

function FindRowNumberByValue(keyfield, keyvalue) 
{ 
  var page, mainTable; 
  page = ASPPage(); 
  mainTable = page.formAspnetform.table.cell.panelContent.panel.tableCtl00MaincontentOrdergrid; 
  var i = 0, k, rowNumber = 0; 
  while (i <= mainTable.RowCount-1) 
  { 
    k = 0; colcount = mainTable.ColumnCount(i); 
    while (k <= colcount-1) 
    { 
     if ((mainTable.Cell(i,k).contentText == keyvalue) && (k == keyfield)) 
     { rowNumber = i; } 
     k++; 
    } 
    i++; 
  } 
  return rowNumber;
}

Finding Value by Key Value

We can also obtain a value from the table by some key value. For instance, we need to obtain Paul Brown’s card number. In this case, "Card Number" is a key field, and "Paul Brown" is a key value. So, we should obtain the "Card Number" column number and the row number with information about Paul Brown. After that using these column and row numbers we can get the needed value:

function FindValueByKeyValue (fieldname, keyvalue) 
{ 
  var page, mainTable, field, msg; 
  page = ASPPage(); 
  mainTable = page.formAspnetform.table.cell.panelContent.panel.tableCtl00MaincontentOrdergrid; 
  field = FindColNumberByName(fieldname); 
  var i = 0, k, value = ""; 
  while (i <= mainTable.RowCount-1) 
  { 
    k = 0; 
    colcount = mainTable.ColumnCount(i); 
    while (k <= colcount-1) 
    { 
    if (mainTable.Cell(i,k).innerText == keyvalue) 
      { 
        if (mainTable.WaitCell(i, field,0).Exists) 
        { 
        value = mainTable.Cell(i, field).innerText; 
        break; 
        } 
      } 
      k++; 
    }
    i++; 
  } 
  if (value != "") 
  { 
    msg =fieldname+"\""+keyvalue+"\":"+value; 
    Log.Message(msg); 
    return value; 
  } 
  else 
  { 
    msg = "The value in the field \""+fieldname+"\" for \""+keyvalue+"\" is not found."; 
    Log.Message(msg); 
    return 0; 
  } 
}

Selecting a Row

Now we can simulate user actions over the page from script. The following code simulates selecting/deselecting a row from the grid depending on the checked parameter of the appropriate checkbox. We use the ClickChecked method to simulate checking/unchecking a cell’s checkbox:

function SelectRow (rowN, check) 
{ 
  var mainTable, t, checkBoxName; 
  var page, msg; 
  page = ASPPage();      
  mainTable = page.formAspnetform.table.cell.panelContent.panel.tableCtl00MaincontentOrdergrid; 
  colN = 0;
  checkBoxName ="ctl00_MainContent_orderGrid_ctl0"+(rowN+1)+"_OrderSelector"; 
 if (mainTable.Cell(rowN, 0).Checkbox(checkBoxName).Exists) 
  { 
    mainTable.Cell(rowN, 0).Checkbox(checkBoxName).ClickChecked(check); 
    if (check) 
    { 
       msg = "The row number "+rowN+ " is checked."; 
       Log.Message(msg); 
    } 
    else 
    { 
      msg = "The row number "+rowN+ " is unchecked."; 
      Log.Message(msg); 
    } 
  } 
}

Entering the Edit Mode for the Specified Row

Checking the ability to modify data in the table is a common testing task. To be able to change data in our table, we should enter the edit mode for the specified row. We can do this by clicking the Edit link in the row. However, to click the link, first we should find the appropriate link within the table:

function EditRow (rowN) 
{ 
  var mainTable, t; 
  var page, msg; 
  page = ASPPage(); 
  mainTable = page.formAspnetform.table.cell.panelContent.panel.tableCtl00MaincontentOrdergrid; 
  if (mainTable.Cell(rowN, 12).WaitImageButton(0,0).Exists) 
  { 
    mainTable.Cell(rowN, 12).ImageButton(0).Click(); 
    msg = "The row number "+rowN+ " is in the edit mode."; 
    Log.Message(msg); 
    return; 
  } 
  else 
  { 
    msg = "Unable to edit a row"; 
    Log.Message(msg); 
    return; 
  }
}

Clicking the Buttons

Our tested page has two buttons - Calc Ages and Clear Ages. We should also check their functionality. To click a button you can use the Click method:

function SelectAll() 
{ 
  var page; 
  page = ASPPage(); 
  var button; 
  button = page.formAspnetform.table.cell.panelContent.linkCtl00MaincontentBtncheckall; 
  button.Click(); 
  Log.Message("All rows were selected.");
} 

function UnselectAll() 
{ 
  var page; 
  page = ASPPage(); 
  var button; 
  button = page.formAspnetform.table.cell.panelContent.linkCtl00MaincontentBtnuncheckal; 
  button.Click(); 
  Log.Message("All rows were unselected.");
} 

function ClickDeleteButton() 
{ 
  var page; 
  page = ASPPage(); 
  var button; 
  button = page.formAspnetform.table.cell.panelContent.submitbuttonCtl00MaincontentBtnd; 
  button.Click(); 
}

Switching Pages

You may also need to switch web pages in your web application. Our application has three pages – Default.aspx, Products.aspx and Process.aspx. On the Default page, there is a table with orders data. The Products page contains a table with a list of products. On the Process page, you can create a new order.

To switch to the needed web page, click corresponding links at the left of the page:

function SwitchToDefaultPage() 
{ 
  var page; 
  page = ASPPage(); 
  var link; 
  link = page.formAspnetform.table.cell_1.linkViewAllOrders;
  link.Click(); 
  Log.Message("The Default.aspx page was opened.")
} 

function SwitchToProductsPage() 
{ 
  var page; 
  page = ASPPage(); 
  var link; 
  link = page.formAspnetform.table.cell_1.linkViewAllProducts;
  link.Click(); 
  Log.Message("The Products.aspx page was opened.")
} 

function SwitchToProcessPage() 
{ 
  var page; 
  page = ASPPage(); 
  var link; 
  link = page.formAspnetform.table.cell_1.linkOrder;
  link.Click(); 
  Log.Message("The Process.aspx page was opened.")
}

You can find the full text of the WorkingWithGrid unit in the source code. You can also use these routines, maybe with some modifications corresponding to peculiarities of your table or grid, in your projects.

Now that all helper routines are implemented, we can construct complete functional tests.

Creating a Script Unit

We will define 6 functional tests in the Tests unit. Each test will check a particular functionality. To start implementing functional tests, we should add a new script unit to the project. To do this, right-click the Script project item and select Add | New Item from the context menu. Specify the unit’s name (Tests) and location in the Create Project Item dialog. Click OK.

Creating a script unit

Picture 6 - Create Project Item Dialog

Now the Tests unit is ready for adding routines.

Writing Functional Tests

Add the following declaration at the beginning of the unit:

//USEUNIT WorkingWithGrid

Now we can write tests using routines defined in the WorkingWithGrid unit. Functional tests are script routines looking like this:

Test 1

// Test 1 -- checks whether data was loaded within the page
function Test1() 
{ 
  // Obtain the page object 
  page = ASPPage(); 
  // Check whether the table exists
  var obj, table, msg, rCount; 
  obj = page.formAspnetform.table.cell.panelContent.panel; 
  if (obj.WaitTable("ctl00_MainContent_orderGrid",0).Exists) 
  { 
    table = obj.WaitTable("ctl00_MainContent_orderGrid",0); 
    msg = "Test1: The ctl00_MainContent_orderGrid table is loaded. "; 
    if (table.RowCount > 0 ) 
    { 
      rCount =table.RowCount-1; 
      msg += "It contains "+rCount+" row(s)."; 
    } 
  } 
  else 
  { msg = "Test1: The ctl00_MainContent_orderGrid table is not loaded or contains no data."; } 
  Log.Message(msg); 
}

Test 2

// Test2 – Paul Brown’s and Clare Jefferson's card numbers 
function Test2() 
{ 
  var data1, data2; 
  data1 = FindValueByKeyValue("Card Number", "Paul Brown"); 
  data2 = FindValueByKeyValue("Card Number", "Clare Jefferson"); 
}

Test 3

//Test3 – selecting and unselecting rows 
function Test3() 
{   
  //now we select and unselect rows number 3, 4, 7 
  SelectRow(3, true); 
  SelectRow(4, true); 
  SelectRow(7, true); 
  
  //unselecting
  SelectRow(3, false); 
  SelectRow(4, false); 
  SelectRow(7, false); 
  
  //checking whether Check All and Uncheck All buttons work correctly
  SelectAll(); 
  UnselectAll();
}

Test 4

// Test4 - Editing the 1st row in the table.
// Checking whether an additional row appears.
function Test4() 
{ 
  var page; 
  page = ASPPage(); 
  var obj = page.formAspnetform.table.cell.panelContent; 
  if (obj.panel.WaitTable("ctl00_MainContent_orderGrid",0).Exists)  
  { 
    EditRow(1);
      if (obj.WaitTable("ctl00_MainContent_fmwOrder",500).Exists)
    {
      var customerName = obj.tableCtl00MaincontentFmworder.cell.textboxCtl00MaincontentFmworderT;
      customerName.SetText("Stan Smith");
      obj.tableCtl00MaincontentFmworder.cell.panelButtonsProcess.linkCtl00MaincontentFmworderUpda.Click();
      if (FindRowNumberByValue("1", "Stan Smith")== 1)
      {
        Log.Message("The row was updated successfully.");
      }
    }
    else
    {
      Log.Message("Edit form was not found.");
    }
  } 
  return; 
}

Test 5

// Test5 – Populating and adding a new order
function Test5()
{
 var page, obj, table, rCount1, rCount2; 
 page = ASPPage(); 
 obj = page.formAspnetform.table.cell.panelContent.panel; 
 if (obj.WaitTable("ctl00_MainContent_orderGrid",500).Exists) 
  { 
   table = obj.WaitTable("ctl00_MainContent_orderGrid",0); 
   rCount1 =table.RowCount-1; 
   Log.Message("The table contains "+rCount1+" row(s)."); 
  } 
  SwitchToProcessPage(); 
  
  // Populating form
  cell = page.formAspnetform.table.cell.panelContent.tableCtl00MaincontentFmworder.cell;
  cell.selectCtl00MaincontentFmworderDd.ClickItem("FamilyAlbum");
  cell.textboxCtl00MaincontentFmworderT1.SetText("5");
  cell.submitbuttonCalculate.Click();
  cell.textboxCtl00MaincontentFmworderT.SetText("Stan Smith");
  cell.textboxCtl00MaincontentFmworderT2.SetText("43, Cherry Street");
  cell.textboxCtl00MaincontentFmworderT3.SetText("Langley Falls");
  cell.textboxCtl00MaincontentFmworderT4.SetText("Virginia");
  cell.textboxCtl00MaincontentFmworderT5.SetText("20050");
  cell.tableCtl00MaincontentFmworderCar.cell.radiobuttonCtl00MaincontentFmwor.Click();
  cell.textboxCtl00MaincontentFmworderT6.SetText("3222322");
  cell.textboxCtl00MaincontentFmworderT7.SetText("12/12");
  cell.panelButtonsProcess.linkCtl00MaincontentFmworderUpda.Click();
  // Check whether a new record was added
  SwitchToDefaultPage();
  if (obj.WaitTable("ctl00_MainContent_orderGrid",500).Exists) 
  { 
   table = obj.WaitTable("ctl00_MainContent_orderGrid",0); 
   rCount2 =table.RowCount-1; 
   Log.Message("The table now contains "+rCount2+" row(s)."); 
   if (rCount2>rCount1)
   {
   Log.Message("A new row was added successfully.");
   }
   else
   {
   Log.Warning("Addition failed.");
   }
  } 
}

Test 6

// Test6 - Clearing the table
function Test6()
{
  var page;
  page = ASPPage(); 
  SwitchToDefaultPage(); 
  SelectAll();
  page.formAspnetform.table.cell.panelContent.submitbuttonCtl00MaincontentBtnd.Click();
Log.Message("All rows were deleted.");
}

After the tests are ready, we will automate the testing process by configuring the project’s test items. You can also record the desired actions with TestComplete and then execute them as functional tests.

Automating Tests

As the tests are ready, we can continue preparing the testing project. Now we should create two simple keyword tests automating the following actions:

  • Launching the browser
  • Loading the page under test
  • Logging into the application
  • Logging out from the application
  • Closing the browser

Launching the Browser and Logging Into the Application

We will use keyword tests only for automating actions over the browser. However, you can implement functional (and any other) tests as keyword tests. In this case, you need not write any script code, you can visually construct tests just by inserting appropriate operations into it.

Now we will implement launching the browser from the RunningBrowser keyword test. To do this, perform the following steps:

  1. Add a new keyword test to the project. For instance, name it "RunningBrowser".
  2. Add the Run Browser operation to the test. Select Internet Explorer:

    Specifying the Internet Explorer as the parameter of the Run Browser operation

    Picture 7 - Specifying the Web Browser for the Run Browser Operation

  3. Then specify the URL to be opened in the web browser:

    Specifying the URL as the parameter of the Run Browser operation

    Picture 8 - Specifying the URL for the Run Browser Operation

  4. Click Finish. Now we can automate starting the browser using this test:

    The RunningBrowser Test

    Picture 9 – Launching Internet Explorer

As you can see, we also added the Log Message operation to post a message to the test log during the execution.

Now we add operations that will log into the opened application. Add the On-Screen action operations that will enter “Tester” into the Username box, “test” into the Password box and click the Login button. We also call the Wait method of the web page to wait for the web page to load.

The RunningBrowser Test

Picture 10 – Logging into the application

Logging Out and Closing the Browser

Now we can automate logging out from the application and closing the browser with another keyword test. Further we will use this test immediately after finishing functional tests:

  1. Add a new keyword test to the project. For instance, name it "ClosingBrowser".
  2. Add the On-Screen Action operation that clicks the “Logout” link.
  3. Add the On-Screen Action operation that closes the browser and save changes to the project.

    The ClosingBrowser test will look like that:

    The ClosingBrowser Test

    Picture 11 – Logging out and closing the browser

Now all testing actions are implemented and everything is ready for functional testing of our web page. We just need to specify a test execution sequence for the project.

Specifying the Project Test Items

We can easily run a group of tests just by running a project. To do this, we should specify the sequence of tests for the project, or, in other words, project test items. You can do this by performing the following actions:

  1. Right-click the ASP.NET_PageTesting in the Project Explorer panel.
  2. Select Edit | Test Items from the context menu. After that the Test Items page will appear:

    Test Items Page

    Picture 12 - The Test Items Page

  3. Click NewItem Button  New Test Item on the toolbar.
  4. Click the ellipsis button in the Test cell. The Select Test dialog will appear.
  5. In the ensuing dialog select the test to be executed. The first test for our project is RunningBrowser:

    Selecting RunningBrowser Test

    Picture 13 - Selecting the RunningBrowser Test

  6. Click OK.
  7. In the same manner, make the list of test items as it is shown in the picture:

Project Test Items

Picture 14 - Project Test Items

Now the testing project is complete, and you can run all these tests just by running the project:

Running the Project

Picture 15 - Running the Project

After we run the project, TestComplete will do the testing job for us: launching the browser, loading the tested page, logging into the application, executing tests, logging out from the application, closing the browser after finishing tests and saving results to the test log. Enjoy testing!

Running ASP.NET Tests

Now we will see how TestComplete automates the testing process.

To start testing, you can just run the ASP.NETPageTesting project. After some time you will get the test execution log:

The Test Log

Picture 16 - The Test Log

This log means that the functional testing of the ASP.NET page has been finished, and you can analyze the obtained results to make an appropriate decision (whether the page works as needed, requires revising and so on). Log messages are organized into groups by test items from which they have been posted (see the picture above).

Conclusion

TestComplete provides useful methods and properties making creation of functional tests easier and more effective. Using TestComplete, you can create powerful automated tests for checking the functionality of dynamic web pages, for instance, ASP.NET pages. You can also easily automate the QA testing process with TestComplete. If you haven't tried TestComplete, start a free trial today and begin your automated functional testing today.