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

Question

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

Ionic makes extensive use of CSS variables.

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

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

Ionic CSS 看起来像这样：

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

如何使用 Playwright 获取 --background 的值？

Answer 1

This GitHub comment描述了如何使用getPropertyValue()获取CSS属性的值。这也将 return CSS 个变量的计算结果：

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

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

How to get the computed value of a CSS variable in Playwright?

playwright

css-variables