代码之家 › 专栏 › 技术社区 › Patrick Kenny

如何在Playwright中获得CSS变量的计算值?

css-variables playwright

0

Patrick Kenny · 技术社区 · 3 年前

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

Ionic makes extensive use of CSS variables.

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

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

Ionic CSS如下所示:

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

我如何获得 --background 和剧作家在一起?

1 回复 | 直到 3 年前

1

6

Patrick Kenny 3 年前

This GitHub comment 描述如何使用 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'),
  );