TL;DR: I want to be able to set some setting somewhere that tells TestComplete to only use the "data-testid" (or any other) attribute to map objects.
What is a data-testid?
We have the data-testid tag on every (important) element on our webpage. This testid is used to uniquely identify an object, meaning no other object on the webpage has this testid.
For example like this:
<fro-input-wrapper data-testid="CONFIG.COMMON.systemName">
<mat-form-field>
<wrapper>
<input>
</wrapper>
</mat-form-field>
</fro-input-wrapper>
This is obviously a very simplified version, but this is how every object looks like. So every button, every text-input, etc has this attribute.
What we currently do
We map our objects using XPath, since it is so much faster at runtime to find the objects. So we have only one selector for every object, since we don't need more than that. So our XPath for finding the object shown before would look like that:
//fro-input-wrapper[contains(@data-testid, 'CONFIG.COMMON.systemName')]//input
The issue is, that when we use the TestComplete Object Spy and hover over the Object shown before, TestComplete searches out what it thinks is best suited for mapping the object. Which is totally random and does not conform to the way we want it (like shown above)
The TestComplete Mapping looks something like that....
... Which is just some random way to identify the object.
So currently what I created is a Template for every object type (inputfield, slide-toggle, button, ...) that we just copy paste and paste in the correct data-testid. This is the most elegant solution that we found and it works sort of well. But I cant think that we are the only ones using some form of testid on our object.
We are thinking about switching to Cypress, since it supports data-testid with a testing-libary, but the issue is that not everyone in our team is a coder and doesn't know how to code in JS.
What we want
A setting to define any attribute (in our case the data-testid) that TestComplete automatically uses to map the objects. I imagine it working something like that:
- Using the Object Spy to hover over an object that I want to map
- TestComplete searches for the data-testid attribute
- If it doesn't find one in exactly the Object that has been selected, it searches upwards in the DOM tree until it finds an object containing that data-testid attribute.
- It uses to object to map the original Object that was hovered over.
I don't think that this would be too hard to implement and it would greatly improve our workflow.,
For any questions regarding the issue, please feel free to ask.
