[Feature]: Add support to add assertion for css attributes of any element

[vaibhrez12]

🚀 Feature Request

Similar to text/value assertion, it will be helpful to have css assertions for UI elements specially for properties like background-color, font style and font size. Can be extended to other css properties if needed.

Example

Assertion for any element font and background color like below can be helpful in validating css properties.

  await expect(page.locator('#next')).toHaveCSS('background-color', 'rgb(255, 227, 230)');
  await expect(page.locator('#next')).toHaveCSS('font-style', '600 18px / 24px OpenSans, "Segoe UI", SegoeUI, "Helvetica Neue", Helvetica, Arial, sans-serif');
  await expect(page.locator('#next')).toHaveCSS('font-size', '18px');

Motivation

This will help to validate css properties for UI element using record/replay.

[agg23]

From what I can tell you're really interested in codegen capabilities for CSS properties. We discussed this internally. We believe the best solution would be to add an API overload of the form:

const toHaveCSS = (styles: React.CSSProperties) => ...

toHaveCSS({ backgroundColor: "rgb(255, 227, 230)" })

We would then implement support updating of these CSS "snapshots" via -u/--update-snapshots.

This is open to pull requests. If you do decide to work on it, please send two separate PRs (one for adding the toHaveCSS overload, one for adding the snapshot updating capability).

[vaibhrez12]

From what I can tell you're really interested in codegen capabilities for CSS properties. We discussed this internally. We believe the best solution would be to add an API overload of the form:

const toHaveCSS = (styles: React.CSSProperties) => ...

toHaveCSS({ backgroundColor: "rgb(255, 227, 230)" })
We would then implement support updating of these CSS "snapshots" via -u/--update-snapshots.

This is open to pull requests. If you do decide to work on it, please send two separate PRs (one for adding the toHaveCSS overload, one for adding the snapshot updating capability).

Hi - working on this via below #35110. Approach is as below, please see if this works.

• Similar to text assertion, show an icon for css assertion
• For this assertion on selection of element to assert show editable dialog box with default css properties (background-color, font-style and font-size) and values for each.
• User can override the values, add more properties in dialog box and commit - which will inject the assertion steps in script.

[agg23]

The PR does not appear to address the provided API design that I provided. We are only interested in implementing precisely that API. Thank you for your effort and contributions.

[alscotty]

I thought I might take a swing at this, lmk if it's on the right track

[Pedroo123]

From what I can tell you're really interested in codegen capabilities for CSS properties. We discussed this internally. We believe the best solution would be to add an API overload of the form:

const toHaveCSS = (styles: React.CSSProperties) => ...

toHaveCSS({ backgroundColor: "rgb(255, 227, 230)" })
We would then implement support updating of these CSS "snapshots" via -u/--update-snapshots.

This is open to pull requests. If you do decide to work on it, please send two separate PRs (one for adding the toHaveCSS overload, one for adding the snapshot updating capability).

I might take a look at it...
So the goal here, is to overload the toHaveCSS api to accept something like a style property? or a callback?

[agg23]

The goal is to have toHaveCSS take a React style style property that we then update via --update-snapshots if necessary.

[iumehara]

Please let me know if the PR works for you. This PR 1 of 2, which extends the toHaveCSS method.

[yury-s]

@iumehara a few of the tests you added are failing on the bots:

1. firefox beta: https://github.com/microsoft/playwright/actions/runs/20968107189/job/60263940260

[firefox-page] › tests/page/expect-misc.spec.ts:535:7 › toHaveCSS › pass with CSSPProperties object with vendor-prefixed properties

2. On Android bot (internal), we can probably skip the test on Android:

  1) [android-page] › tests/page/expect-misc.spec.ts:523:7 › toHaveCSS › pass with CSSPProperties object 

    Error: expect(locator).toHaveCSS(expected) failed

    Locator:  locator('#node')
    Expected: {"border": "1px solid rgb(0, 255, 0)", "color": "rgb(255, 0, 0)"}
    Received: "0.761905px solid rgb(0, 255, 0)"
    Timeout:  10000ms

Would you mind taking a look?