[Feature]: Allow `toHaveCSS` to target a pseudo-element

[andyearnshaw]

🚀 Feature Request

Allow toHaveCSS to target a pseudo-element like ::after or ::before. This could a new field, e.g. pseudoElement in the options parameter for toHaveCSS and would be a parallel to the second parameter of window.getComputedStyle(element, pseudoElement).

Example

expect(locator).toHaveCSS('background-color', 'red', { pseudo: '::before' });

Motivation

It's not always possible to put your dynamic CSS onto an element. For instance, I'm currently working with dynamic background images that can have a dynamic opacity level. It's not possible to do this in CSS at the moment, so I'm having to fake the background using a pseudo CSS ::before element. Then, in my Playwright tests, I have to evaluate():

const beforeStyle = locator.evaluate(el => window.getComputedStyle(el, '::before'));
expect(beforeStyle).toHaveProperty('opacity', opacity);

With this change, I could simply do this:

expect(locator).toHaveCSS('opacity', opacity, { pseudoElement: '::before' });

Since toHaveCSS is already using window.getComputedStyle() under the hood, this should be a relatively simple addition!