Text in text input fields in UI Angular application not visible in DevTools selectors – how to reach it in automation tests?

Question

I want to write automation test of input text fields in Angular using C# + Selenium. The problem is that the written text on Angular application in UI is not visible in DevTools, not in input, so automation test cannot reach it via CSS selector or Xpath. How to reach that text in DevTools in automation tests?

Answer 1

Usually, the input field text value is not reflected by element attributes (DOM attributes), so it cannot be tracked by any selector.

But you can find the value in the element property.

To read the value you can invoke getAttribute for WebElement.

driver.findElement(by).getAttribute('value')

If you want to find the particular element by value (use the value as selector), you should get all the elements with the same selector

driver.findElements(by) and then iterate and check getAttribute('value') for match.

It's a generic approach, Angular elements may introduce some differences, but anyway, try to look at the element properties.