fix(expect): toHaveCSS with custom CSS properties (#12709)

packages/playwright-core/src/server/injected/injectedScript.ts

@@ -999,7 +999,7 @@ export class InjectedScript {
       } else if (expression === 'to.have.class') {
         received = element.className;
       } else if (expression === 'to.have.css') {
-        received = (window.getComputedStyle(element) as any)[options.expressionArg];
+        received = window.getComputedStyle(element).getPropertyValue(options.expressionArg);
       } else if (expression === 'to.have.id') {
         received = element.id;
       } else if (expression === 'to.have.text') {

tests/playwright-test/playwright.expect.text.spec.ts

@@ -308,9 +308,15 @@ test('should support toHaveCSS', async ({ runInlineTest }) => {
         const locator = page.locator('#node');
         await expect(locator).toHaveCSS('color', 'rgb(255, 0, 0)');
       });
+
+      test('pass with custom css properties', async ({ page }) => {
+        await page.setContent('<div id=node style="--custom-color-property:#FF00FF;">Text content</div>');
+        const locator = page.locator('#node');
+        await expect(locator).toHaveCSS('--custom-color-property', '#FF00FF');
+      });
       `,
   }, { workers: 1 });
-  expect(result.passed).toBe(1);
+  expect(result.passed).toBe(2);
   expect(result.exitCode).toBe(0);
 });