如何在 Playwright 中获取 CSS 变量的计算值？

Question

我正在尝试使用 Playwright 来测试 Ionic React 应用程序。

Ionic 广泛使用 CSS 变量。

我的应用程序允许用户更改其中一些颜色，因此我想验证颜色更改是否正常工作。

我正在尝试找到一种方法来测试 CSS 变量的值。

Ionic CSS 看起来像这样：

ion-header ion-toolbar {
  --background: var(--ion-color-secondary);
}

--background我如何才能获得Playwright的价值？

Answer 1

此 GitHub 评论描述了如何使用getPropertyValue()来获取 CSS 属性的值。这还将返回 CSS 变量的计算结果：

  const navBar = await page.locator('ion-header ion-toolbar >> visible=true');
  const color = await navBar.evaluate((element) =>
    window.getComputedStyle(element).getPropertyValue('--background'),
  );