feat(toHaveCss) Overload toHaveCSS matcher to accept React.CSSProperties #38617

iumehara · 2025-12-19T00:04:08Z

References #35113

Overload toHaveCSS to take styles property (React.CSSProperties) type.
Extend Matchers interface in overrides-test.d.ts to include new signature

utils/generate_types/overrides-test.d.ts

yury-s · 2025-12-19T00:57:40Z

docs/src/api/class-locatorassertions.md


 CSS property value.

+### param: LocatorAssertions.toHaveCSS.styles


You need to update value parameter's type to accept React.CSSProperties rather than add a new parameter.

What makes this a little awkward is that this feature requires less parameters than before. ie. one parameter for the pojo CSS Properties, as opposed to the two parameters for the name and the value.

The current PR handles multiple possible inputs for the first argument (either the name string, or the React.CSSProperties), albeit with some questionable naming.

Should I just delete the overload signatures, and use the main function definition that has union parameters?

Sorry, I was not clear. What I meant is you can use function overload with #1 and #2 suffixes. See ## method: TestInfo.fixme#1 for example. Then first overload will stay as is and the second one will have CSSProperty as the only parameter. Then in the documentation we'd have 2 entries, one per overload (see e.g. https://playwright.dev/docs/api/class-testinfo#test-info-fixme-1), you'd need to make sure that there is proper usage section that presents both signatures. Support of overloaded methods is a bit messy in our API, but CSSPropery is not much different than other overloads, so it should work.

Got it. I kept the existing implementation untouched as the base method, and added the new method definition as #2. This way, the other documentation that references toHaveCSS can remain unchanged.

A couple questions:

I did not add any usage related to non-JS APIs. Is that okay? Given the new CSSProperties parameter type, I wasn't sure how to translate them to different languages.

I set since to v1.58. Is that right?

I did not add any usage related to non-JS APIs. Is that okay? Given the new CSSProperties parameter type, I wasn't sure how to translate them to different languages.

Let's add langs: js to filter it out from other ports. I've added a comment.

I set since to v1.58. Is that right?

Yes.

packages/playwright/src/matchers/matchers.ts

utils/generate_types/overrides-test.d.ts

- revert existing method definition to be the base definition. Add definition#2 that takes CSSProperties - Define CSSProperties type that is React.CSSProperties if react is installed. If not, defaults to an object with string keys

yury-s · 2026-01-05T19:43:44Z

tests/library/unit/string-utils.spec.ts

Remove this, we normally rely on the e2e tests with very rare exceptions for unit tests.

yury-s · 2026-01-05T19:46:47Z

utils/generate_types/overrides-test.d.ts


+// @ts-ignore this will be any if react is not installed
+type ReactCSSProperties = import('react').CSSProperties;
+type FallbackCSSProperties = { [name: string]: string | number | undefined };


This should be something like never when react is missing to indicate the error. We don't want this signature to be used without react.

yury-s · 2026-01-05T19:52:23Z

docs/src/api/class-locatorassertions.md

 * since: v1.18

+## async method: LocatorAssertions.toHaveCSS#2
+* since: v1.20


let's add * langs: js to not have in language ports.

yury-s · 2026-01-05T19:53:07Z

docs/src/api/class-locatorassertions.md

 ### option: LocatorAssertions.toHaveCSS.timeout = %%-js-assertions-timeout-%%
 * since: v1.18

 ### option: LocatorAssertions.toHaveCSS.timeout = %%-csharp-java-python-assertions-timeout-%%


You need to add #1 to the existing toHaveCSS declaration.

Sounds good. I had originally left the original implementation as the base method without the #1 from referring to how toHaveAttribute is implemented.

I updated the referring documentation to point to #1.

yury-s · 2026-01-05T19:55:56Z

docs/src/api/class-locatorassertions.md


 CSS property value.

+### param: LocatorAssertions.toHaveCSS.styles


I did not add any usage related to non-JS APIs. Is that okay? Given the new CSSProperties parameter type, I wasn't sure how to translate them to different languages.

Let's add langs: js to filter it out from other ports. I've added a comment.

I set since to v1.58. Is that right?

Yes.

- give the base implementation a microsoft#1 overload and update referencing documentation - CSSProperties type defaults to never if react is not installed

docs/src/release-notes-js.md

Co-authored-by: Yury Semikhatsky <[email protected]> Signed-off-by: iumehara <[email protected]>

github-actions · 2026-01-12T23:11:23Z

Test results for "tests 1"

1 failed
❌ [playwright-test] › playwright.spec.ts:877 › page.pause() should disable test timeout @macos-latest-node20-1

3 flaky

⚠️ [firefox-library] › library/inspector/cli-codegen-1.spec.ts:1082 › cli codegen › should not throw csp directive violation errors `@firefox-ubuntu-22.04-node20`
⚠️ [firefox-page] › page/page-aria-snapshot-ai.spec.ts:422 › return empty snapshot when iframe is not loaded `@firefox-ubuntu-22.04-node20`
⚠️ [firefox-page] › page/page-wait-for-function.spec.ts:104 › should work with strict CSP policy `@firefox-ubuntu-22.04-node20`

34431 passed, 691 skipped

Merge workflow run.

github-actions · 2026-01-12T23:17:45Z

Test results for "MCP"

1 failed
❌ [chromium] › mcp/test-debug.spec.ts:167 › test_debug (pause/snapshot/resume) @mcp-macos-15

2821 passed, 116 skipped

Merge workflow run.

feat(toHaveCss) Overload toHaveCSS matcher to accept React.CSSProperties

8dc86d7

References microsoft#35113

iumehara commented Dec 19, 2025

View reviewed changes

utils/generate_types/overrides-test.d.ts Outdated Show resolved Hide resolved

yury-s reviewed Dec 19, 2025

View reviewed changes

This comment has been minimized.

Sign in to view

Use numbered overload for CSSProperties implementation

02b8374

- revert existing method definition to be the base definition. Add definition#2 that takes CSSProperties - Define CSSProperties type that is React.CSSProperties if react is installed. If not, defaults to an object with string keys

iumehara force-pushed the 35113-toHaveCSS-reactCSS-overload branch from 2d3bb1a to 02b8374 Compare January 4, 2026 05:36

This comment has been minimized.

Sign in to view

yury-s reviewed Jan 5, 2026

View reviewed changes

Update toHaveCSS to have correct overload syntax

1cc6b7b

- give the base implementation a microsoft#1 overload and update referencing documentation - CSSProperties type defaults to never if react is not installed

iumehara requested a review from yury-s January 8, 2026 03:36

yury-s approved these changes Jan 12, 2026

View reviewed changes

docs/src/release-notes-js.md Outdated Show resolved Hide resolved

Update docs/src/release-notes-js.md

fada6c3

Co-authored-by: Yury Semikhatsky <[email protected]> Signed-off-by: iumehara <[email protected]>


		CSS property value.

		### param: LocatorAssertions.toHaveCSS.styles

feat(toHaveCss) Overload toHaveCSS matcher to accept React.CSSProperties #38617

Are you sure you want to change the base?

feat(toHaveCss) Overload toHaveCSS matcher to accept React.CSSProperties #38617

Uh oh!

Conversation

iumehara commented Dec 19, 2025

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions bot commented Jan 12, 2026

Test results for "tests 1"

Uh oh!

github-actions bot commented Jan 12, 2026

Test results for "MCP"

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants