How to extract reliable XPaths for dynamic elements in Angular application for test automation?

I'm working on automating tests for an Angular application (version X.X.X) using [Test Framework Name]. I need to extract XPaths for several dynamic elements that change their attributes between renders.

// Example of current approach
const elementXPath = "//div[@class='dynamic-class-name']/button[contains(text(), 'Submit')]";


However, this breaks frequently as Angular updates the class names or DOM structure. I've also tried:

// Another approach
const elementXPath = "//app-component-name//button";

HTML Structure:


<!-- Include a simplified version of your Angular component HTML -->
<app-form>
<div class="form-container ng-star-inserted">
<div class="input-group dynamic-id-12345">
<button class="btn btn-primary submit-btn-7890">Submit</button>
</div>
</div>
</app-form>

Environment:

• Angular: X.X.X
• Testing Framework: [Name and version]
• Browser: [Chrome/Firefox/etc. and version]

Record Status: *- Select Value - selection required. Query Notification: *0 - NO NOTIFICATION- Select Value -Primary Action: *- Select Value - selection required. Category:- Select Value -Exclusions: - Select Value -Remarks: *0/3000

Continue reading...