Using Custom Attributes of Web Objects

Using the attribute property, you can access any attribute of the appropriate web object via the dot notation. The dataset property provides access to data custom attributes (data-*).

The following example illustrates how you can receive the data-original-title attribute of the web object:

def Test():
  element = Aliases.browser.pageWebTest.panel
  
  # Get the data-original-title custom attribute via the attributes property
  customAttribute = element.attributes.data_original_title
  # Get the data-original-title custom attribute via the dataset property
  customAttribute = element.dataset.originalTitle

As you can see, TestComplete transforms attribute names:

• For attributes accessed using the attributes property, hyphens are replaced with underscores.

• For attributes accessed using the dataset property, data- are excluded from attribute names and names are converted to the camelCase notation.

In keyword tests, you can retrieve custom attributes and save them to a test variable using the Set Variable Value operation:

Click the image to enlarge it.

1. Select Tools > Current Project Properties from the TestComplete menu.

2. In the tree on the left of the project properties editor, select Open Applications > Web Testing > Custom Attributes.

   

   Click the image to enlarge it.

   By default, the list includes the data-test-id and data-testid attributes. These are the most commonly used attributes in applications created with the React framework.

3. Add custom attributes that you want TestComplete to use as additional name mapping criteria. You can do it in one of the following ways:

   • Click Add on the Custom Attribute page and type a custom attribute name in a new line of the list.

     – or –

   • Click Add From Screen and select the object, whose attributes you want to use, via the Add Web Element Attributes dialog.

     See instructions

     See instructionsSee instructions

     1. Click Add From Screen on the Custom Attributes page, it will invoke the Add Web Element Attributes dialog:

        

        Click the image to enlarge it.

     2. Drag the target icon () to the desired onscreen object.

     3. Wait until the red frame appears around the object and release the mouse button.

        TestComplete will display the selected object in the Object box and the corresponding available object attributes in the Attributes box. For more information on how you can specify an object on the screen, see Add Web Element Attributes Dialog.

        Tips for selecting objects:

        • Using the second approach may be more convenient if you need to manipulate the application before selecting an object. For example, you can open and point to popup windows, tooltips, and other objects that are hidden when being inactive.

        • Instead of selecting the object, you can copy its name from the Object Browser, Object Spy, keyword test, or script code beforehand and paste it into the Object box.

        • To make sure you have selected the correct object, click Highlight. TestComplete will highlight the appropriate object on the desktop screen.

     4. Enable check boxes of the needed object attributes in the Attributes box:

        

        Click the image to enlarge it.

        Note:

        The previously-added attributes are disabled in the Attributes box.

     5. Click OK to apply changes and to close the Add Web Element Attributes dialog.

Click the image to enlarge it.

Custom attributes added to this list will be used as additional name mapping criteria if it is required for the object identification.

To delete the selected custom attributes, click Remove on the Custom Attribute page. Alternatively, you can temporarily disable attributes as additional name mapping criteria by clearing the appropriate check boxes of attributes.

If you want to use the appropriate custom attributes for your newly created projects, specify the needed attributes using the Project > Open Applications > Web Testing > Custom Attributes option on the Default Project Properties page.