如何区分元素不可见和未渲染？

Question

我正在使用 Playwright 进行测试，需要区分使用 CSS 隐藏的元素（通过

display

、

visibility

、

opacity

等）和根本不渲染的元素，这意味着它不属于DOM。

在 Playwright 文档 toBeHidden 中，它指出：“E确保 Locator 不会解析为任何 DOM 节点，或者解析为不可见的节点。”

const locator = page.locator('.my-element');
await expect(locator).toBeHidden();

从这个测试中，我无法确定

.my-element

是否未渲染或只是隐藏。

Playwright 中有没有办法区分未渲染的元素和通过 CSS 隐藏的元素？

Answer 1

不确定这是否是最佳解决方案，但您可以使用：

await expect(loc).toBeAttached();
await expect(loc).toBeHidden();

如果这两项都通过了——那么它就会被 CSS 隐藏。

还可以添加一层抽象，例如：

await checkMyElementIsHiddenWithCss();

async function checkMyElementIsHiddenWithCss() {
  const locator = page.locator('.my-element');
  await Promise.all([
    expect(loc).toBeAttached(),
    expect(loc).toBeHidden(),
  ]);
}