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?

Patrick Kenny · Accepted Answer · 2022-03-11 03:31:12Z

10

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

answered Mar 11, 2022 at 3:31

Patrick Kenny

6,88519 gold badges67 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related