在Playwright中如何断言UI图标可见性？两种写法是否正确？

在Playwright中，我需要找到断言下方UI图标是否可见的方法。

对应的HTML和CSS代码：

<div data-testid="icon-container">
  <div class="icon"></div>
</div>

.icon {
 background-image: url("some url")
}

我当前使用的断言方式如下：

await expect(page.getByTestId("icon-container")).toBeVisible();

想确认上述写法是否正确？或者以下写法是否正确？

await expect(page.getByTestId("icon-container").locator("> div"))).toHaveClass(/icon/)

这两种写法都无法完全准确断言图标是否可见，具体问题如下：

• 第一种写法await expect(page.getByTestId("icon-container")).toBeVisible()：
  仅断言了容器<div data-testid="icon-container">本身可见，但无法保证内部的.icon元素的背景图（即图标）确实加载并显示。比如容器可见，但.icon的背景图加载失败、或被CSS隐藏时，这个断言依然会通过。

• 第二种写法await expect(page.getByTestId("icon-container").locator("> div"))).toHaveClass(/icon/)：
  仅检查了子元素是否带有icon类，但类存在不代表元素可见，也不代表背景图已成功加载，同样无法验证图标是否真正显示。

更准确的断言方式 #

要确保图标真正可见（元素可见且背景图加载完成），可以结合以下方式：

方式1：断言元素可见 + 验证背景图属性

const iconLocator = page.getByTestId("icon-container").locator(".icon");
// 先确认元素本身处于可见状态
await expect(iconLocator).toBeVisible();
// 验证背景图URL是否符合预期
const backgroundImage = await iconLocator.evaluate(el => getComputedStyle(el).backgroundImage);
expect(backgroundImage).toContain("some url");

方式2：结合toHaveCSS和可见性断言

const iconLocator = page.getByTestId("icon-container").locator(".icon");
// 验证背景图属性正确
await expect(iconLocator).toHaveCSS("background-image", /some url/);
// 同时确认元素可见
await expect(iconLocator).toBeVisible();

补充说明

toBeVisible()会检查元素是否在视口内、是否有非零尺寸、是否未被display:none/visibility:hidden等属性隐藏，但不会校验背景图的加载状态。如果图标是通过背景图实现的，必须额外验证背景图的存在或加载状态，才能确保图标真正显示在页面上。

内容的提问来源于stack exchange，提问作者utkarsh-k