Automating in Selenium with C# an Angular 6 page that has no fixed element

Question

Good afternoon, I am trying to create some automated tests on a page that does not have fixed Ids, the only safe way is being Xpath but the same will change as soon as a new button enters. Currently one of the lines of code I use is WaitVisible(By.CssSelector("#mat-tab-label-0-1 > div)); but often this 0-1 changes to 1-1, 2-1, and the test breaks.

<div cdkmonitorelementfocus="" class="mat-tab-label mat-ripple ng-star-inserted" mat-ripple="" mattablabelwrapper="" role="tab" ng-reflect-disabled="false" id="mat-tab-label-2-1" tabindex="-1" aria-posinset="2" aria-setsize="2" aria-controls="mat-tab-content-2-1" aria-selected="false" aria-disabled="false"><div class="mat-tab-label-content"><!--bindings={}--><!--bindings={"ng-reflect-ng-if": "true"}-->Ranking</div></div> This is the element that I need Selenium to look at, as you can see, the ID is already mat-tab-label-2-1, so it’s unreliable, there’s some way to get a fixed element in Angular 6?

Answer 1

I don’t understand Angular, but you can try to capture the element through ways other than ID.

How to capture all elements containing this class, and select only the first, the last, or as desired.

You can also add a custom attribute to this element, and capture the elements that contain this attribute.

Or capture all child elements of a div, and capture in the order you want, according to the structure of the HTML page.