Hi all! I’m continuing on my journey of creating automated testing for my Ionic/Capacitor app with Maestro. It’s going well but I’m having a slight problem. I want to assign resource id’s to certain elements to be able to easily identify them in the testing tool. I tried adding the following:
<input class="myClass" type="text"
aria-label="competitionCode1"
id="competitionCode2"
resource-id="competitionCode3"
... />
Once my app is built and running, I can query the element hierarchy to see what is generated.
On Android, I get this structure:
{
"attributes" : {
"accessibilityText" : "",
"hintText" : "competitionCode1",
"resource-id" : "competitionCode2",
"text" : "",
...
"class" : "android.widget.EditText"
},
On iOS, I get this structure:
{
"attributes" : {
"accessibilityText" : "competitionCode1",
"hintText" : "",
"resource-id" : "",
"title" : "",
"value" : "",
"text" : "",
...
"checked" : "false"
}
As you can see, aria-label is placed in accessibilityText on iOS, but id and resource-id are ignored. On Android, aria-label is placed in hintText and id is placed in resource-id but resource-id is ignored. Seems weird.
While researching, I have found a number of other similar issues raised by users in the past but no real solution seemed to exist. I tried using aria-label as suggested by some, which worked, but has certain side effects that I’d like to avoid. Ideally, I’d like to be able to set a value in resource-id where it belongs.
I’m wondering if this is a Capacitor related issue or is it a platform specific mapping that is happening by some other component? Why are these values not being mapped the same way? Is there any way to get the resource-id set to my value on iOS?