Working With Combo Box Controls in Web Applications

1. Add the On-Screen Action operation to your keyword test. TestComplete will show the Operation Parameters wizard.

2. In the wizard, specify the combo box whose item you want to select. You can do it by pointing to the combo box on the web page.

3. Select the combo box object’s method to call. To simulate selecting an item, use the ClickItem method.

4. Specify either the index of the item to select or its caption.

   Note: The index must be zero-based.

5. Click Finish to add the operation and close the wizard.

Click the image to enlarge it.

To simulate selecting items of a combo box, use the WebComboBoxObj.ClickItem(Item) method.

The script sample below shows how to simulate selecting a combo box item on a web page:

def Sample_SelectItem():
  url = "https://services.smartbear.com/samples/TestComplete15/smartstore/"
  Browsers.Item[btChrome].Run(url)

  cb = Sys.Browser().Page(url).FindElement("#themeName")

  # Select the third item of the Themes combo box
  cb.ClickItem(2)
  # Select the Flex item of the Themes combo box
  cb.ClickItem("Flex")

def Sample_SelectItem():
  url = "https://services.smartbear.com/samples/TestComplete15/smartstore/"
  Browsers.Item[btChrome].Run(url)

  propNames = ["ObjectType", "ObjectIdentifier"]
  propValues = ["Select", "themeName"]
  cb = Sys.Browser().Page(url).FindChildEx(propNames, propValues, 15, True)

  # Select the third item of the Themes combo box
  cb.ClickItem(2)
  # Select the Flex item of the Themes combo box
  cb.ClickItem("Flex")

To get the number of items and store it to a variable, you can use the Set Variable Value operation. For example:

1. Create a variable that will store the number of items. It can be either a keyword variable or a project or project suite variable.

2. In your keyword test, add the Set Variable Value operation. TestComplete will open the Operation Parameter wizard.

3. On the first page of the wizard, select the created variable.

4. On the next page of the wizard, in the Mode drop-down list, select Object Property, and then click the ellipsis button in the Value edit box.

5. In the resulting dialog, click Onscreen Object and then point to the combo box control on the web page.

6. On the next page of the wizard, select the wItemCount property.

7. Click Finish to complete adding the operation.

Click the image to enlarge it.

To get the number of combo box items, use the WebComobBoxObj.wItemCount property. For example, the sample script below shows how to get the number of items and post it to the test log:

def Sample_GetItemCount():
  url = "https://services.smartbear.com/samples/TestComplete15/smartstore/"
  Browsers.Item[btChrome].Run(url)

  cb = Sys.Browser().Page(url).FindElement("#themeName")

  # Post the number of combo box items to the test log
  Log.Message(aqString.Format("The total number of Themes combo box items: %i", cb.wItemCount))

def Sample_GetItemCount():
  url = "https://services.smartbear.com/samples/TestComplete15/smartstore/"
  Browsers.Item[btChrome].Run(url)

  propNames = ["ObjectType", "ObjectIdentifier"]
  propValues = ["Select", "themeName"]
  cb = Sys.Browser().Page(url).FindChildEx(propNames, propValues, 15, True)

  # Post the number of combo box items to the test log
  Log.Message(aqString.Format("The total number of Themes combo box items: %i", cb.wItemCount))

1. Create a variable that will store the caption. It can be either a keyword variable or a project or project suite variable.

2. In your keyword test, add the Set Variable Value operation. TestComplete will open the Operation Parameter wizard.

3. On the first page of the wizard, select the created variable.

4. On the next page of the wizard, in the Mode drop-down list, select Object Property, and then click the ellipsis button in the Value edit box.

5. In the resulting dialog, click Onscreen Object and then point to the combo box control on the web page.

6. On the next page of the wizard, select the wItem property. Then, click param and enter the index of the item. In our example, the index of the first item is 0.

   Note: To get the total number of combo box items, use the wItemCount property.

7. Click Finish to complete adding the operation.

Click the image to enlarge it.

The sample script below shows how to get the caption of the first item of a combo box and post it to the test log:

def Sample_GetItem():
  url = "https://services.smartbear.com/samples/TestComplete15/smartstore/"
  Browsers.Item[btChrome].Run(url)

  cb = Sys.Browser().Page(url).FindElement("#themeName")

  # Post the caption of the first combo box item to the test log
  if (cb.wItemCount > 0):
    Log.Message(cb.wItem[0]);

def Sample_GetItem():
  url = "https://services.smartbear.com/samples/TestComplete15/smartstore/"
  Browsers.Item[btChrome].Run(url)

  propNames = ["ObjectType", "ObjectIdentifier"]
  propValues = ["Select", "themeName"]
  cb = Sys.Browser().Page(url).FindChildEx(propNames, propValues, 15, True)

  # Post the caption of the first combo box item to the test log
  if (cb.wItemCount > 0):
    Log.Message(cb.wItem[0])

To check if the drop-down list is opened or closed and perform various actions depending on the result, you can use the If … Then and Else operations:

1. Add the If … Then operation to your test.

2. Specify the condition that will get the state of the combo box drop-down list and compare it against the expected value:

   1. In the Value 1 column of the Operation Parameters dialog, click the ellipsis button.

   2. In the resulting Edit Value dialog, set the mode to Object Property.

   3. Set the value to Onscreen Object.

   4. Point to the combo box on the web page.

   5. To get the list state, select the wisDropDownOpened property.

   6. Click OK to close the dialog.

   7. In the Value 2 column, enter the baseline value against which the list state will be compared: true for opened and false for closed.

   8. Click OK to save the changes and close the Operation Parameters dialog.

3. To specify operations to run if the check box has the expected state, add them as child items of the If … Then operation. For example, add the On-Screen Action operation as a child item of the If … Then operation and configure it to close the drop-down list if it is opened. Use the CloseUp method to do this.

4. To specify the operation to run otherwise, add the Else operation right after the If … Then operation, and then add the needed operations as child items of the Else operation. For example, add the On-Screen Action operation and configure it to open the drop-down list. Use the DropDown method to do this.

Click the image to enlarge it.