Angular应用UI输入框文本不在DevTools选择器中，自动化测试如何获取？

问题原因 #

Angular的双向绑定逻辑会将输入框的文本内容存储在DOM元素的动态value属性（property）中，而非HTML标签的静态属性（attribute）里。CSS选择器和Xpath只能匹配HTML标签上的静态属性，因此无法通过这两种方式直接定位或读取输入的文本内容。

解决方法 #

你不需要通过选择器直接匹配文本，先通过输入框的静态属性（如id、class、formControlName、name等，这些属性可在DevTools元素面板中直接查看到）定位到输入框元素，再调用Selenium提供的GetAttribute("value")方法即可拿到动态输入的文本。

C# 代码示例 #

基础读取逻辑

// 定位输入框，此处以formControlName属性为例，可替换为你实际的定位规则
IWebElement targetInput = driver.FindElement(By.CssSelector("input[formControlName='account']"));
// 获取输入框内的动态文本
string inputText = targetInput.GetAttribute("value");
// 可直接用于断言校验
Assert.AreEqual("测试输入内容", inputText);

异步场景兼容（应对Angular双向绑定延迟）

如果存在输入后值未及时更新的情况，可配合显式等待使用：

WebDriverWait wait = new WebDriverWait(driver, TimeSpan.FromSeconds(10));
// 等待输入框值更新为预期内容后再执行后续操作
wait.Until(d => 
    d.FindElement(By.CssSelector("input[formControlName='account']"))
    .GetAttribute("value") == "预期输入内容"
);

注意事项 #

• IWebElement自带的Text属性用于读取元素包裹的内部文本，不适用于输入框的值读取
• 若需获取输入框的占位提示文本，可调用GetAttribute("placeholder")获取

内容的提问来源于stack exchange，提问作者Meg