Playwright测试时DOM元素无innerText如何获取目标值99

innerText()、textContent()以及Playwright自带的toHaveText()断言，都只能读取DOM树中存在的文本节点内容。你拿不到值99，说明这个值根本没有写入DOM文本节点，最常见的场景是值通过CSS伪元素（::before/::after）的content属性渲染，其次是值存放在表单控件的value属性、元素自定义属性、封闭Shadow DOM内部，没有暴露为普通DOM文本。

根据值的存放位置选择对应Playwright写法：

• 伪元素渲染的场景（占这类问题90%以上）
  用getComputedStyle读取伪元素的content属性，注意接口返回的content默认包裹引号，需要做替换处理：

  // 读取::after伪元素的内容，读::before就把第二个参数改成'::before'
  const targetVal = await page.locator(element).evaluate(el => {
    return window.getComputedStyle(el, '::after').content.replaceAll(/'|"/g, '')
  })
  await expect(targetVal).toBe('99')
  

• 表单控件（input/textarea等）存值的场景
  直接调用Playwright封装的inputValue()方法读取控件值：

  const targetVal = await page.locator(element).inputValue()
  await expect(targetVal).toBe('99')
  

• 值挂在元素自定义属性上的场景
  很多组件会把数值存在data-count、data-value这类自定义属性上，直接读取对应属性即可：

  // 替换成你实际看到的属性名
  const targetVal = await page.locator(element).getAttribute('data-value')
  await expect(targetVal).toBe('99')
  

打开浏览器开发者工具选中目标元素，在Elements面板核对即可快速匹配场景：

• 元素节点下挂着::before/::after标记，点开后能看到content值为99，对应伪元素场景
• 选中的是input/textarea类表单标签，在Properties面板能看到value字段为99，对应表单控件场景
• 元素开标签上有自定义属性存储了99，对应属性读取场景

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