Playwright 如何获取元素属性中的文本值并完成断言验证？

我测试的应用里有一个自由文本字段，需要输入文本并断言其值。定位字段和输入文本都没问题，初始状态下能验证字段可见且内容为空：

textField = page.Locator("div[data-ph-key='Default textarea'] textarea")

await Expect(textField).ToBeVisibleAsync();
await Expect(textField).ToHaveTextAsync("");

但输入新文本后检查字段值时测试失败，实际值显示为空字符串：

await textField.TypeText("test string");
await Page.Keyboard.PressAsync("Enter");
await Expect(textField).ToContainTextAsync("test string");

排查发现，DOM没有直接更新输入的新字符串值，而是在元素的properties标签页里更新了value属性。

请问有没有办法获取这个文本值来写断言？

以下是我用的测试代码：

public async Task CheckTextEntry()
{
    await Page.ClickAsync("text='Textarea'");
    // 创建页面对象实例
    TextAreaPage textAreaPage = new TextAreaPage(Page);
    // 检查默认文本框可见且为空
    Expect(textAreaPage.DefaultTextFieldValue).ToBeVisibleAsync();

    await Expect(textAreaPage.DefaultTextFieldValue).ToHaveTextAsync("");
    // 输入文本
    await textAreaPage.TypeText(textAreaPage.DefaultTextField, "my text value");
    // 按Enter以更新元素properties里的原生文本值
    await Page.Keyboard.PressAsync("Enter");
    // 尝试验证新文本值
    await Expect(textAreaPage.DefaultTextField).ToHaveJSPropertyAsync("value", "my text value");
}

对于这种DOM不更新innerHTML，但通过元素value属性存储输入内容的情况（常见于原生textarea或自定义封装的输入组件），可以用以下几种方式断言：

1. 使用Playwright专属的输入值断言方法 #

Playwright提供了ToHaveInputValueAsync方法，专门用于断言输入框的value属性值，是最直接的方案：

await Expect(textField).ToHaveInputValueAsync("my text value");

2. 断言元素的JS属性 #

如果需要针对特定属性做断言，可以用ToHaveJSPropertyAsync，注意确保属性名正确（比如原生输入框是value）：

await Expect(textField).ToHaveJSPropertyAsync("value", "my text value");

3. 手动获取属性值后断言 #

如果需要更灵活的逻辑处理，可以直接读取属性值再用测试框架的断言方法验证：

// 方式1：通过GetAttributeAsync获取
string actualValue = await textField.GetAttributeAsync("value");
// 方式2：通过JS表达式获取
string actualValue = await textField.EvaluateAsync<string>("el => el.value");

// 用xUnit/NUnit等框架的断言
Assert.Equal("my text value", actualValue);

关键注意点 #

• 不要用ToHaveTextAsync或ToContainTextAsync，这两个方法检查的是元素的DOM文本内容（innerHTML/textContent），而输入框的用户输入值通常存在value属性中，和DOM文本无关
• 如果是自定义封装的组件，需确认实际存储值的属性名（比如部分Vue组件用modelValue），可以通过浏览器DevTools的Elements面板→Properties标签查看具体属性

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