Working With Image Set Editor

Applies to TestComplete 15.20, last modified on January 19, 2022

This topic describes tasks that you can accomplish with the Image Set editor.

Working with Items List

Renaming Items

  1. In the Items list on the left of the editor, select the needed item.

  2. Type the new name in the Item Name text box on the right of the editor.

    Press Enter to confirm, or Esc to discard the changes.

Notes:

  • You use the item name to address the item in tests. If you rename an item, TestComplete will suggest updating user action operations that use the item in your keyword tests automatically. If you have other keyword test operations (or script code) that use the item, you will have to update them manually.

  • The item name must be a valid script identifier. The scripting languages supported by TestComplete use slightly different naming rules. To choose the name that will be valid in any language, enter the name that contains only letters, digits or underscore characters and starts with a letter.

Highlighting Items on Screen

To check whether a control or a screen area that corresponds to the selected item is currently displayed on the screen:

  1. Right-click the desired item on the list. Select Highlight on from the context menu and then select a device.

    To highlight the image on your current PC desktop, select Computer’s Desktop.

    To highlight the image on the screen of a connected mobile device, select the needed device. TestComplete will open the Mobile Screen window.

  2. TestComplete will search the screen of the selected device for the needed image.

  3. If it finds the item, it will mark it with a flashing red frame on the desktop (for PC) or in the Mobile Screen window (for mobile devices).

Note: This command may take long to complete. This may happen if you set a high Pixel tolerance value. For more information, see Possible Issues.

Adding Items

Adding Items From Screen

  1. (For mobile applications) Start your mobile device or virtual machine and connect TestComplete to it.

    Note: If you are working with an iOS device, your application must be prepared for testing. Otherwise, TestComplete will not be able to access the device’s screen.

  2. Launch your application and open the screen that contains the desired control.

  3. In the Image Set editor, right-click somewhere in the Items list and choose Add Item from the context menu. This will invoke the Add Image to Image Repository wizard.

  4. Command the wizard to select the image from your desktop or select the mobile device, from which you want to capture the image.

  5. The wizard will show the screen of your selected mobile device or a desktop with a red selection rectangle on it.

    Click the needed control. If the click coordinates correspond to an accessibility element, the wizard will highlight the element with a red frame.

    Note: Recognizing an object at the point of the click may take some time. Please wait if necessary.

    If TestComplete cannot recognize the element, select the needed recognition area manually by moving the red frame borders.

    Click Next to confirm your selection.

  6. Specify the item name and description (if needed).

  7. Click Finish. The new item will be added to the item list.

Adding Items From Files

You can add control images from GIF, PNG, BMP and JPG files:

  1. In the Image Set editor, right-click somewhere in the Items list, choose Add Item From File from the context menu and then select one or more image files in the Open File dialog.

    — or —

    Select one or more image files in Windows Explorer or in any other file manager and drag them to the Items list of the Image Set editor in TestComplete.

  2. TestComplete will show the Add Image to Image Repository wizard.

  3. If you have selected several image files, specify whether the images will be associated with a single or multiple Image Repository items.

  4. Specify the item name.

    Note: The item name must be a valid script identifier. See the note about this above.

  5. Specify the control’s recognition area and other recognition parameters.

  6. Click Finish to complete adding the images.

TestComplete will add the image or images to the Items list.

Deleting Items

  1. In the Items list on the left of the Image Set editor, select the desired item. You can use Ctrl- or Shift-click for multi-selection.

  2. Right-click the selection and choose Delete from the context menu. TestComplete will ask for your permission to delete the object. Confirm the deletion.

Working with Image Strip

Adding Images to the Image Strip

The Image Strip panel contains a collection of screenshots of the selected control made with various screen resolutions, screen orientations, UI themes and so on. The more variants of the needed control you add to the Image Strip panel, the easier it will be to find it in various environments.

Adding Images From Screen

  1. (For mobile applications) Start your mobile device or virtual machine and connect TestComplete to it.

    Note: If you are working with an iOS device, your application must be prepared for testing. Otherwise, TestComplete will not be able to access the device’s screen.

  2. Launch your mobile application and open the application screen that contains the control (or object) whose image you would like to update.

  3. In the Items list of the Image Set editor, select the item that corresponds to the desired control. Switch to the Image Strip.

  4. Right-click somewhere within the Image Strip and choose Add Image from the context menu.

    TestComplete will open the Add Image to Image Repository wizard.

  5. Select the mobile device, on the screen of which you want to capture the image, or command the wizard to capture the image from your PC desktop.

  6. The wizard will show the screen of your selected mobile device or PC desktop with a red selection rectangle on it.

  7. Click the needed control. If the click coordinates correspond to an accessibility element, the wizard will highlight the element with a red frame.

    Note: Recognizing an object at the point of the click may take some time. Please wait if necessary.

    If TestComplete cannot recognize the element, select the needed recognition area manually by moving the red frame borders.

    Click Next to confirm the choice.

  8. On the last page of the wizard, modify the recognition parameters, if needed.

  9. Click Finish to complete the addition. You will see the new image in the Image Strip.

