如何使用Playwright确保表格列内文本完全可见？

Playwright的expect(locator).to_be_visible()只会检查元素在DOM中存在且未被CSS（如display: none、visibility: hidden）隐藏，但不会验证文本内容是否因容器宽度不足被截断。要确保人类用户能看到所有字母，需要额外验证文本未被容器截断，以下是几种可靠的实现方式：

方法一：通过元素尺寸对比验证 #

利用元素的scrollWidth（文本实际占据的宽度，包括溢出部分）和clientWidth（容器的可见宽度）进行对比，如果scrollWidth小于等于clientWidth，说明文本完全显示在容器内，没有被截断。

示例代码（Python）：

# 定位目标文本元素
target_text = self.page.locator('text=ABCDEFGHIJKLMNOPQRSTUVWXYZ')
# 执行JS获取元素的尺寸数据
element_dimensions = target_text.evaluate("el => ({scrollWidth: el.scrollWidth, clientWidth: el.clientWidth})")
# 断言文本未被截断
assert element_dimensions["scrollWidth"] <= element_dimensions["clientWidth"], "文本内容被容器截断，用户无法看到全部字母"

如果文本是垂直方向换行后可能溢出（比如容器高度固定），可以用同样的逻辑对比scrollHeight和clientHeight：

element_dimensions = target_text.evaluate("el => ({scrollHeight: el.scrollHeight, clientHeight: el.clientHeight})")
assert element_dimensions["scrollHeight"] <= element_dimensions["clientHeight"]

方法二：验证无文本截断样式 #

如果页面中用text-overflow: ellipsis来处理超长文本，可以额外验证元素的计算样式中没有启用截断效果：

示例代码：

text_overflow_style = target_text.evaluate("el => window.getComputedStyle(el).textOverflow")
assert text_overflow_style != "ellipsis", "文本被省略号截断，用户无法看到全部内容"

这种方法可以和尺寸对比结合使用，进一步确保文本完整可见。

注意事项 #

• 如果表格列设置了white-space: nowrap，文本不会自动换行，此时只需要验证水平方向的尺寸即可。
• 若容器存在内边距（padding），clientWidth已经包含内边距，所以对比逻辑依然准确，无需额外调整。

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