Working With List 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 list box whose item you want to select. You can do it by pointing to the list box on the web page.

3. Select the list 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 list box, use the WebListBoxObj.ClickItem(Item) method.

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

def Sample_SelectItem():
  url = "https://yari-demos.prod.mdn.mozit.cloud/en-US/docs/Learn/Forms/Other_form_controls/_sample_.Multiple_choice_select_box.html"
  Browsers.Item[btChrome].Run(url)

  lb = Sys.Browser().Page(url).FindElement("#multi")

  # Select the item "Carrot" of the list box
  lb.ClickItem("Carrot")

def Sample_SelectItem():
  url = "https://yari-demos.prod.mdn.mozit.cloud/en-US/docs/Learn/Forms/Other_form_controls/_sample_.Multiple_choice_select_box.html"
  Browsers.Item[btChrome].Run(url)

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

  # Select the item "Carrot" of the list box
  lb.ClickItem("Carrot")

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

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

3. Select the list box object’s method to call. To simulate selecting multiple items, use the ClickItem or Multiselect method.

4. If you are using the ClickItem method, specify the caption or the index of the list box item. Specify the keyboard key to be pressed when selecting the item. Typically, it can be the Ctrl key or the Shift key.

   If you are using the Multiselect method, specify the items to select. It can be either an array of item captions or a string containing the captions of items to select, separated with a delimiter character.

   Note: To learn which delimiter character to use, check the wListSeparator property of the Web List Box object.

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

6. If you are using the ClickItem method to select multiple items, repeat the steps above to add more operations that will simulate selecting other items.

Click the image to enlarge it.

The script sample below shows how to simulate selecting multiple list box items by using the ClickItem and Multiselect methods:

def Sample_MultiSelectItems():
  url = "https://yari-demos.prod.mdn.mozit.cloud/en-US/docs/Learn/Forms/Other_form_controls/_sample_.Multiple_choice_select_box.html"
  Browsers.Item[btChrome].Run(url)

  lb = Sys.Browser().Page(url).FindElement("#multi")

  # Select the first item and the item "Potato" of the list box
  # by using the ClickItem method
  lb.ClickItem(0, skCtrl)
  lb.ClickItem("Potato", skCtrl)

  # Select the "Banana" and " Cherry" items of the list box
  # by using the Multiselect method
  lb.Multiselect("Banana;Cherry")

def Sample_MultiSelectItems():
  url = "https://yari-demos.prod.mdn.mozit.cloud/en-US/docs/Learn/Forms/Other_form_controls/_sample_.Multiple_choice_select_box.html"
  Browsers.Item[btChrome].Run(url)

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

  # Select the first item and the item "Potato" of the list box
  # by using the ClickItem method
  lb.ClickItem(0, skCtrl)
  lb.ClickItem("Potato", skCtrl)

  # Select the "Banana" and " Cherry" items of the list box
  # by using the Multiselect method
  lb.Multiselect("Banana;Cherry")

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 list box items, use the WebListBoxObj.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://yari-demos.prod.mdn.mozit.cloud/en-US/docs/Learn/Forms/Other_form_controls/_sample_.Multiple_choice_select_box.html"
  Browsers.Item[btChrome].Run(url)

  lb = Sys.Browser().Page(url).FindElement("#multi")

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

def Sample_GetItemCount():
  url = "https://yari-demos.prod.mdn.mozit.cloud/en-US/docs/Learn/Forms/Other_form_controls/_sample_.Multiple_choice_select_box.html"
  Browsers.Item[btChrome].Run(url)

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

  # Post the number of list box items to the test log
  Log.Message(aqString.Format("The total number of list box items: %i", lb.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 list 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 list 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 list box and post it to the test log:

def Sample_GetItem():
  url = "https://yari-demos.prod.mdn.mozit.cloud/en-US/docs/Learn/Forms/Other_form_controls/_sample_.Multiple_choice_select_box.html"
  Browsers.Item[btChrome].Run(url)

  lb = Sys.Browser().Page(url).FindElement("#multi")

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

def Sample_GetItem():
  url = "https://yari-demos.prod.mdn.mozit.cloud/en-US/docs/Learn/Forms/Other_form_controls/_sample_.Multiple_choice_select_box.html"
  Browsers.Item[btChrome].Run(url)

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

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

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 list box control on the web page.

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

7. Click Finish to complete adding the operation.

Click the image to enlarge it.

The sample script below shows how to get the list of items selected in a list box and post them to the test log:

def Sample_GetSelectedItems():
  url = "https://yari-demos.prod.mdn.mozit.cloud/en-US/docs/Learn/Forms/Other_form_controls/_sample_.Multiple_choice_select_box.html"
  Browsers.Item[btChrome].Run(url)

  lb = Sys.Browser().Page(url).FindElement("#multi")

  # Select several items in the list box
  lb.Multiselect("Banana;Cherry;Potato")

  # Get the list of selected items
  items = lb.wSelectedItems
  delimiter = lb.wListSeparator
  aqString.ListSeparator = delimiter

  # Post selected items to the test log
  for i in range (0, aqString.GetListLength(items) - 1):
    Log.Message(aqString.GetListItem(items, i))

def Sample_GetSelectedItems():
  url = "https://yari-demos.prod.mdn.mozit.cloud/en-US/docs/Learn/Forms/Other_form_controls/_sample_.Multiple_choice_select_box.html"
  Browsers.Item[btChrome].Run(url)

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

  # Select several items in the list box
  lb.Multiselect("Banana;Cherry;Potato")

  # Get the list of selected items
  items = lb.wSelectedItems
  delimiter = lb.wListSeparator
  aqString.ListSeparator = delimiter

  # Post selected items to the test log
  for i in range (0, aqString.GetListLength(items) - 1):
    Log.Message(aqString.GetListItem(items, i))

To check if an item of a list box is selected and simulate 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 list box item 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 list box on the web page.

   5. To get the list state, select the wSelected property. Then, click param and enter the index of the item. In our example, we will check the state of the first item in the list. Its index is 0.

   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 selected and false for not selected.

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

3. To specify operations to run if the list item has the expected state, add them as child items of the If … Then operation.

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.

Click the image to enlarge it.