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

Question

I'm trying to use Playwright to test an Ionic React app.

Ionic makes extensive use of CSS variables.

My app allows users to change some of these colors, so I want to verify the color changes work properly.

I am trying to find a way to test the value of the CSS variable.

The Ionic CSS looks like this:

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

How can I get the value of --background with Playwright?

Answer 1

This GitHub comment describes how to use getPropertyValue() to get the value of a CSS property. This will also return the computed result for CSS variables:

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