Adding Images From Files

You can add images from GIF, PNG, BMP and JPG files:

  1. Select the desired item in the Items list in the left part of the Image Set editor. Switch to the Image Strip panel.

  2. Right-click somewhere within the Image Strip panel and choose Add Image From File from the context menu and then select one or more image files in the Open File dialog.

    — or —

    Select one or more image files in Windows Explorer or in any other file manager and drag them to the Image Strip panel of the Image Set editor in TestComplete.

  3. TestComplete will open the Add Image to Image Repository wizard.

    Follow the wizard instructions to specify the control's recognition area and other recognition parameters.

  4. Click Finish to complete adding the item(s). You will see the new item(s) in the Image Strip collection.

Deleting Images From Image Strip

  1. Select the desired item in the Items list on the left of the Image Set editor and then choose the desired image in the Image Strip. You can use Ctrl- and Shift-click for multiselection.

  2. Right-click the selected image and choose Delete Image from the context menu. TestComplete will ask for your permission to delete the image. Confirm the deletion.

Updating Images in Image Strip

TestComplete uses Image Strip images to search for a control in image-based tests. You may need to update captured images:

  • Update the control images if the user interface of the application under test has changed.

  • Exclude minor elements that make it difficult to recognize an image. An example of such elements is a caret in edit boxes, semitransparent borders of controls, regions with varying data: date and time, battery level, and so on.

  • Include some supplementary elements in order to avoid ambiguous recognition of the control. An example of such supplementary elements is a label next to a check-box, radio-buttons and sliders.

Recapturing Control Images

If the user interface of the tested application has changed significantly, the best solution is to recapture the images of the changed controls:

  1. Run your application and add a new image for the desired control to the Image Strip.

  2. Then, you can remove unneeded images from the Strip.

For step-by-step instructions, see Adding Images to the Image Strip and Deleting Images From the Image Strip.

Adjusting Image Recognition Area

If a control’s image includes some parts that may hamper image recognition, or may result in ambiguous recognition of the control during the test run, you need to adjust the area used for image-based recognition:

  1. Select the desired control image in the Image Strip. The Preview box will display the screen and the control on it. The red frame around the control indicates the current recognition area.

  2. If needed, zoom in or zoom out the image in the Preview area to get a better look of the screen and the control.

  3. Adjust the red frame’s borders or drag the entire frame while holding the CTRL or the right mouse button to change the control’s recognition area.

Working with Image Preview

Zooming in and Zooming Out Image Preview

Use the zoom slider or Zoom In and Zoom Out commands to change the scale of the image.

To set the image scale to 100%, click Zoom Default.

To change the image scale so that it fits the Preview area bounds, click Best Fit.

To zoom in the recognition area, click on the toolbar .

Modifying Recognition Area

Adjust the bounds of the recognition area to include or exclude areas you want to use to recognize the image on the screen.

Rearranging Images and Items

Copying, Cutting and Pasting Images

You can move or copy images from one item to another by using the Cut, Copy, Paste context menu commands, or by dragging images from one item to another.

Note: When you copy or move an image, TestComplete checks whether the target Image Strip collection already has images with the same recognition area. If it has, the source image will not be moved.

Merging Images

You can merge items, that is, move all the images from the source item to the destination item. To do it, drag the source item and drop it onto the destination item.

Merging items can be useful, for instance, to group similar controls.

Note: After you merge items, you will have to replace the source item’s name with the target item’s name in your tests. Otherwise, your tests will not be able to find the needed object.

Specifying Item Parameters

You can set parameters of the Image Set items, as well as Image Strip collection images. The parameters specify how TestComplete will search for control images on the screen. To learn more about parameters and how they affect the recognition, see —

Image Set Item Properties

Setting Recognition Parameters for Multiple Items at Once

  1. Select the desired items or images (in the Items list or in the Image Strip panel respectively). Use a Ctrl- or Shift-click for multiselection.

  2. Right-click the selection and choose Set Recognition Parameters from the context menu.

  3. In the ensuing Set Recognition Parameters dialog, specify the desired values for the recognition parameters. The parameter values will be assigned to all the chosen images.

Saving the Changes

To save the changes you made in the Image Set editor, choose File | Save from the TestComplete main menu.

To cancel the changes, simply close the editor and answer “No” when TestComplete asks you whether to save the changes.

See Also

Image Set Editor
Image-Based Testing

Highlight search results