1. 为什么在前端自动化测试场景中关注 DOM 元素的 value 属性
1.1 value 属性的作用与常见测试场景
在前端自动化测试中，DOM 元素的 value 属性记录了用户对输入控件的当前值，是对表单状态进行断言的关键指标。对于文本框、密码框、隐藏域、单选/多选框和下拉选，其 value 的正确性直接关系到后续提交的数据正确性。通过对比期望值与实际取值，测试用例可以覆盖典型的用户行为路径并快速定位回归点。
此外，动态渲染的页面会持续改变控件的 value，测试框架需要具备对该属性的"实时"读取能力，以实现快速断言与等待条件，从而提升测试效率和稳定性。
1.2 Playwright 提供的高效获取方式
在 Playwright 的端到端测试中，获取 DOM 元素的 value 值通常通过定位器（Locator）结合专用方法来实现。这样的设计能让代码更直观、稳定，且对不同控件类型具有一致的读取语义。核心点在于尽可能直接从控件本身获取当前值，而不是通过多次改动后推断结果。
通过 Locator.inputValue()、evaluate 等方式，可以在不同场景中灵活读取值，既支持文本输入框，也能覆盖下拉框和其他表单控件的当前值，降低实现细节的耦合。
1.3 如此获取的优势在于测试稳定性与可维护性
使用统一的 API inputValue() 可以跨控件类型获取当前值，减少对具体实现的依赖，从而提高测试用例的可维护性。对于包含多控件的表单页面，一致性与对跨浏览器兼容性的关注，是提升自动化测试鲁棒性的关键。
总之，关注 value 属性并通过 Playwright 的专用 API 来获取，是实现高效前端自动化测试的基石之一。下面将介绍如何在实际场景中快速上手这类能力。
2. 快速获取元素的 value 值的核心 API
2.1 使用 Locator.inputValue()
对于前端自动化测试场景，这是最直观、最可靠的读取方式。Locator.inputValue() 会返回目标表单控件的当前文本值，适用于文本输入框、文本区域、下拉框等多种控件，并且能够与等待条件组合使用以提升稳定性。
在实际断言中，你通常会先执行一些操作（如填充、触发事件），再通过 inputValue() 获取最终的值以验证业务逻辑是否正确执行。
// 使用 Locator.inputValue() 获取输入框当前值
const value = await page.locator('#username').inputValue();
console.log('用户名当前值:', value);// 等待输入框的值在一定条件下达到期望值
await page.waitForFunction(() => document.querySelector('#username').value === 'alice');
const finalValue = await page.locator('#username').inputValue();
2.2 通过 evaluate 获取属性值
在某些场景，直接从 DOM 派生属性值更加灵活，尤其是自定义控件或复杂组件时，可以通过 evaluate 来读取 el.value 等属性，得到即时的原始值。
使用 evaluate 的方式虽然更接近底层 DOM，但在某些场景下能够覆盖定位器的行为差异，确保取得到的值与页面渲染一致。
const value = await page.locator('#username').evaluate(el => el.value);
3. 进阶场景：多元素、动态更新、表单提交后的校验
3.1 动态页面中的 value 变化监听
在动态加载或更新的页面中，控件的值可能在用户操作后才改变。此时需要结合等待条件来确保在读取 value 之前，值已经更新到目标状态。可以使用页面级等待函数结合定位器来实现。
示例场景包括：触发操作后等待值变化为期望值，再进行断言，确保 UI 与业务状态的一致性。
// 触发一个事件后再读取新值
await page.click('#load-btn');
await page.waitForFunction(() => {const el = document.querySelector('#dynamic-input');return el && el.value === 'done';
});
const dynamicVal = await page.locator('#dynamic-input').inputValue();
3.2 多元素统一取值的方法
在页面存在一组具有相同结构的输入框时，需批量读取它们的当前值以进行对比或聚合。可以通过遍历定位组合的方式，逐个读取并汇总值。此处的实现思路是先获取元素数量，再逐个读取每个元素的 value。
// 读取同一组输入框的所有值
const count = await page.locator('input[name="item"]').count();
const values = [];
for (let i = 0; i < count; i++) {const val = await page.locator('input[name="item"]').nth(i).inputValue();values.push(val);
}
console.log(values);
4. 性能与鲁棒性考虑
4.1 避免过度依赖属性获取
频繁地读取 DOM 值可能带来额外的页面上下文切换成本，影响测试执行速度与稳定性。应将读取操作尽量聚合或按需触发，并在必要时使用批量读取来降低等待带来的开销。通过 Promise.all 的并发执行，可以提升批量读取的效率。
例如，在读取多输入控件的值时，可以一次性发起多项读取请求，而不是串行等待每一个读取完成后再继续下一步，能显著减少总耗时。
// 批量读取以减少等待开销
const count = await page.locator('input').count();
const reads = Array.from({ length: count }).map((_, i) =>page.locator('input').nth(i).inputValue()
);
const values = await Promise.all(reads);
4.2 与前端框架的耦合注意事项
对于由框架（如 React、Vue、Angular）驱动的受控组件，控件的 value 可能随状态管理而变化。测试时应确保在读取之前完成相关状态更新并触发必要的重新渲染，避免读取到旧值或未更新的值。通过搭配事件触发、等待条件以及断言组合，可以提升对这类场景的鲁棒性。
5. 常见坑与解决办法
5.1 浏览器差异与等待策略
不同浏览器对某些控件的实现与行为可能存在细微差异，直接读取 value 时需谨慎，避免因为浏览器渲染时序不同而导致的断言失败。引入明确的等待条件和跨浏览器对齐策略，是提升稳定性的关键。
解决思路包括：在断言前等待控件可见、可交互，并在必要时使用页面级等待函数来确保值已经更新到目标状态。
// 跨浏览器场景的稳健做法
await page.locator('#city').waitFor({ state: 'visible' });
const val = await page.locator('#city').inputValue();
5.2 读取隐藏字段的技巧
某些情况下需要读取隐藏字段的值，例如 token、密钥等。此时 evaluate 可以直接从 DOM 中获取隐藏字段的 value，以确保读取的是最新绑定的数值。
const hiddenVal = await page.locator('input[type="hidden"][name="token"]').evaluate(el => el.value);
