Data Test Id for Web Elements

[vikas_agarwal]

Hi,

For Desktop:

How we can add test id to the Page Visuals?

For Apps:

How we can add test id to the menu options?

or any other alternative to make automation smooth?

[vikas_agarwal]

document.getElementsByClassName("visualContainerGroup")

gives all the visuals on the page.

In Developer Tools,

I also see name attribute being part of the div, looks like auto generated.

I further checked in (report.json) .pbib file that name is generated when the instance is created, seems it is same  as div attribute value.

data-testid are present with common values.

For e.g. if we want to get the title of a card.

document.getElementsByName("d6c41b97a22e0323e04d")[0].querySelectorAll("[data-testid='visual-title']");

where d6c41b97a22e0323e04d is a name field.

Can someone confirm, this is the right way or other standard way (API) exists?

[vikas_agarwal]

Hi Yolo,

You can check more details about test id on:

https://www.educative.io/answers/what-is-the-data-testid-attribute-in-testing

Let's take a simple use case of a card visual.

From the Testing perspective. Testcase will verify Title, Text value. 

Interested path will be to search element id (or data-testid) by the card and then sub sections.

[v-xinruzhu-msft]

Hi @vikas_agarwal 

What is the testid you want to display, can you provide some sample data or the output you want? so that can provide more suggestion for you.

Best Regards!

Yolo Zhu