feat(expect): support pseudo-element in toHaveCSS (#40092)

Co-authored-by: Claude <noreply@anthropic.com>

Author: JustasMonkev

docs/src/api/class-locatorassertions.md

@@ -1747,6 +1747,12 @@ CSS property name.
 
 CSS property value.
 
+### option: LocatorAssertions.toHaveCSS.pseudo
+* since: v1.60
+- `pseudo` <[PseudoElement]<"before"|"after">>
+
+Pseudo-element to read computed styles from.
+
 ### option: LocatorAssertions.toHaveCSS.timeout = %%-js-assertions-timeout-%%
 * since: v1.18
 

packages/injected/src/injectedScript.ts

@@ -1612,7 +1612,7 @@ export class InjectedScript {
           matches: new ExpectedTextMatcher(options.expectedText[0]).matchesClassList(this, element.classList, /* partial */ expression === 'to.contain.class'),
         };
       } else if (expression === 'to.have.css') {
-        received = this.window.getComputedStyle(element).getPropertyValue(options.expressionArg);
+        received = this.window.getComputedStyle(element, options.pseudo ? `::${options.pseudo}` : undefined).getPropertyValue(options.expressionArg);
       } else if (expression === 'to.have.id') {
         received = element.id;
       } else if (expression === 'to.have.text') {

packages/playwright-core/src/protocol/validator.ts

@@ -1999,6 +1999,7 @@ scheme.FrameExpectParams = tObject({
   selector: tOptional(tString),
   expression: tString,
   expressionArg: tOptional(tAny),
+  pseudo: tOptional(tEnum(['before', 'after'])),
   expectedText: tOptional(tArray(tType('ExpectedTextValue'))),
   expectedNumber: tOptional(tFloat),
   expectedValue: tOptional(tType('SerializedArgument')),

packages/playwright/src/matchers/matchers.ts

@@ -318,17 +318,17 @@ export function toHaveCount(
   }, expected, options);
 }
 
-export function toHaveCSS(this: ExpectMatcherStateInternal, locator: LocatorEx, name: string, expected: string | RegExp, options?: { timeout?: number }): Promise<MatcherResult<any, any>>;
+export function toHaveCSS(this: ExpectMatcherStateInternal, locator: LocatorEx, name: string, expected: string | RegExp, options?: { timeout?: number, pseudo?: 'before' | 'after' }): Promise<MatcherResult<any, any>>;
 export function toHaveCSS(
   this: ExpectMatcherStateInternal,
   locator: LocatorEx,
   name: string,
   expected: string | RegExp,
-  options?: { timeout?: number },
+  options?: { timeout?: number, pseudo?: 'before' | 'after' },
 ) {
   return toMatchText.call(this, 'toHaveCSS', locator, 'Locator', async (isNot, timeout) => {
     const expectedText = serializeExpectedTextValues([expected]);
-    return await locator._expect('to.have.css', { expressionArg: name, expectedText, isNot, timeout });
+    return await locator._expect('to.have.css', { expressionArg: name, expectedText, isNot, pseudo: options?.pseudo, timeout });
   }, expected, options);
 }
 

packages/playwright/types/test.d.ts

@@ -9223,6 +9223,11 @@ interface LocatorAssertions {
    * @param options
    */
   toHaveCSS(name: string, value: string|RegExp, options?: {
+    /**
+     * Pseudo-element to read computed styles from.
+     */
+    pseudo?: "before"|"after";
+
     /**
      * Time to retry the assertion for in milliseconds. Defaults to `timeout` in `TestConfig.expect`.
      */

packages/protocol/src/channels.d.ts

@@ -3444,6 +3444,7 @@ export type FrameExpectParams = {
   selector?: string,
   expression: string,
   expressionArg?: any,
+  pseudo?: 'before' | 'after',
   expectedText?: ExpectedTextValue[],
   expectedNumber?: number,
   expectedValue?: SerializedArgument,
@@ -3454,6 +3455,7 @@ export type FrameExpectParams = {
 export type FrameExpectOptions = {
   selector?: string,
   expressionArg?: any,
+  pseudo?: 'before' | 'after',
   expectedText?: ExpectedTextValue[],
   expectedNumber?: number,
   expectedValue?: SerializedArgument,

packages/protocol/src/protocol.yml

@@ -2933,6 +2933,11 @@ Frame:
         selector: string?
         expression: string
         expressionArg: json?
+        pseudo:
+          type: enum?
+          literals:
+          - before
+          - after
         expectedText:
           type: array?
           items: ExpectedTextValue
@@ -4593,5 +4598,3 @@ JsonPipe:
     closed:
       parameters:
         reason: string?
-
-

tests/page/expect-misc.spec.ts

@@ -522,6 +522,20 @@ test.describe('toHaveCSS', () => {
     await expect(locator).toHaveCSS('color', 'rgb(255, 0, 0)');
   });
 
+  test('should support pseudo element', async ({ page }) => {
+    await page.setContent(`
+      <style>
+        #node::before {
+          color: rgb(255, 0, 0);
+          content: "Text content";
+        }
+      </style>
+      <div id=node></div>
+    `);
+    const locator = page.locator('#node');
+    await expect(locator).toHaveCSS('color', 'rgb(255, 0, 0)', { pseudo: 'before' });
+  });
+
   test('custom css properties', async ({ page }) => {
     await page.setContent('<div id=node style="--custom-color-property:#FF00FF;">Text content</div>');
     const locator = page.locator('#node');