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

Question

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

Ionic广泛使用CSS变量。

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

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

Ionic CSS如下所示：

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

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

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'),
);